Menjelaskan mengapa styling tidak boleh dilakukan langsung dalam HTML

ItamarG3 08/15/2017. 12 answers, 2.942 views
lesson-ideas web-development html css

Saya baru-baru ini menyadari bahwa sudah tidak digunakan lagi dari html menurut situs ini . Dari jawaban ini pada Stack Overflow , pengganti marquee dibuat dari CSS. Penjelasan yang diberikan untuk perubahan adalah bahwa html adalah tentang struktur dokumen, dan tata letak itu dan animasi dan styling dll harus dilakukan dari CSS.

Ini membuat saya berpikir:

Apakah secara eksplisit mengajarkan perbedaan antara pengaturan atribut style dari tag html , dan melakukannya melalui CSS berguna untuk meningkatkan pemahaman siswa tentang bergabungnya CSS dan HTML?

Untuk mempersempitnya, saya mencari contoh atau penjelasan tentang bagaimana mengajarkannya secara eksplisit dapat mempermudah para siswa untuk menata halaman web mereka . Lebih disukai penjelasan.

Dengan "mengajarkan secara eksplisit" yang saya maksud adalah benar-benar mengabdikan pelajaran dengan judul "Styling melalui .CSS", atau sesuatu yang serupa.

Beberapa konteks, jika diperlukan:

Para siswa belajar mendesain web dasar: HTML, JavaScript (sangat dasar), JSP dan SQL. Mereka belajar ini selama 1 tahun dan pada akhir tahun mereka harus memiliki situs web (yang mereka terima nilainya). Saya bertanya-tanya apakah pelajaran yang sepenuhnya tentang CSS pada akhirnya dapat mengarah ke situs web yang lebih baik.

5 Comments
3 Puppy 07/30/2017
Masalah inti di sini adalah Anda mengasumsikan bahwa styling tidak boleh dilakukan langsung dalam HTML, dan bahwa menggunakan CSS lebih baik. Tak satu pun dari hal-hal itu benar.
ItamarG3 07/31/2017
@Puppy dengan baik, bagian dari pertanyaannya adalah apakah saya harus mengajarkannya separatly. Jika tidak, maka mereka tidak akan menggunakan stylesheet. Tapi apakah Anda pikir situs web di mana saja sebenarnya hardcodes semua itu css di html? Every div memiliki gunung kode dalam atribut style ?
1 David Spence 07/31/2017
Situs ini menunjukkan kekuatan menjaga css terpisah. csszengarden.com - Struktur yang sama, stylesheet css yang berbeda.
ItamarG3 07/31/2017
@DavidSpence bagus. Saya pasti akan menggunakannya
1 no comprende 07/31/2017
Apa pun yang Anda lakukan, jangan tunjukkan pos SO ini tentang penguraian HTML dengan Regex . Bisa memberi mereka mimpi buruk!

12 Answers


richard 07/30/2017.

Saya suka ide menghasilkan beberapa lembar gaya, dan meminta siswa menerapkannya ke HTML mereka. Mereka kemudian dapat melihat kekuatan memiliki lembaran gaya terpisah.

Mereka kemudian dapat mulai mengedit style sheet, dan melihat kekuatan dari satu perubahan kecil dapat mengubah setiap heading, atau setiap paragraf, dll.

Saya juga di masa lalu, menulis file HTML yang memiliki seperangkat tombol di bagian bawah. Tombol-tombol ini akan memicu file CSS yang berbeda untuk dimuat. Itu adalah JavaScript yang sangat sederhana.

Untuk menjawab apakah mereka harus dipisahkan

Mempertahankan gaya dan konten terpisah, direkomendasikan oleh W3 dan banyak lainnya. Ini mengimplementasikan pemisahan kekhawatiran dan tanggung jawab tunggal. Kedua pola yang sangat penting dalam desain perangkat lunak.

Untuk menjawab, sebaiknya Anda memberikan pelajaran untuk memisahkan file CSS.

Iya nih. Jika penting untuk menjaga ini terpisah, yang mana itu, maka Anda harus mengajari murid untuk memisahkan mereka. Hemat waktu dengan tidak mengajari mereka untuk mencampurnya dengan HTML (Ini akan menghemat waktu dua kali, karena Anda tidak perlu tidak mengajari).


Saya hanya melakukan ini dengan satu atau dua orang (bukan kelas).

