Mengelola Ledakan CSS

Saya sangat mengandalkan CSS untuk situs web yang sedang saya kerjakan. Saat ini, semua gaya CSS sedang diterapkan pada basis per tag, dan sekarang saya mencoba untuk memindahkannya ke lebih banyak gaya eksternal untuk membantu dengan perubahan di masa depan.

Tapi sekarang masalahnya adalah saya perhatikan saya mendapatkan "CSS Explosion". Menjadi sulit bagi saya untuk memutuskan cara terbaik mengatur dan abstrak data dalam file CSS.

Saya menggunakan sejumlah besar divtag dalam situs web, bergerak dari situs web berbasis tabel. Jadi saya mendapatkan banyak penyeleksi CSS yang terlihat seperti ini:

div.title {
  background-color: blue;
  color: white;
  text-align: center;
}

div.footer {
  /* Styles Here */
}

div.body {
  /* Styles Here */
}

/* And many more */

Ini belum terlalu buruk, tetapi karena saya seorang pemula, saya bertanya-tanya apakah rekomendasi dapat dibuat tentang cara terbaik untuk mengatur berbagai bagian dari file CSS. Saya tidak ingin memiliki atribut CSS terpisah untuk setiap elemen di situs web saya, dan saya selalu ingin file CSS cukup intuitif dan mudah dibaca.

Tujuan utama saya adalah membuatnya mudah untuk menggunakan file CSS dan menunjukkan kekuatannya untuk meningkatkan kecepatan pengembangan web. Dengan cara ini, orang lain yang mungkin bekerja di situs ini di masa depan juga akan masuk ke praktik menggunakan praktik pengkodean yang baik, daripada harus mengambilnya seperti yang saya lakukan.

Ini pertanyaan yang sangat bagus. Di mana pun saya melihat, file CSS cenderung lepas kendali setelah beberapa saat — terutama, tetapi tidak hanya, ketika bekerja dalam tim.

Berikut ini adalah aturan yang saya coba patuhi (bukan berarti saya selalu berhasil.)

• Refactor awal, sering refactor. Sering membersihkan file CSS, menyatukan beberapa definisi dari kelas yang sama. Hapus definisi usang segera .

• Saat menambahkan CSS selama memperbaiki bug, tinggalkan komentar tentang apa yang dilakukan perubahan ("Ini untuk memastikan bahwa kotak dibiarkan sejajar di IE <7")

• Hindari pemborosan, mis. Mendefinisikan hal yang sama di dalam .classnamedan .classname:hover.

• Gunakan komentar /** Head **/untuk membangun struktur yang jelas.

• Gunakan alat prettifier yang membantu mempertahankan gaya konstan. Saya menggunakan Polystyle , dengan mana saya cukup senang (biaya $ 15 tetapi menghabiskan uang dengan baik). Ada juga yang gratis di sekitar (misalnya Code Beautifier berdasarkan CSS Tidy , alat open-source).

• Bangun kelas yang masuk akal. Lihat di bawah untuk beberapa catatan tentang ini.

• Gunakan semantik, hindari sup DIV - gunakan <ul>s untuk menu, misalnya.

• Tetapkan semuanya pada level serendah mungkin (mis. Kelompok font default, warna dan ukuran body) dan gunakan inheritjika memungkinkan

• Jika Anda memiliki CSS yang sangat kompleks, mungkin pre-compiler CSS membantu. Saya berencana untuk melihat xCSS untuk alasan yang sama segera. Ada beberapa yang lain di sekitar.

• Jika bekerja dalam tim, sorot perlunya kualitas dan standar untuk file CSS juga. Semua orang mengerti tentang standar pengkodean dalam bahasa pemrograman mereka, tetapi ada sedikit kesadaran bahwa ini juga diperlukan untuk CSS.

• Jika bekerja dalam sebuah tim, jangan mempertimbangkan menggunakan Versi Control. Itu membuat hal-hal yang jauh lebih mudah untuk dilacak, dan mengedit konflik yang lebih mudah untuk dipecahkan. Ini sangat berharga, bahkan jika Anda "hanya" ke dalam HTML dan CSS.

• Jangan bekerja dengan !important. Bukan hanya karena IE = <7 tidak dapat menghadapinya. Dalam struktur yang kompleks, penggunaan !importantsering tergoda untuk mengubah perilaku yang sumbernya tidak dapat ditemukan, tetapi itu racun untuk pemeliharaan jangka panjang.

