Jangan menulis judul dalam CSS
Cukup bagi bagian menjadi file. Setiap komentar CSS, harus hanya itu, komentar.
reset.css
base.css
somepage.css
someotherpage.css
some_abstract_component.css
Gunakan skrip untuk menggabungkannya menjadi satu; jika diperlukan. Anda bahkan dapat memiliki struktur direktori yang bagus juga, dan cukup pindai skrip Anda.css file .
Jika Anda harus menulis judul, miliki TOC di awal file
Judul dalam TOC harus sama dengan pos yang Anda tulis nanti. Sangat sulit untuk mencari judul. Untuk menambah masalah, bagaimana tepatnya orang mengira Anda memiliki header lain setelah header pertama Anda? ps. jangan tambahkan doc-like * (bintang) di awal setiap baris saat menulis TOC, itu hanya membuatnya lebih menjengkelkan untuk memilih teks.
/* Table of Contents
- - - - - - - - -
Header stuff
Body Stuff
Some other junk
- - - - - - - - -
*/
...
/* Header Stuff
*/
...
/* Body Stuff
*/
Tulis komentar dengan atau sesuai aturan, bukan di luar blok
Pertama, ketika Anda mengedit skrip ada kemungkinan 50/50 Anda akan memperhatikan apa yang ada di luar blok aturan (terutama jika itu adalah gumpalan besar teks;)). Kedua (hampir) tidak ada kasus di mana Anda akan membutuhkan "komentar" di luar. Jika di luar, itu adalah 99% dari waktu judul, jadi tetap seperti itu.
Membagi halaman menjadi beberapa komponen
Komponen harus memiliki position:relative, tidak, paddingdan tidak margin, sebagian besar waktu. Menyederhanakan% ini aturan banyak, serta memungkinkan untuk lebih sederhana absolute:position'ing elemen, karena jika ada wadah diposisikan mutlak elemen diposisikan mutlak akan menggunakan wadah ketika menghitung top, right, bottom, leftsifat.
Sebagian besar DIV dalam dokumen HTML5 biasanya merupakan komponen.
Komponen juga merupakan sesuatu yang dapat dianggap sebagai unit independen pada halaman. Dalam istilah awam memperlakukan sesuatu seperti komponen jika masuk akal untuk memperlakukan sesuatu seperti kotak hitam .
Pergi dengan contoh halaman QA lagi:
#navigation
#question
#answers
#answers .answer
etc.
Dengan memecah halaman menjadi komponen, Anda membagi pekerjaan Anda menjadi unit yang dapat dikelola.
Letakkan aturan dengan efek kumulatif pada baris yang sama.
Misalnya border, margindan padding(tetapi tidak outline) semua menambah dimensi dan ukuran elemen yang Anda desain.
position: absolute; top: 10px; right: 10px;
Jika mereka tidak dapat dibaca pada satu baris, setidaknya letakkan mereka di dekat:
padding: 10px; margin: 20px;
border: 1px solid black;
Gunakan singkatan jika memungkinkan:
/* the following... */
padding-left: 10px;
padding-right: 10px;
/* can simply be written as */
padding: 0 10px;
Jangan ulangi pemilih
Jika Anda memiliki lebih banyak contoh dari pemilih yang sama, ada kemungkinan besar Anda pasti akan berakhir dengan banyak contoh dari aturan yang sama. Sebagai contoh:
#some .selector {
margin: 0;
font-size: 11px;
}
...
#some .selector {
border: 1px solid #000;
margin: 0;
}
Hindari menggunakan TAG sebagai pemilih, ketika Anda dapat menggunakan id / kelas
Pertama dari tag DIV dan SPAN adalah pengecualian: Anda seharusnya tidak pernah menggunakannya! ;) Hanya gunakan mereka untuk melampirkan kelas / id.
Ini...
div#answers div.answer table.statistics {
border-collapse: collapsed;
color: pink;
border: 1px solid #000;
}
div#answers div.answer table.statistics thead {
outline: 3px solid #000;
}
Harus ditulis seperti ini:
#answers .answer .statistics {
border-collapse: collapsed;
color: pink;
border: 1px solid #000;
}
#answers .answer .statistics thead {
outline: 3px solid #000;
}
Karena DIV yang menjuntai ekstra tidak menambah apa pun pada pemilih. Mereka juga memaksakan aturan tag yang tidak perlu. Jika Anda mengubah, misalnya, .answerdari a divke articlegaya Anda akan pecah.
Atau jika Anda lebih suka kejelasan:
#answers .answer .statistics {
color: pink;
border: 1px solid #000;
}
#answers .answer table.statistics {
border-collapse: collapsed;
}
#answers .answer .statistics thead {
outline: 3px solid #000;
}
Alasan menjadi border-collapseproperti adalah properti khusus yang hanya masuk akal ketika diterapkan pada a table. Jika .statisticsbukan, tableitu seharusnya tidak berlaku.
Aturan umum itu jahat!
- hindari menulis aturan generik / sihir jika Anda bisa
- kecuali itu untuk reset-CSS / unreset, semua sihir generik Anda harus berlaku untuk setidaknya satu komponen root
Mereka tidak menghemat waktu Anda, mereka membuat kepala Anda meledak; serta menjadikan perawatan sebagai mimpi buruk. Saat Anda menulis aturan, Anda mungkin tahu di mana mereka menerapkannya, namun itu tidak memiliki jaminan aturan Anda tidak akan mengacaukan Anda nanti.
Untuk menambah aturan umum ini membingungkan dan sulit dibaca, bahkan jika Anda memiliki gagasan tentang dokumen yang Anda desain. Ini bukan untuk mengatakan Anda tidak boleh menulis aturan generik, hanya jangan menggunakannya kecuali Anda benar-benar bermaksud untuk menjadi generik, dan bahkan mereka menambahkan sebanyak mungkin informasi lingkup ke pemilih.
Hal-hal seperti ini ...
.badges {
width: 100%;
white-space: nowrap;
}
address {
padding: 5px 10px;
border: 1px solid #ccc;
}
... memiliki masalah yang sama dengan menggunakan variabel global dalam bahasa pemrograman. Anda perlu memberi mereka ruang lingkup!
#question .userinfo .badges {
width: 100%;
white-space: nowrap;
}
#answers .answer .userinfo address {
padding: 5px 10px;
border: 1px solid #ccc;
}
Pada dasarnya itu berbunyi:
components target
---------------------------- --------
#answers .answer .userinfo address
-------- --------- --------- --------
domain component component selector
Saya suka menggunakan ID setiap kali komponen yang saya tahu adalah singleton pada halaman; kebutuhan Anda mungkin berbeda.
Catatan: Idealnya, Anda harus menulis cukup. Namun menyebutkan lebih banyak komponen dalam pemilih adalah kesalahan yang lebih memaafkan, dibandingkan dengan menyebutkan lebih sedikit komponen.
Mari kita asumsikan Anda memiliki paginationkomponen. Anda menggunakannya di banyak tempat di situs Anda. Ini akan menjadi contoh yang baik ketika Anda akan menulis aturan umum. Katakanlah Anda display:blockmasing-masing tautan nomor halaman dan beri mereka latar belakang abu-abu gelap. Agar dapat terlihat, Anda harus memiliki aturan seperti ini:
.pagination .pagelist a {
color: #fff;
}
Sekarang katakanlah Anda menggunakan pagination Anda untuk daftar jawaban, Anda mungkin menemukan sesuatu seperti ini
#answers .header a {
color: #000;
}
...
.pagination .pagelist a {
color: #fff;
}
Ini akan membuat tautan putih Anda hitam, yang tidak Anda inginkan.
Cara yang salah untuk memperbaikinya adalah:
.pagination .pagelist a {
color: #fff !important;
}
Cara yang benar untuk memperbaikinya adalah:
#answers .header .pagination .pagelist a {
color: #fff;
}
Komentar "logika" kompleks tidak berfungsi :)
Jika Anda menulis sesuatu seperti: "nilai ini tergantung pada bla-bla dikombinasikan dengan tinggi bla-bla", itu hanya tak terhindarkan Anda akan membuat kesalahan dan itu semua akan jatuh seperti rumah kartu.
Buat komentar Anda sederhana; jika Anda memerlukan "operasi logis" pertimbangkan salah satu dari bahasa templating CSS seperti SASS atau KURANG .
Bagaimana saya menulis palet warna?
Biarkan ini sampai akhir. Memiliki file untuk seluruh palet warna Anda. Tanpa file ini, gaya Anda seharusnya masih memiliki beberapa palet warna yang dapat digunakan dalam aturan. Pallet warna Anda harus ditimpa. Anda rantai penyeleksi menggunakan komponen induk tingkat sangat tinggi (mis. #page) Dan kemudian menulis gaya Anda sebagai blok aturan mandiri. Itu bisa saja warna atau lebih.
misalnya.
#page #header .description,
#page #categories .description,
#page #answers .answer .body
{
color: #222; background: #fff;
border-radius: 10px;
padding: 1em;
}
Idenya sederhana, palet warna Anda adalah stylesheet yang terlepas dari gaya dasar, yang Anda kasurkan .
Lebih sedikit nama, membutuhkan lebih sedikit memori, membuat kode lebih mudah dibaca
Lebih sedikit menggunakan nama lebih baik. Idealnya menggunakan kata-kata yang sangat sederhana (dan pendek!): Teks, tubuh, tajuk.
Saya juga menemukan kombinasi kata-kata sederhana lebih mudah untuk dipahami kemudian memiliki sup kata-kata "tepat" yang panjang: postbody, posthead, userinfo, dll.
Pertahankan kosa kata yang kecil, dengan cara ini bahkan jika ada orang asing yang datang untuk membaca sup gaya Anda (seperti diri Anda setelah beberapa minggu;)) hanya perlu memahami di mana kata-kata digunakan, bukan di mana setiap pemilih digunakan. Misalnya saya menggunakan .thissetiap kali elemen seharusnya "item yang dipilih" atau "item saat ini", dll.
Bersihkan dirimu
Menulis CSS itu seperti makan, terkadang Anda meninggalkan kekacauan. Pastikan Anda membersihkan kekacauan itu, atau kode sampah hanya akan menumpuk. Hapus kelas / id yang tidak Anda gunakan. Hapus aturan CSS yang tidak Anda gunakan. Pastikan semuanya ketat dan Anda tidak memiliki aturan yang bertentangan atau digandakan.
Jika Anda, seperti yang saya sarankan, memperlakukan beberapa wadah sebagai kotak hitam (komponen) dalam gaya Anda, menggunakan komponen-komponen itu dalam penyeleksi Anda, dan menyimpan semuanya dalam satu file khusus (atau dengan benar membagi file dengan TOC dan header), maka Anda pekerjaan jauh lebih mudah ...
Anda dapat menggunakan alat seperti ekstensi firefox Dust-Me Selectors (tip: arahkan ke sitemap.xml) untuk membantu Anda menemukan beberapa sampah yang tersembunyi di css nukes dan carnies Anda.
Simpan unsorted.cssfile
Katakanlah Anda menata situs QA, dan Anda sudah memiliki lembar gaya untuk "halaman jawaban", yang akan kami panggil answers.css. Jika sekarang Anda perlu menambahkan banyak css baru, tambahkan ke unsorted.cssstylesheet kemudian refactor ke answers.cssstylesheet Anda .
Beberapa alasan untuk ini:
- lebih cepat untuk refactor setelah Anda selesai, maka itu adalah untuk mencari aturan (yang mungkin tidak ada) dan menyuntikkan kode
- Anda akan menulis hal-hal yang akan Anda hapus, menyuntikkan kode hanya akan membuat lebih sulit untuk menghapus kode itu
- menambahkan ke file asli dengan mudah menyebabkan duplikasi aturan / pemilih
simplicity,complexity,maintenance,structuredanrefactoring.