5 comments
ItamarG3 07/30/2017
Paragraf kedua itu terdengar sangat berguna. Tapi itu tidak menjawab apakah saya harus benar-benar mencurahkan pelajaran untuk mengajarkan bagaimana dan mengapa seseorang harus menulis stylesheet css, bukan atribut style html inline.
richard 07/30/2017
Ditambahkan sebagian jawaban untuk If dan mengapa mencurahkan pelajaran untuk itu.
1 Buffy 07/30/2017
Saya setuju bahwa un-teaching adalah penggunaan waktu semua orang yang sangat boros. Yang terbaik adalah menangkap kesalahpahaman sebelum kebiasaan buruk dibangun dan diperkuat.
1 richard 07/30/2017
@tim, ini hanyalah optimisation beban. Konseptualitasnya harus tetap terpisah. Namun Google mengatakan meletakkannya di file yang sama. Mereka tidak mengatakan bahwa Anda harus mengatur setiap bit secara terpisah. Mereka mengatakan mengambil apa yang bisa dalam file css dan menambahkannya ke bagian <style> dari html.
1 Darren 07/31/2017
Alih-alih memberi siswa berbagai style sheet yang mempengaruhi kode mereka, saya akan mencoba pendekatan yang berlawanan. Setelah mengajari mereka gaya sebaris dalam HTML, beri mereka halaman yang bergantung pada dokumen CSS untuk gaya dan minta mereka untuk membuat stylesheet mereka sendiri untuk itu (menggunakan teknik yang sama yang mereka pelajari dari menggunakan HTML sebaris - hanya masalah pelabelan gaya dan menempatkan mereka bersama di satu tempat). Kemudian semua orang di kelas dapat membandingkan style sheet mereka pada subjek tes umum (yang Anda berikan) dan melihat kemungkinannya.

Buffy 07/30/2017.

Jika Anda hanya ingin membangun halaman yang sederhana dan ad-hoc dan tidak akan pernah berubah di masa depan dan hanya akan pernah terlihat pada satu jenis perangkat, maka, pastikan, membangun styling langsung ke html. Ini sama ketika Anda menulis sebuah program yang hanya akan dijalankan sekali pada satu perangkat untuk mendapatkan jawaban, setelah itu program menjadi usang. Maka tidak ada alasan untuk mengkodekan dengan hati-hati. "Cepat dan kotor" berfungsi untuk hal-hal seperti itu.

However hal-hal yang berubah, dan halaman web dilihat pada perangkat dengan berbagai ukuran layar, bahkan model warna. Dan mereka dapat dilihat di masa depan pada perangkat yang belum ada.

Jadi, jika Anda ingin membangun situs yang penting dan abadi dan yang harus dipertahankan di masa depan, gunakan CSS. Anda mungkin tidak akan menulis program C yang penting, tetapi setidaknya, faktorkan hal-hal yang harus sama tetapi digunakan kembali. Dalam pemrograman C sederhana, kami memfaktorkan fungsi untuk ini. Dalam html kami mempertimbangkan styling. Pada level yang lebih dalam, sisi server juga banyak mengeluarkan data, dll. Hal ini memungkinkan hal-hal yang seharusnya sama, tetap sama, dan memungkinkan kita memodifikasi satu tingkat desain secara independen dari level lain.

Ini bukan hal yang persis sama, tetapi lihat kode yang mendasari halaman depan Google. Saya tidak tahu apa yang mereka gunakan untuk menyatukannya dan mempertahankannya, tetapi saya ragu bahwa itu hanya editor teks. Perhatikan bahwa halaman depan mereka, meskipun sangat sederhana dalam tata letak, sering berubah.

Note to the Instructor Saat Anda siap untuk menilai pekerjaan siswa, lihat di berbagai perangkat, dengan resolusi layar yang berbeda. Saya tidak, bagaimanapun, menyarankan Anda juga membuat mereka menyediakan per-perangkat css.

Untuk itu, lihat beberapa halaman StackExchange di desktop vs telepon. Dan untuk jijik, lihat sumber dan stylesheet dari beberapa halaman.