Membangun kelas yang masuk akal

Ini adalah bagaimana saya suka membangun kelas yang masuk akal.

Saya menerapkan pengaturan global terlebih dahulu:

body { font-family: .... font-size ... color ... }
a { text-decoration: none; }

Kemudian, saya mengidentifikasi bagian utama tata letak halaman — misalnya area atas, menu, konten, dan footer. Jika saya menulis markup yang baik, area ini akan identik dengan struktur HTML.

Lalu, saya mulai membangun kelas-kelas CSS, menentukan sebanyak mungkin keturunan selama itu masuk akal, dan mengelompokkan kelas-kelas terkait sedekat mungkin.

div.content ul.table_of_contents 
div.content ul.table_of_contents li 
div.content ul.table_of_contents li h1
div.content ul.table_of_contents li h2
div.content ul.table_of_contents li span.pagenumber

Pikirkan seluruh struktur CSS sebagai pohon dengan definisi yang semakin spesifik semakin jauh dari Anda. Anda ingin mempertahankan jumlah kelas serendah mungkin, dan Anda ingin mengulangi diri Anda sesering mungkin.

Misalnya, Anda memiliki tiga menu navigasi. Tiga menu ini terlihat berbeda, tetapi mereka juga memiliki karakteristik tertentu. Misalnya, semuanya <ul>, semuanya memiliki ukuran font yang sama, dan semua item bersebelahan (berbeda dengan rendering default dari suatu ul). Juga, tidak ada menu yang memiliki poin-poin ( list-style-type).

Pertama, tentukan karakteristik umum dalam kelas bernama menu:

div.navi ul.menu { display: ...; list-style-type: none; list-style-image: none; }
div.navi ul.menu li { float: left }

kemudian, tentukan karakteristik spesifik dari masing-masing dari tiga menu. Level 1 tingginya 40 piksel; level 2 dan 3, 20 piksel.

Catatan: Anda juga bisa menggunakan beberapa kelas untuk ini tetapi Internet Explorer 6 memiliki masalah dengan beberapa kelas , jadi contoh ini menggunakan ids.

div.navi ul.menu#level1 { height: 40px; }
div.navi ul.menu#level2 { height: 20px; }
div.navi ul.menu#level3 { height: 16px; }

Markup untuk menu akan terlihat seperti ini:

<ul id="level1" class="menu"><li> ...... </li></ul>
<ul id="level2" class="menu"><li> ...... </li></ul>
<ul id="level3" class="menu"><li> ...... </li></ul>

Jika Anda memiliki elemen yang hampir sama secara semantik pada halaman — seperti tiga menu ini — cobalah untuk mencari persamaannya terlebih dahulu dan masukkan ke dalam kelas; kemudian, cari tahu properti spesifik dan terapkan ke kelas, atau, jika Anda harus mendukung Internet Explorer 6, ID.

Kiat HTML lain-lain

Jika Anda menambahkan semantik ini ke output HTML Anda, desainer nantinya dapat menyesuaikan tampilan situs web dan / atau aplikasi menggunakan CSS murni, yang merupakan keuntungan besar dan hemat waktu.

• Jika memungkinkan, berikan kelas unik pada tubuh setiap halaman: <body class='contactpage'>ini membuatnya sangat mudah untuk menambahkan tweak khusus halaman ke style sheet:

  body.contactpage div.container ul.mainmenu li { color: green }

• Saat membuat menu secara otomatis, tambahkan konteks CSS sebanyak mungkin untuk memungkinkan penataan yang luas nanti. Sebagai contoh:

  <ul class="mainmenu">
   <li class="item_first item_active item_1"> First item </li> 
   <li class="item_2"> Second item </li> 
   <li class="item_3"> Third item </li> 
   <li class="item_last item_4"> Fourth item </li> 
  </ul>

  Dengan cara ini, setiap item menu dapat diakses untuk penataan sesuai dengan konteks semantiknya: Apakah itu item pertama atau terakhir dalam daftar; Baik itu item yang sedang aktif; dan dengan nomor.

Perhatikan bahwa penugasan beberapa kelas seperti yang diuraikan dalam contoh di atas tidak berfungsi dengan baik di IE6 . Ada solusi untuk membuat IE6 mampu menangani beberapa kelas. Jika solusinya bukan pilihan, Anda harus mengatur kelas yang paling penting bagi Anda (nomor item, aktif atau pertama / terakhir), atau menggunakan ID.

