1.Setel ulang
Pertama-tama, izinkan saya memberi tahu Anda dengan serius bahwa Anda harus selalu mengatur ulang kategori tertentu. Baik Anda menggunakan Eric Meyer Reset, YUI Reset, atau menulis kode reset Anda sendiri, gunakan saja.
Itu dapat dengan mudah menghapus padding dan margin dari semua elemen:
| html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pra, formulir, fieldset, tabel, th, td { margin: 0; bantalan: 0; } |
Eric Meyer Reset dan YUI Reset keduanya sangat ampuh, tetapi bagi saya, keduanya bertindak terlalu jauh. Saya pikir pada akhirnya Anda harus mengatur ulang semuanya dan kemudian mendefinisikan ulang properti semua elemen. Itu sebabnya Eric Meyer merekomendasikan penggunaan yang lebih efisien (reset stylesheet) dan Anda tidak hanya menggunakan reset stylesheet miliknya, drag dan drop ke proyek Anda. Sesuaikan (reset stylesheet) dan buat reset stylesheet Anda sendiri.
Oh, tolong berhenti menggunakan:
| * {margin: 0; bantalan: 0; |
Luangkan lebih banyak waktu untuk mengerjakannya, dan menurut Anda apa yang akan terjadi pada tombol radio saat Anda melepas bantalannya? Elemen bentuk terkadang dapat melakukan hal-hal yang funky, jadi cara paling efektif adalah menjadikannya independen.
2. Urutkan
sebuah ujian kecil
Contoh ini membuat Anda berpikir tentang bagaimana cara menemukan atribut margin yang tepat dengan lebih cepat?
Contoh#1
| div#tajuk h1 { indeks-z: 101; warna: #000; posisi: relatif; tinggi garis: 24 piksel; margin-kanan: 48 piksel; batas bawah: 1px solid #dedede; ukuran font: 18px; } |
Contoh#2
| div#tajuk h1 { batas bawah: 1px solid #dedede; warna: #000; ukuran font: 18px; tinggi garis: 24 piksel; margin-kanan: 48 piksel; posisi: relatif; indeks-z: 101; } |
Anda tidak dapat memberi tahu saya bahwa Contoh #2 tidak dapat menemukan properti margin yang tepat dengan lebih cepat. Urutkan properti elemen Anda berdasarkan abjad. Membuat CSS Anda secara konsisten akan membantu Anda menghemat waktu mencari properti tertentu.
Saya tahu beberapa orang mengatur kode mereka dengan satu cara dan yang lain dengan cara lain, namun di perusahaan saya, kami membuat keputusan konsensus bahwa semua kode akan disusun berdasarkan abjad. Pastinya membantu untuk bekerja dengan orang lain dengan mengatur kode Anda dengan cara ini. Saya merasa ngeri setiap kali saya menemukan style sheet berjenjang yang propertinya tidak diurutkan berdasarkan abjad.
3.Organisasi
Anda harus mengatur style sheet Anda sehingga konten terkait saling berdekatan, sehingga lebih mudah untuk menemukan apa yang Anda cari. Gunakan anotasi yang lebih efisien. Sebagai contoh, inilah cara saya menyusun cascading style sheet saya:
| /*****Mengatur ulang*****/ Hapus padding dan margin dari suatu elemen. /*****Elemen Dasar*****/ Tentukan gaya untuk elemen dasar: body, h1-h6, ul, ol, a, p, dll. /*****Kelas Umum*****/ Mendefinisikan gaya sederhana, seperti mengambang di satu sisi, menghilangkan margin bawah suatu elemen, dll. Tentu saja, sebagian besar dari gaya tersebut tidak terkait dengan semantik yang kita inginkan, tetapi gaya tersebut diperlukan untuk memproses kode secara efisien. /*****Tata Letak Dasar*****/ Tentukan templat dasar: header, footer, dll. Membantu menentukan elemen dasar tata letak halaman web /*****Tajuk*****/ Tentukan semua elemen Hearder /*****Isi*****/ Tentukan semua elemen dalam kotak konten /*****Footer*****/ Tentukan semua elemen Footer /*****Dll*****/ Tentukan penyeleksi lainnya. Dengan memberi anotasi dan mengelompokkan elemen serupa ke dalam grup, Anda akan menemukan apa yang Anda inginkan dengan lebih cepat. |
4. Konsistensi
Tidak peduli bagaimana Anda memutuskan untuk menulis kode, tetaplah konsisten. Saya bosan dengan perdebatan CSS 1 baris vs. multi baris. Tidak perlu berdebat. Setiap orang mempunyai pendapatnya, jadi pilihlah cara kerja yang Anda sukai dan konsistenlah di semua stylesheet Anda.
Secara pribadi, saya akan menggunakan kombinasi keduanya. Jika seorang pemilih memiliki lebih dari 3 atribut, saya akan memotongnya dan menulisnya dalam beberapa baris.
| div#header { mengapung: kiri; lebar: 100%; div#header div.kolom { perbatasan-kanan: 1px solid #ccc; mengapung: benarkanan; margin-kanan: 50 piksel; bantalan: 10 piksel; lebar: 300 piksel; } div#header h1 { float: kiri; posisi: relatif; lebar: 250px } |
Jadi temukan bagaimana Anda ingin bekerja dan kemudian tetap konsisten.
5. Mulailah dari tempat yang tepat
Jangan mencoba mendekati stylesheet Anda sampai Anda menyelesaikan bahasa markup.
Ketika saya bersiap untuk membagi halaman web, sebelum membuat file CSS, saya perlu melihat pratinjau dan menandai semua dokumen antara tag pembuka badan dan tag penutup badan. Saya tidak akan menambahkan DIV, ID, atau pemilih kelas tambahan. Saya akan menambahkan beberapa DIV umum, seperti pendengar, konten, footer, karena saya tahu hal-hal ini ada.
Dengan menandai dokumen terlebih dahulu, Anda tidak akan mengalami masalah divisi1 dan kelas2 yang sudah terkutuk!
/*Anda hanya perlu menambahkan hal itu setelah Anda mulai menulis CSS dan menyadari bahwa Anda akan memerlukan pengait lain untuk mencapai apa yang ingin Anda capai.*/(Teks asli tidak diterjemahkan).
Gunakan pemilih turunan CSS untuk menentukan elemen turunan; jangan hanya menambahkan pemilih kelas atau ID ke suatu elemen secara otomatis. Ingat: CSS tidak ada gunanya tanpa dokumen (atau struktur markup) yang diformat dengan baik.