2 comments
1 Luke Sawczak 07/31/2017
Perbandingan dengan fungsi itu bagus. Saya menganggap dosa yang dimaksud adalah langsung memasok atribut gaya dalam sumber HTML. Jika demikian, itu bisa dibandingkan dengan mengambil tubuh metode dan hanya menempel di mana Anda akan memanggil metode. Kontraproduktif secara ekstrim.
no comprende 08/01/2017
Untuk jijik nyata, lihat sumber dan stylesheet dari halaman Microsoft dan Moodle! Mereka bisa ratusan garis panjang. Konsep asli dari HTML adalah bahwa itu akan bekerja pada perangkat yang "belum ada". Dan saat ini ada begitu banyak ukuran layar yang mungkin juga hanya menjadi variabel.

AnoE 07/30/2017.

Untuk membuat mereka benar-benar mengerti apa yang dapat Anda lakukan dengan CSS saja - dengan only mengganti file CSS lain - bawa ke CSS Zen Garden . Dengan HTML yang sama untuk setiap halaman, dan only file .css yang diganti, Anda mendapatkan halaman yang benar-benar liar. Mulai dari ketiadaan kecil yang tenang hingga kubus 3D-bergulir ...

Kemudian jelaskan kepada mereka bahwa skillset yang diperlukan untuk membuat HTML, vs. skillset untuk (terutama yang ekstrim seperti itu) CSS sangat berbeda, dan bahwa HTML berfungsi sebagai pembawa informasi saja.

Barang lebih lanjut adalah menginstal pembaca layar (untuk orang buta) - ada yang dengan penggunaan gratis terbatas - untuk menunjukkan kepada mereka bagaimana HTML yang sama "terlihat" ketika diucapkan dengan suara keras.

Juga tunjukkan bahwa alat-alat untuk tunanetra dapat misalnya mengekstrak teks tautan dan sebagainya dari HTML jika terstruktur dengan baik, dan ini juga memungkinkan untuk menavigasi halaman dengan hanya keyboard - yang dapat berguna jika sangat cenderung, bahkan jika penglihatan baik-baik saja.

Akhirnya, tunjukkan bahwa halaman dengan pemisahan konten dan gaya yang baik memiliki peluang lebih tinggi untuk bekerja pada perangkat portabel - kata kuncinya adalah desain responsif, di mana konten dapat dengan bebas mengalir ke resolusi apa pun sesuai kebutuhan.


thehayro 07/30/2017.

Untuk mempersempitnya, saya mencari contoh atau penjelasan tentang bagaimana mengajarkannya secara eksplisit dapat mempermudah para siswa untuk menata halaman web mereka. Lebih disukai penjelasan.

Seperti yang dikatakan richard, para siswa dapat melihat bagaimana satu pengeditan sederhana dari gaya dapat mengubah setiap elemen.

Sebagai contoh, Anda bisa membiarkan siswa Anda merasakan 'manfaat pemisahan gaya dari html. Yang berarti, beri mereka latihan, di mana mereka perlu memberi gaya beberapa elemen (misalnya warna latar belakang elemen) di html mereka. Kemudian biarkan mereka mengubah setiap elemen menjadi warna lain. Pelajarannya adalah membiarkan mereka memahami bahwa tugas ini dapat jauh lebih memakan waktu jika Anda memisahkan gaya dari html. Anda kemudian dapat menunjukkan cara mengubah satu baris di css, yang mengubah semua warna latar belakang elemen.

4 comments
thesecretmaster♦ 07/30/2017
HI thehayro! Selamat Datang di Pendidik Ilmu Komputer !
Puppy 07/30/2017
Atau, mereka bisa menghasilkan HTML mereka melalui kode seperti orang waras, dalam hal ini, itu sepele untuk mengubah warna setiap elemen tanpa style sheet terpisah.
1 thehayro 07/30/2017
Yakin. Itu terserah persyaratan di mana halaman web harus ditampilkan (ponsel / desktop). Tapi pertanyaannya sejauh yang saya mengerti, adalah bagaimana menjelaskan mengapa dan bagaimana ada kebutuhan untuk pemisahan HTML dan CSS.
no comprende 08/01/2017
Ketika saya sedang belajar CSS, saya memberi diri saya tugas membuat papan catur yang cukup besar, dan tata letak tiga kolom kanonik dengan header dan footer.

SpiritBH 07/31/2017.

Tanyalah pada diri Anda sendiri: Mengapa kita memisahkan apa pun dalam bentuk kode apa pun?