Berikut ini hanya 4 contoh:

• Konvensi CSS / Model Tata Letak Kode
• Apakah ada standar CSS yang harus saya ikuti saat menulis stylesheet pertama saya?
• Apa metode terbaik untuk merapikan CSS?
• Praktik Terbaik - Pemformatan Lembar Gaya CSS

Pada semua 4 jawaban saya sudah termasuk saran untuk mengunduh dan membaca Sistem CSS CSS Natalie Downe . (PDF menyertakan banyak catatan yang tidak ada di slide, jadi baca PDF!). Perhatikan sarannya untuk organisasi.

EDIT (2014/02/05) empat tahun kemudian, saya akan mengatakan:

• Gunakan pra-prosesor CSS dan kelola file Anda sebagai bagian (Saya pribadi lebih suka Sass dengan Kompas, tapi Less juga cukup bagus dan ada yang lain)
• Baca konsep-konsep seperti OOCSS , SMACSS , dan BEM atau getbem .
• Lihatlah bagaimana kerangka kerja CSS populer seperti Bootstrap dan Zurb Foundation terstruktur. Dan jangan diskon kerangka kerja yang kurang populer - Inuit adalah yang menarik tetapi ada banyak lainnya.
• Gabungkan / perkecil file Anda dengan langkah build di server integrasi berkesinambungan dan / atau pelari tugas seperti Grunt atau Gulp.

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

Lihat 1. SASS 2. Kompas

Cara terbaik yang saya lihat untuk mengatasi CSSmengasapi adalah dengan menggunakan prinsip-prinsip Object Oriented CSS.

Bahkan ada kerangka kerja OOCSS di luar sana yang cukup bagus.

Beberapa ideologi bertentangan dengan banyak dari apa yang dikatakan di sini di jawaban atas tetapi begitu Anda tahu cara arsitek CSS dengan cara yang berorientasi objek Anda akan melihatnya benar-benar bekerja untuk menjaga kode tetap ramping & jahat.

Kuncinya di sini adalah untuk mengidentifikasi 'Objek' atau pola blok bangunan di situs Anda dan arsitek dengannya.

Facebook mempekerjakan pencipta OOCSS, Nicole Sullivan untuk mendapatkan banyak penghematan dalam kode front end mereka (HTML / CSS). Ya Anda benar-benar bisa mendapatkan tabungan tidak hanya di CSS Anda, tetapi dalam HTML Anda juga, yang oleh suara itu, sangat mungkin bagi Anda karena Anda menyebutkan mengkonversi tabletata letak berdasarkan ke banyak div's

Pendekatan hebat lainnya serupa dalam beberapa aspek dengan OOCSS, adalah merencanakan dan menulis CSS Anda agar dapat diskalakan dan modular dari awal. Jonathan Snook telah melakukan penulisan dan buku / ebook brilian tentang SMACSS - Arsitektur Scalable dan Modular untuk CSS

Biarkan saya menghubungkan Anda dengan beberapa tautan:
5 kesalahan CSS masif - (Video)
5 kesalahan CSS masif - (Slide)
CSS Bloat - (Slide)

Anda juga harus memahami kaskade, dan berat, dan bagaimana mereka bekerja.

Saya perhatikan Anda hanya menggunakan pengidentifikasi kelas (div.title). Tahukah Anda bahwa Anda dapat menggunakan ID juga, dan bahwa ID memiliki bobot lebih dari satu kelas?

Sebagai contoh,

#page1 div.title, #page1 ul, #page1 span {
  // rules
}

akan membuat semua elemen tersebut berbagi ukuran font, katakanlah, atau warna, atau apa pun aturan Anda. Anda bahkan dapat membuat semua DIV yang merupakan keturunan # page1 mendapatkan aturan tertentu.

Mengenai bobot, ingatlah bahwa sumbu CSS bergerak dari yang paling umum / paling ringan ke yang paling spesifik / terberat. Yaitu, dalam pemilih CSS, specifier elemen ditolak oleh specifier kelas ditolak oleh specifier ID. Bilangan dihitung, jadi pemilih dengan dua penentu elemen (ul li) akan memiliki bobot lebih dari satu dengan hanya penspesifikasi tunggal (li).

Pikirkan itu seperti angka. A 9 di kolom yang masih kurang dari satu di kolom puluhan. Pemilih dengan ID specifier, class specifier, dan dua penentu elemen, akan memiliki bobot lebih dari selector tanpa ID, 500 penentu kelas dan 1.000 penentu elemen. Ini adalah contoh yang absurd, tentu saja, tetapi Anda mendapatkan idenya. Intinya, menerapkan konsep ini membantu Anda membersihkan banyak CSS.

BTW, menambahkan penentu elemen ke kelas (div.title) tidak perlu kecuali Anda mengalami konflik dengan elemen lain yang memiliki class = "title". Jangan menambahkan bobot yang tidak perlu, karena Anda mungkin perlu menggunakan bobot itu nanti.

Bolehkah saya menyarankan kerangka CSS Dynamic Kurang

Ini mirip dengan SASS seperti yang disebutkan sebelumnya.

Ini membantu mempertahankan CSS per kelas induk.

Misalnya

 #parent{     
  width: 100%;

    #child1
    {    
     background: #E1E8F2;    
     padding: 5px;    
    }

    #child2
   {
     background: #F1F8E2;
     padding: 15px
   }
 }

Kegunaannya: Berlaku lebar: 100% untuk # child1 dan # child2.

Juga, # child1 CSS spesifik adalah milik #parent.

Ini akan membuatnya

#parent #child1
{
 width: 100%;
 background: #E1E8F2;
 padding: 5px;
}

#parent #child2
{
 width: 100%;
 background: #F1F8E2;
 padding: 15px;
}

Saya menemukan hal yang sulit adalah menerjemahkan desain yang diperlukan untuk sebuah situs menjadi serangkaian aturan. Jika desain situs jelas dan berdasarkan aturan, maka nama kelas Anda dan struktur CSS dapat mengalir dari itu. Tetapi jika orang, dari waktu ke waktu, secara acak menambahkan sedikit ke situs yang tidak masuk akal, tidak banyak yang dapat Anda lakukan tentang hal itu di CSS.

Saya cenderung mengatur file CSS saya kurang lebih seperti ini:

1. Reset CSS, berdasarkan pada Eric Meyer . (Karena kalau tidak, saya menemukan bahwa, untuk sebagian besar elemen, saya punya setidaknya satu atau dua aturan yang hanya mengatur ulang gaya browser default - misalnya, sebagian besar daftar saya tidak terlihat seperti gaya HTML default untuk daftar.)

2. Kisi sistem CSS, jika situs memanggilnya. (Saya mendasarkan milik saya pada 960.gs )

3. Gaya untuk komponen yang muncul di setiap halaman (header, footer, dll)

4. Gaya untuk komponen yang digunakan di berbagai tempat di seluruh situs

5. Gaya yang hanya relevan pada halaman individual

Seperti yang Anda lihat, sebagian besar tergantung pada desain situs. Jika desainnya jelas dan terorganisir, CSS Anda bisa. Jika tidak, Anda kacau.

Jawaban saya adalah tingkat tinggi untuk mengatasi masalah tingkat tinggi yang Anda ajukan dalam pertanyaan Anda. Mungkin ada trik organisasi tingkat rendah dan penyesuaian yang dapat Anda lakukan untuk membuatnya lebih cantik, tetapi tidak ada yang dapat memperbaiki kekurangan metodologis. Ada beberapa hal yang mempengaruhi ledakan CSS. Jelas kompleksitas keseluruhan situs, tetapi juga hal-hal seperti penamaan semantik, kinerja CSS, organisasi file CSS, dan testabilitas / penerimaan.

Anda tampaknya berada di jalur yang benar dengan penamaan semantik, tetapi itu bisa diambil selangkah lebih maju. Bagian-bagian HTML yang muncul berulang kali di situs tanpa modifikasi struktural (dikenal sebagai "modul") dapat dianggap sebagai root pemilih, dan dari sana Anda dapat mengatur tata letak internal relatif terhadap root tersebut. Ini adalah prinsip dasar CSS berorientasi objek , dan Anda dapat membaca / menonton lebih banyak tentang hal ini dalam pembicaraan ini oleh seorang insinyur Yahoo .

Penting untuk dicatat bahwa pendekatan bersih ini dapat bertolak belakang dengan masalah kinerja, yang disukai penyeleksi pendek berdasarkan id atau nama tag . Menemukan keseimbangan itu terserah Anda, tetapi kecuali Anda memiliki situs besar, ini hanya akan menjadi panduan di belakang kepala Anda mengingatkan Anda untuk menjaga penyeleksi Anda pendek. Lebih lanjut tentang kinerja di sini .