Di hampir setiap bahasa pemrograman / scripting ada pemisahan dan delegasi. Kami melakukan ini untuk memastikan lebih mudah melacak semua kode dan dapat mengidentifikasi masalah dengan lebih mudah (yang pasti akan bertunas karena tidak ada programmer yang sempurna)

Jadi saya pikir pelajaran khusus tentang CSS adalah ide yang bagus, karena membantu mereka memahami apa yang bertanggung jawab untuk itu. Ini membantu mereka memahami bahwa jika semua HTML benar ketika melihat sumbernya, tetapi semua makeup masih campur aduk, bahwa mereka perlu melihat ke CSS.

Di atas itu, CSS adalah besar, fleksibel dan dapat melakukan lebih banyak daripada hanya menempatkan perbatasan yang bagus di sekitar hal-hal. Untuk menunjukkan kepada kelas apa yang dapat dilakukan, dan seberapa rumitnya hal itu, akan mendorong titik lebih jauh ke rumah bagaimana tidak bijaksana memadukan HTML dan CSS terlalu dalam.

Pada akhirnya, pemisahan CSS dari HTML (atau kode apa pun dalam hal ini) merupakan pengembangan; ini bukan tentang penciptaan berfungsi (lebih baik) nya tentang pengembang memiliki kontrol lebih dan lebih mudah atas ciptaan mereka.

Mungkin pada catatan itu Anda ingin mencoba dan membuat kelas memeriksa pekerjaan satu sama lain, itu akan membantu mereka melihat betapa pentingnya memiliki kode terdelegasi yang bersih saat Anda bekerja dalam tim.

1 comments
ItamarG3 07/31/2017
Anda mengangkat beberapa poin yang sangat menarik. Terima kasih! dan selamat datang di Pendidik Ilmu Komputer

gabe3886 07/31/2017.

Cara yang sedikit berbeda untuk melihatnya mungkin adalah memperkenalkan kode DRY (Jangan Ulangi Diri Sendiri).

Dengan menggunakan CSS untuk melakukan styling, Anda tahu bahwa hanya dengan menambahkan kelas ke elemen HTML, styling akan bertahan. Jika Anda harus menambahkan semuanya secara manual, maka ketika Anda perlu mengubah satu bagian, Anda perlu mengubah banyak, banyak lagi.

Untuk mencuri ide ilustrasi dari Sekolah W3 , jika Anda ingin, katakanlah, paragraf memiliki warna latar belakang yang berbeda, Anda bisa melakukannya dengan cara ini:

Paragraph 1

Paragraph 2

Paragraph 3

Paragraph 4

Tapi, jika saya ingin mengubah urutan jadi 2,4,3,1 tetapi tetap mewarnai, saya kemudian harus mengubah semua gaya yang ada di setiap tag. Jika itu di beberapa halaman, maka beban kerja bisa menjadi besar.

Jika saya melakukannya dalam CSS, saya dapat melakukan hal berikut:

p:nth-child(odd) {
    background: red;
}

p:nth-child(even) {
    background: blue;
} 

Sekarang tidak lagi peduli apa isinya, saya bisa memesannya seperti yang saya suka dan styling masih berfungsi. Banyak usaha berubah. Mengabaikan pemesanan, jika saya ingin mengubahnya menjadi warna yang lebih masuk akal sehingga mudah dibaca, saya mengubah nilai dalam CSS satu kali, dan itu diterapkan ke setiap item DOM yang cocok.

Di luar itu (karena CSS dapat disematkan di dalam tag kepala), membaginya ke dalam file dan termasuk itu berarti saya tidak perlu mengulang (sekarang lebih masuk akal) CSS ke dalam berbagai file, ke dalam struktur folder untuk setiap halaman yang saya miliki. Saya menyertakan file CSS di header dan gaya berlaku. Sekarang jika saya perlu membuat perubahan pada warna atau menambahkan gaya tambahan, saya mendapatkan manfaat yang sama karena tidak perlu menduplikasi yang saya miliki dari tidak menggunakan gaya sebaris.

Manfaat lain dari memiliki file terpisah, jauh dari tanggung jawab terbagi, adalah kinerja. Browser cukup bagus dalam file cache, jadi jika harus mengunduh file CSS tunggal (idealnya diperkecil) untuk situs yang kemudian dapat mengajukan permohonan kembali, itu adalah satu hal yang kurang untuk diunduh untuk halaman lain. Kinerja harus selalu menjadi pertimbangan bagi orang-orang, terutama dengan peningkatan penelusuran seluler. Jika halaman web memiliki banyak CSS di dalamnya maka sumbernya, tentu saja, besar. Ini membutuhkan waktu lebih lama untuk mengunduh dan / atau menjadi dapat digunakan, yang dapat membuat orang kehilangannya sehingga menunggu menjadi tidak dapat diterima oleh mereka.


ncmathsadist 08/01/2017.

Kami mengajarkan bahwa ada tiga lapisan pada halaman web: struktur, penampilan, dan perilaku. Struktur ditentukan oleh DOM, yang dibuat dengan markup HTML5 yang terbentuk dengan baik. Ketika kita belajar tentang HTML, kita segera mulai menggambar pohon dokumen, sehingga kita dapat memahami bagaimana elemen pada suatu halaman berhubungan satu sama lain.

Penampilan ditentukan oleh CSS, yang mengakses DOM untuk memformat dan menata halaman. Ini disimpan dalam file terpisah sehingga dapat dibagikan oleh sekelompok halaman terkait. HTML menangani situasi ad hoc menggunakan id atau class . Penggunaan ini membuat pemeliharaan halaman lebih mudah, karena gaya untuk item yang mengandung atribut ini dibuat di one place dalam file CSS.

Lapisan ketiga adalah perilaku, yang seharusnya muncul dalam file JavaScript. JavaScript never perlu muncul di halaman, kecuali untuk fungsi panggilan dari kode penanganan acara. Bahkan ini bisa dilampirkan dalam file JS. Pastikan siswa-siswa Anda tahu tentang load peristiwa dan onload awal, sehingga mereka dapat menunda panggilan kode sampai elemen halaman ada.

Jika Anda menginstal Node, Anda dapat menjalankan tes kode JS di baris perintah, dan mengembangkan suite uji untuk fungsi yang Anda buat.

Memisahkan tiga lapisan membuat semuanya tetap rapi dan memaksimalkan penggunaan ulang kode.


user1639154 07/31/2017.

Tampaknya banyak jawaban di sini tidak membahas titik pewarisan pada gaya, karena ini juga harus diajarkan. Aturan dasarnya adalah apa yang dibaca terakhir yang akan diterapkan.

yang pertama dimuat biasanya adalah lembaran eksternal di bagian kepala dokumen. Lembar gaya yang tertaut di kepala dokumen akan dikuasai oleh gaya yang ditempatkan sebaris dalam badan html, dan yang pada gilirannya juga akan diganti oleh gaya yang ditempatkan langsung pada elemen DOM. Tag penting! Dapat digunakan untuk mengubah perilaku ini juga.

Sebagian besar akan meletakkan semua css mereka ke dalam file sendiri karena lebih mudah untuk mempertahankan dan tidak akan memerlukan banyak pekerjaan ketika diperbarui / diubah.

EDIT: Hanya untuk memperjelas lebih jauh, hanya gaya spesifik yang cocok dalam kelas yang akan saling bentrok / override, jika satu inline menambahkan gaya untuk menggarisbawahi teks, yang tidak ada di kelas dalam lembar eksternal untuk Sebagai contoh, itu hanya akan menambahkan gaya tambahan itu. Kelas-kelas tersebut tidak langsung saling menggantikan tetapi bergabung satu sama lain.

5 comments
1 ItamarG3 07/31/2017
Wow. Selamat Datang di Pendidik Ilmu Komputer . Ini benar-benar sesuatu yang tidak saya pertimbangkan. Saya akan senang jika Anda bisa menambahkan beberapa contoh atau deskripsi yang menunjukkan itu. (Saya can menulisnya sendiri, tetapi saya lebih tertarik untuk melihat apa yang dapat Anda pikirkan). Ini benar-benar jawaban yang menarik :)
1 ItamarG3 07/31/2017
Tidak terkait: mengapa Anda tidak mengikuti tur kami? Saya yakin Anda akan menemukannya menarik.
user1639154 07/31/2017
Saya salah sedikit, style sheet eksternalnya pertama, kemudian mendokumentasikan gaya dan kemudian pada elemen, otak saya tidak pernah 100% pada senin pagi. :)
ItamarG3 07/31/2017
Maafkan dan lupakan ;). Anda dapat mengedit jawaban Anda. Ada tombol edit \ tautan langsung di bawah jawaban Anda. Sementara Anda melakukannya, apakah Anda ingin menambahkan beberapa contoh untuk menunjukkan apa jawaban Anda? Itu benar-benar membuatnya menjadi jawaban yang jauh lebih baik: D
user1639154 07/31/2017
Sayangnya saya tidak punya waktu sekarang. Saya hanya ingin menyebutkan warisan css, karena ini adalah aspek penting dari css.