Terakhir, apakah Anda akan memiliki file CSS tunggal untuk seluruh situs Anda, atau beberapa file (file basis tunggal digunakan dengan file per-halaman atau -bagian)? File tunggal lebih baik untuk kinerja, tetapi mungkin lebih sulit untuk dipahami / dipelihara dengan beberapa anggota tim, dan mungkin lebih sulit untuk diuji. Untuk pengujian, saya sarankan Anda memiliki halaman uji-CSS tunggal yang mencakup setiap modul CSS yang didukung untuk menguji tabrakan dan cascading yang tidak diinginkan.

Atau Anda dapat memiliki beberapa pendekatan file , untuk lingkup aturan CSS ke halaman atau bagian. Ini mengharuskan browser untuk mengunduh banyak file yang merupakan masalah kinerja. Anda dapat menggunakan pemrograman sisi server untuk menentukan dan menggabungkan (dan memperkecil) file CSS ke dalam satu file secara dinamis. Tetapi karena file-file ini terpisah dan pengujian untuk mereka akan terpisah, Anda memperkenalkan kemungkinan tampilan dan nuansa yang tidak konsisten di seluruh halaman / bagian. Dengan demikian pengujian menjadi lebih sulit.

Terserah Anda untuk menganalisis kebutuhan spesifik pelanggan, menyeimbangkan masalah ini sesuai.

Seperti yang dikatakan sebelumnya: Masuk ke OOCSS. Sass / Kurang / Kompas tergoda untuk digunakan, tetapi sampai vanilla CSS digunakan dengan cara yang benar Sass / Kurang / Kompas hanya akan memperburuk keadaan.

Pertama-tama, baca tentang css efisien. coba Google Page Speed ​​dan baca apa yang Souders tulis tentang css efisien.

Lalu, masukkan OOCSS.

• Belajar bekerja dengan kaskade. (Bagaimanapun, kami menyebutnya Cascading Stylesheets).
• Pelajari cara mendapatkan rincian yang benar (bottom-up daripada top-down)
• Pelajari cara memisahkan struktur dan kulit (apa yang unik, dan apa variasi benda-benda ini?)
• Pelajari cara memisahkan wadah dan konten.
• Belajar mencintai kisi-kisi.

Ini akan merevolusi setiap bit tentang menulis css. Saya benar-benar diperbarui dan menyukainya.

UPDATE: SMACSS mirip dengan OOCSS, tetapi lebih mudah untuk beradaptasi secara umum.

Prinsip-prinsip inti untuk CSS yang masuk akal, diekstraksi dari CSS Refactoring: Dari append-only ke CSS modular

Tulis dalam SASS. Anda akan gila untuk melepaskan kelebihan variabel, mixin, dan sebagainya.

Jangan pernah menggunakan ID HTML untuk penataan; selalu gunakan kelas . ID HTML, bila digunakan dengan benar, hanya muncul sekali di seluruh halaman, yang merupakan kebalikan dari penggunaan kembali - salah satu barang paling mendasar dalam rekayasa yang masuk akal. Selain itu, sangat sulit untuk menimpa penyeleksi yang berisi ID dan seringkali satu-satunya cara untuk mengalahkan satu ID HTML adalah dengan membuat ID lain, yang menyebabkan ID menyebar di basis kode seperti halnya hama. Lebih baik meninggalkan ID HTML untuk Javascript yang tidak berubah atau kait uji integrasi.

Beri nama kelas CSS Anda dengan fungsi visual mereka dan bukan oleh fungsi khusus aplikasi mereka. Misalnya, ucapkan ".highlight-box" alih-alih ".bundle-product-discount-box". Pengodean dengan cara ini berarti bahwa Anda dapat menggunakan kembali style-sheet yang ada saat Anda menjalankan bisnis sampingan. Misalnya, kami mulai menjual catatan hukum tetapi baru-baru ini pindah ke tutor hukum. Kelas CSS lama kami memiliki nama seperti ".download_document_box", nama kelas yang masuk akal ketika berbicara tentang dokumen digital tetapi hanya akan membingungkan ketika diterapkan ke domain baru tutor pribadi. Nama yang lebih baik yang cocok dengan layanan yang ada - dan yang akan datang - adalah ".pretty_callout_box".

Hindari penamaan kelas CSS setelah informasi kisi tertentu. Ada (dan masih) anti-pola yang mengerikan di komunitas CSS di mana desainer dan pembuat kerangka CSS (cough Twitter Bootstrap ) percaya bahwa "span-2" atau "cols-8" adalah nama yang masuk akal untuk kelas CSS. Inti dari CSS adalah untuk memberi Anda kemungkinan untuk memodifikasi desain Anda tanpa mempengaruhi markup (banyak). Hardcoding grids ukuran ke dalam HTML menggagalkan tujuan ini, sehingga disarankan dalam setiap proyek yang diharapkan berlangsung lebih lama dari akhir pekan. Lebih lanjut tentang bagaimana kita menghindari kelas grid nanti.

Pisahkan CSS Anda menjadi beberapa file . Idealnya Anda akan membagi semuanya menjadi "komponen" / "widget" dan kemudian menyusun halaman dari atom-atom desain ini. Namun secara realistis, Anda akan melihat bahwa beberapa halaman situs web Anda memiliki keanehan (misalnya tata letak khusus, atau galeri foto aneh yang muncul hanya dalam satu artikel). Dalam kasus ini, Anda dapat membuat file yang terkait dengan halaman tertentu, hanya refactoring ke widget penuh ketika menjadi jelas bahwa elemen akan digunakan kembali di tempat lain. Ini adalah kompromi, yang dimotivasi oleh masalah anggaran praktis.

Minimalkan bersarang. Memperkenalkan kelas-kelas baru dan bukannya memilih penyeleksi. Fakta bahwa SASS menghilangkan rasa sakit penyeleksi yang berulang ketika bersarang tidak berarti bahwa Anda harus membuat sarang setinggi lima tingkat. Jangan pernah terlalu-memenuhi kualifikasi pemilih (mis. Jangan gunakan "ul.nav" di mana ".nav" bisa melakukan pekerjaan yang sama.) Dan jangan tentukan elemen HTML di samping nama kelas khusus (mis. "H2.highlight"). Alih-alih hanya menggunakan nama kelas saja dan jatuhkan pemilih basis (misalnya contoh sebelumnya harus ". Highlight"). Selektor yang terlalu memenuhi syarat tidak menambah nilai apa pun.

Buat gaya untuk elemen HTML (mis. "H1") hanya ketika menata komponen dasar yang harus konsisten di seluruh aplikasi. Hindari penyeleksi yang luas seperti "header ul" karena kemungkinan Anda harus menimpanya di beberapa tempat. Seperti yang terus kami katakan, sebagian besar waktu Anda ingin menggunakan kelas tertentu yang diberi nama baik kapan pun Anda menginginkan gaya tertentu.

Rangkullah dasar-dasar Block-Element-Modifier. Anda dapat membacanya misalnya di sini. Kami menggunakannya dengan sangat ringan, tapi tetap saja itu banyak membantu kami dalam mengatur gaya CSS.

Banyak kali saya akan melihat individu membagi file menjadi beberapa bagian, dengan komentar judul di antara bagian-bagian.

Sesuatu seperti

/* Headings and General Text */

.... stuff here for H1, etc..

/* Main page layout */

.... stuff here for layout page setup etc.

Ini bekerja dengan cukup baik dan membuatnya mudah untuk kembali lagi nanti dan menemukan apa yang sedang Anda kerjakan.

Anda harus melihat BEM .

Teori

BEM adalah upaya untuk memberikan serangkaian instruksi untuk mengatur dan memberi nama penyeleksi css dalam upaya untuk membuat hal-hal lebih dapat digunakan kembali dan modular dan untuk menghindari bentrokan antara penyeleksi semacam itu yang sering mengarah pada kode spaghetti dan sakit kepala spesifik.

Ketika digunakan dengan benar itu sebenarnya memiliki beberapa efek yang sangat positif.

• Gaya melakukan apa yang Anda harapkan saat ditambahkan ke elemen
• Gaya tidak bocor dan hanya mempengaruhi apa yang ditambahkan
• Gaya sepenuhnya dipisahkan dari struktur dokumen
• Gaya tidak perlu dipaksa untuk saling menumpang