rackandboneman 08/03/2017.

Buatlah sebuah proyek di mana hasilnya adalah DUA tampilan yang benar-benar berbeda dari same document , mis. Versi yang terlihat bagus pada monitor besar dan yang lain yang tampak hebat pada iPhone.

Menggunakan bukan halaman web statis tetapi dokumen yang dapat di-generate oleh komputer akan lebih mendorong titik rumah, karena menanamkan informasi gaya dalam pembuat dokumen akan membuatnya tampak lebih kompleks - satu-satunya pilihan untuk mengacaukan gaya adalah dengan mengubah generator dokumen dengan semua kerumitan yang terlibat atau stylesheet yang persis seperti yang Anda maksudkan. Bahkan lebih baik: Tetapkan two kelompok di sudut ruangan yang terpisah untuk melakukan pembuatan dokumen dan bagian stylesheet - dan mengatur bagaimana spesifikasi dikomunikasikan di antara keduanya.

4 comments
ItamarG3 08/03/2017
Ini luar biasa. Wow.
rackandboneman 08/03/2017
Nah, buatlah itu kredibel.
ItamarG3 08/03/2017
Ini luar biasa karena memecahkan masalah dengan keadaan yang tidak bisa saya ungkapkan (hal-hal sekolah), tetapi itu tidak exactly - exactly menjawab pertanyaan ...
1 rackandboneman 08/03/2017
Oh, dan saya ikut campur dalam diskusi sebagai bukan seorang guru tetapi seorang profesional TI - apa yang saya gambarkan adalah mengapa hal-hal dilakukan dalam praktek seperti teori yang ingin Anda ajarkan mengatakan :)

Chris M. 08/02/2017.

Ada banyak jawaban yang bagus di sini. Satu hal yang belum saya lihat adalah bahwa konten dan desain sering dibuat oleh orang atau tim yang terpisah, dan dengan demikian masing-masing didefinisikan dengan alat dan bahasanya sendiri memungkinkan alur kerja terpisah yang diperlukan.

4 comments
ItamarG3 08/02/2017
Wow. Saya tidak memikirkan itu. Maukah Anda memperluas sedikit tentang bagaimana saya bisa menjelaskan ini dalam pelajaran terpisah tentang penggunaan stylesheet CSS?
Chris M. 08/02/2017
Saya akan menggunakan analogi. Insinyur otomotif tidak memilih warna mobil. Penulis skenario umumnya tidak melakukan desain kostum.
ItamarG3 08/02/2017
Saya melihat. Mungkin Anda harus memasukkan analogi tersebut dalam jawaban Anda dengan mengedit jawabannya.
1 Buffy 08/03/2017
Sebenarnya itu lebih buruk dari itu. Di beberapa perusahaan besar dengan keberadaan web yang penting, ada tim standar yang duduk di atas tim konten dan tata letak. Jika tata letak adalah satu pixel dari standar, Anda melakukannya. Satu piksel.

thesecretmaster 08/03/2017.

Alasan penting mengapa gaya sebaris yang buruk adalah keterbacaan kode, polos dan sederhana. Dalam hal ini, contoh harus cukup untuk membuktikan pendapat Anda:

  
The Title
This is a super great article

Dibandingkan dengan:

  
The Title
This is a super great article

Selain contoh ini, tanpa menggunakan kelas dan id Anda membuat DOM jauh lebih sulit untuk memanipulasi menggunakan javascript dan Anda membuat tidak mungkin untuk menggunakan pseudo-elements dan beberapa pemilih CSS yang sangat bagus seperti :nth-child() dan :first-child , untuk beberapa nama.


Puppy 07/31/2017.

Saya benar-benar tidak setuju - styling harus dilakukan langsung dalam HTML.