BEM bekerja dengan baik dengan SASS untuk membawa gaya berorientasi objek ke CSS. Anda dapat membuat file modular, yang menangani tampilan elemen UI tunggal dan berisi variabel, seperti warna dan 'metode' seperti bagaimana elemen internal ditangani. Sementara seorang programmer OO hardcore mungkin menolak ide ini, pada kenyataannya, konsep-konsep yang diterapkan membawa banyak bagian yang lebih baik dari struktur OO, seperti modularitas, kopling longgar dan kohesi yang ketat dan penggunaan kembali konteks bebas. Anda bahkan dapat membangun dengan cara yang terlihat seperti objek yang dienkapsulasi dengan menggunakan Sass dan &operator .

Artikel yang lebih mendalam dari Smashing Magazine dapat ditemukan di sini ; dan satu dari Harry Roberts dari CCS Wizardry (siapa pun yang terlibat dalam css harus membaca) ada di sini .

Dalam praktek

Saya telah menggunakan ini, beberapa kali, bersama dengan menggunakan SMACSS dan OOCSS yang berarti saya memiliki sesuatu untuk membandingkannya juga. Saya juga pernah bekerja di beberapa kekacauan besar, sering kali dari kreasi saya sendiri, yang tidak berpengalaman.

Ketika saya menggunakan BEM di dunia nyata saya menambah teknik dengan beberapa prinsip tambahan. Saya memanfaatkan kelas utilitas - contoh yang baik adalah kelas pembungkus:

.page-section {
    width: 100%;
}
@media screen and (min-width: 1200px) {
    margin: 0 auto;
    width: 1200px;
}

Dan saya juga agak mengandalkan kaskade dan kekhususan. Di sini modul BEM akan menjadi .primary-boxdan .headerakan menjadi konteks untuk perjalanan khusus

.header {
  .primary-box {
    color: #000;
  }
}

(Saya berusaha sekuat tenaga untuk membuat semuanya menjadi generik dan konteks sebebas mungkin, artinya proyek yang bagus hampir semuanya ada dalam modul yang dapat digunakan kembali)

Satu poin terakhir yang akan saya sampaikan di sini adalah betapapun kecil dan tidak rumitnya proyek Anda, Anda harus melakukannya sejak awal, karena dua alasan:

• proyek meningkatkan kompleksitas, sehingga meletakkan fondasi yang baik adalah penting, termasuk css
• bahkan sebuah proyek yang tampak sederhana karena dibangun di WordPress memiliki sedikit JavaScript yang masih bisa sangat kompleks di CSS - OK, Anda tidak perlu melakukan pengkodean sisi server, sehingga bagian itu sederhana, tetapi ujung depan brosur-pakai memiliki dua puluh modul dan tiga variasi masing-masing: Anda punya beberapa css yang sangat kompleks di sana!

Komponen Web

Pada 2015 kami mulai melihat Komponen Web. Saya belum tahu banyak tentang ini, tetapi mereka terlihat untuk membawa semua fungsi ujung depan bersama dalam modul mandiri, secara efektif mencoba menerapkan jenis prinsip dari BEM ke ujung depan secara keseluruhan dan komponen yang tersebar tetapi sepenuhnya digabungkan tetapi sepenuhnya digabungkan elemen seperti fragmen DOM, Js (MVC) dan CSS yang semuanya membangun widget UI yang sama.

Dengan melakukan ini, mereka akan membahas beberapa masalah asli yang ada dengan css yang telah kami coba selesaikan dengan hal-hal seperti BEM, sementara di sepanjang jalan membuat beberapa arsitektur front end lainnya lebih waras.

Ada beberapa bacaan lebih lanjut di sini dan juga kerangka kerja Polymer di sini yang layak untuk dilihat

Akhirnya

Saya juga berpikir ini adalah panduan css praktik terbaik dan modern yang bagus - dirancang khusus untuk menghentikan proyek-proyek css besar agar tidak berantakan. Saya mencoba mengikuti sebagian besar dari ini.

Saya akan merekomendasikan Anda untuk melihat kerangka CSS "Gaya Kompas" .

ada beberapa materi hebat di sini dan beberapa telah mengambil banyak waktu dalam menjawab pertanyaan ini namun ketika datang ke baik terpisah atau gaya lembar saya akan pergi dengan file terpisah untuk pengembangan dan kemudian pindah ke memiliki semua css generik Anda digunakan melintasi digabung digabungkan ke dalam satu file saat digunakan.

dengan cara ini Anda memiliki yang terbaik dari kedua dunia, meningkatkan kinerja (lebih sedikit permintaan HTTP yang diminta dari browser) dan pemisahan kode masalah saat mengembangkan.