Masalah utamanya adalah styling tidak terpisah jauh dari struktur HTML. Cukup menulis gaya dalam file yang terpisah secara fisik tidak mengubah ini. Contoh yang baik adalah dukungan perangkat seluler. Secara teori, Anda bisa membuat file CSS seluler. Namun dalam kenyataannya, Anda mungkin memerlukan desain UI yang benar-benar terpisah untuk menghasilkan pengalaman yang baik pada perangkat seluler, dan kemudian struktur HTML terpisah untuk mendukung ini, dan kemudian rangkaian gaya yang terpisah. "Buat tombol yang sama tetapi sedikit lebih kecil" hanya berfungsi untuk potongan terkecil.

Menghasilkan UI yang benar melibatkan pembuatan struktur HTML yang mendukung gaya yang Anda butuhkan. Karena keduanya sebenarnya digabungkan secara erat, menjadikannya kolokasi hanya membuat hal-hal mudah dimengerti dan semua di satu tempat.

Selain itu, karena Anda mungkin menghasilkan HTML Anda melalui kode, tidak ada masalah dengan menghasilkan HTML dengan gaya digandakan, karena generator kode Anda dapat memuntahkan gaya sepanjang hari.

Memiliki CSS mentah sangat bermasalah karena gayanya benar-benar acak dan pada lingkup global, dan sulit untuk digunakan kembali. Anda membuat nama kelas dengan harapan tidak ada orang lain yang menggunakannya. Anda menumpuk kelas Anda sendiri di dalam elemen itu untuk mencoba memecahkan masalah ini sedikit tetapi sekarang Anda tidak dapat menggunakan kembali kelas-kelas ini di tempat lain karena mereka tidak dalam struktur DOM yang tepat. Kemudian Anda mengetahui bahwa beberapa orang acak di bagian yang benar-benar terpisah dari halaman Anda menggunakan kelas Anda tanpa memberi tahu Anda dan sekarang Anda telah merusaknya dengan mengubah gaya Anda. Dan semoga berhasil mendapatkan pengecekan tipe, dukungan IDE, dll. Ini juga sulit untuk dibuat misal kelas-kelas parameter, atau secara global menerapkan penggantian, misalnya display: flex dengan display: flex dan display: -webkit-flex untuk iOS.

Cara yang benar untuk menangani gaya adalah untuk menghadapinya seperti pada kode lain - mengenkapsulasi mereka dalam beberapa fungsi.

5 comments
1 thesecretmaster♦ 07/31/2017
Hai Puppy, selamat datang di Pendidik Ilmu Komputer ! Jika Anda ingin bertemu dengan anak anjing lainnya, Anda dapat menyapa Buffy , siapa bulldog, dalam obrolan . Ini adalah jawaban yang menarik, terima kasih telah berbagi perspektif Anda di sini!
2 richard 07/31/2017
Sementara saya tidak setuju dengan semua yang Anda katakan. Saya mengerti maksud Anda. Terutama baris terakhir (saya pikir Anda harus memperluas ini). Tunjukkan pada kami bagaimana menurut Anda hal itu harus dilakukan. Bahkan jika kita tidak 100% setuju, kita bisa belajar sesuatu.
no comprende 08/01/2017
Jawaban Anda mengingatkan saya pada saat saya mengajukan pertanyaan dan seseorang berkata, "Jika Anda membaca Misa dalam bahasa Latin." Ada banyak cara yang 'benar' untuk melakukan sesuatu, dan dari sudut pandang Anda, dengan HTML yang dihasilkan, memang tidak ada bedanya. Tetapi kebanyakan instruktur tidak mengajarkan HTML yang dihasilkan, seperti kebanyakan programmer tidak belajar menulis kompiler. Lapisan yang kita tambahkan untuk membuat pemeliharaan file HTML lebih mudah adalah berlebihan dengan membuang-jauh HTML. Saya juga suka menghasilkan sesuatu, tetapi saya termasuk minoritas yang sangat besar. Mungkin kita dapat berbicara tentang Bahasa-Bahasa Khusus Domain kapan-kapan?
Puppy 08/01/2017
Instruktur yang tidak mengajarkan HTML yang dihasilkan tidak mengajarkan HTML yang berguna.
ItamarG3 08/02/2017
@Puppy Apakah begitu?

Related questions

Hot questions

Language

Popular Tags