Memahami Kaedah Menulis CSS

Dalam catatan ini kita akan melihat apa kaedah penulisan CSS adalah, beberapa metodologi yang terkenal, dan bagaimana ia berguna kepada kami dalam mengoptimumkan kod CSS kami. Mari kita mulakan dengan soalan yang paling mudah untuk mendapatkan bola rolling. Apakah metodologi?

Satu metodologi adalah sistem kaedah. Fikirkan sejenis cara semata-mata sebagai cara untuk melakukan sesuatu dengan cara yang sistematik, dengan cara tertentu untuk melakukan sesuatu untuk mencapai hasil yang kami mahukan.

Untuk mendapatkan hasil yang lebih baik, kami memperbaiki kaedah kami dengan merancang mereka dengan lebih baik, mengubah pesanan, memudahkan langkah - apa sahaja yang berfungsi lebih pantas dan lebih cekap.

Metodologi CSS

Sekarang mari kita bincangkan tentang metodologi CSS. Seperti halnya dengan segala-galanya dalam kehidupan, kami mempunyai kaedah menulis CSS juga: beberapa menulis semula CSS terlebih dahulu, beberapa gaya susun atur tempat terakhir, beberapa bermula dengan dua hingga tiga kelas untuk gaya elemen, ada yang menulis semua kod CSS dalam satu fail.

Kaedah pilihan kami sama ada telah ditubuhkan pada masa kami sendiri atau dipengaruhi oleh orang lain atau diperlukan di tempat kerja kami atau kerana semua perkara di atas. Tetapi dari masa ke masa, veteran CSS telah dirumuskan metodologi untuk menulis CSS yang lebih banyak fleksibel, didefinisikan, boleh digunakan semula, difahami dan boleh diurus.

Kami akan melihat metodologi yang dirumuskan, yang termasuk:

OOCSS (CSS Berorientasikan Objek)
BEM (Blok, Elemen, Pengubah)
ACSS (Atom Atom)
SMACSS (Senibina Boleh Berubah dan Modular untuk CSS)

Catatan: Tiada konsep yang disebutkan di bawah harus dikelirukan dengan mana-mana kerangka, perpustakaan atau alat yang mungkin mempunyai nama dan konsep yang sama seperti metodologi ini. Jawatan ini hanya mengenai metodologi untuk menulis CSS.

1. OOCSS

Dibangunkan oleh Nicole Sullivan pada tahun 2008, konsep utama OOCSS (Object Oriented CSS) termasuk CSS objek pengenalpastian, pemisahan struktur dan gaya visual, dan mengelakkan gaya berdasarkan lokasi.

Di OOCSS, langkah pertama yang dicadangkan Nicole yang kami lakukan ialah mengenal pasti objek dalam CSS.

“Pada asasnya, objek "CSS" adalah corak visual yang berulang, yang boleh dialihkan ke dalam coretan HTML, CSS, dan JavaScript mungkin bebas. Objek itu kemudiannya boleh digunakan semula di seluruh tapak. - Nicole Sullivan, Github (OOCSS)“

Ambil contoh struktur ini dari laman web ini. Inilah sesuatu yang merupakan corak visual yang berulang dan mempunyai HTML sendiri dan / atau CSS tersendiri:

Kami ada di sini dua jenis objek, lebih banyak judul tajuk yang akan kami namakan post-preview-primary dan bar sisi dengan tajuk yang akan kami namakan post-preview-secondary.

Kita perlu struktur dan kulit berasingan (iaitu gaya yang mencipta penampilan objek). Kedua-dua jenis objek mempunyai struktur yang berbeza, satu di dalam kotak yang lebih besar walaupun kelihatan sama, dengan imej ke kiri dan tajuk ke kanan.

Mari beri gambar kedua-dua objek kelas post-preview-image dan tambahkan kod yang meletakkan imej di sebelah kiri. Ini akan menghalang kita daripada mengulangi kod mana untuk meletakkan imej di dalam objek dalam CSS. Sekiranya terdapat objek lain yang serupa, kami menggunakan semula post-preview-image untuk mereka.

Pemisahan kulit juga boleh dilakukan untuk gaya mudah seperti sempadan atau latar belakang. Jika anda mempunyai berbilang objek dengan sempadan biru yang sama, mewujudkan kelas yang berasingan untuk sempadan biru dan menambahnya kepada objek akan mengurangkan bilangan kali sempadan biru perlu dikodkan dalam CSS.

Nicole juga mencadangkan tidak tambah gaya berdasarkan lokasi, sebagai contoh, bukannya menyasarkan semua pautan di dalam div tertentu untuk menyerlahkan, memberi pautan tersebut a kelas penyegar dengan gaya CSS yang sesuai. Dengan cara ini apabila anda perlu menyerlahkan pautan di bahagian lain halaman, anda boleh menggunakan semula kelas pencari.

Kelebihan OOCSS: Kod gaya visual boleh diguna semula, kod fleksibel lokasi, pengurangan seleksi bersarang dalam.

Keburukan OOCSS: Tanpa corak visual yang mengulangi yang saksama, kod pemisahan struktur dan gaya visual kelihatan tidak perlu.

2. BEM

Dibangunkan oleh pemaju di Yandex pada tahun 2009, konsep utama untuk BEM (Block, Element, Modifier) merangkumi mengenal pasti blok, elemen & pengubah dan menamakannya dengan sewajarnya.

A “blok” pada asasnya adalah sama dengan “objek”(dari contoh sebelumnya), a “elemen” merujuk kepada komponen blok (imej, tajuk, teks pratonton di atas) jawatan pratonton- objek). A “pengubah” boleh digunakan apabila keadaan blok atau elemen berubah, contohnya apabila anda menambah kelas aktif pada item menu untuk menyerlahkannya, kelas aktif bertindak sebagai pengubah anda.

Sebaik sahaja anda mengenal pasti komponen, namakannya dengan sewajarnya. Sebagai contoh:

blok menu akan mempunyai kelas menu
itemnya akan mempunyai kelas menu__item (blok dan elemen dipisahkan oleh garis lintang ganda)
pengubah untuk keadaan kurang upaya menu boleh mempunyai kelas menu_disabled (pengubah suai yang dibatasi oleh garis bawah tunggal)
pengubah untuk keadaan kurang upaya item menu boleh menu__item_disabled.

Untuk pengubah, kita juga boleh menggunakannya key_value format untuk penamaan. Contohnya, untuk membezakan sebarang item menu yang menghubungkan kepada artikel usang, kami dapat memberi mereka kelas menu__item_status_obsolete, dan untuk menggayakan sebarang item menu yang menunjuk kepada dokumen yang belum selesai, nama kelas boleh menu__item_status_pending.

Penamaan ini boleh diubahsuai kepada apa yang berfungsi untuk anda. Idea ini adalah untuk dapat mengenal pasti, blok, unsur dan pengubah dari nama kelas. Semak beberapa sistem penamaan yang disenaraikan di tapak BEM.

Laman BEM juga menyenaraikan bagaimana pemisahan blok, unsur dan pengubahsuaian juga boleh dibawa masuk ke sistem fail CSS. Blok seperti “butang” dan “input” boleh mempunyai folder mereka sendiri yang terdiri daripada fail (.css, .js) yang dikaitkan dengan blok tersebut, yang membuat perkara lebih mudah apabila kita mahu mengimport blok tersebut dalam projek lain.

Kelebihan BEM:Mudah untuk menggunakan nama kelas dan pengurangan pemilih CSS yang mendalam.

Kekurangan BEM:Untuk memastikan nama-nama yang kelihatan waras, BEM menasihatkan bahawa kami menyimpan blok ke elemen bersarang cetek.

3. ACSS

Dibuat terkenal oleh Yahoo, di suatu tempat berhampiran hujung yang pertama dekad 21^st abad, konsep utama ACSS terdiri daripada mewujudkan kelas untuk tahap gaya yang paling atom iaitu nilai pasangan harta, kemudian gunakannya dalam HTML seperti yang diperlukan.

Sulit untuk menentukan apabila ACSS (Atomic Atom) mula dibangunkan sejak konsep itu telah digunakan buat sementara waktu sekarang. Pemaju telah menggunakan kelas seperti .jelaskan overflow: hidden untuk masa yang lama. Idea di ACSS adalah untuk mempunyai kelas untuk setiap pasangan nilai bernilai harta yang tidak boleh digunakan lagi kita perlu di laman web kami, dan untuk menambah kelas-kelas tersebut apabila diperlukan ke elemen HTML.

Berikut adalah contoh kelas berdasarkan ACSS dan bagaimana ia digunakan dalam HTML.

 .mr-8 margin-right: 8px; .fl-r float: right;

Seperti yang anda dapat lihat, bilangan kelas akan mendapat tinggi dengan kaedah ini dan HTML akan penuh sesak oleh semua kelas tersebut. Kaedah ini tidak 100% berkesan tetapi boleh digunakan jika dikehendaki. Yahoo menggunakan ini selepas semua.

Kelebihan ACSS:Styling HTML tanpa meninggalkan HTML.

Kekurangan ACSS:Terlalu banyak kelas, tidak terlalu kemas dan anda mungkin benci.

4. SMACSS

Dibangunkan pada tahun 2011 oleh Jonathan Snook SMACSS (Senibina Boleh Berubah dan Modular untuk CSS) berfungsi dengan mengenal pasti 5 jenis peraturan gaya yang berbeza. Nama kelas dan sistem pemfailan dibuat berdasarkan ini.

“SMACSS adalah satu cara untuk mengkaji proses reka bentuk anda dan sebagai satu cara untuk menyesuaikan rangka kerja yang kaku menjadi proses pemikiran yang fleksibel. - Jonathan Snook”

SMACSS mengenalpasti 5 jenis peraturan gaya iaitu asas, susun atur, modul, negeri, dan tema.

Gaya asas adalah gaya lalai yang diarahkan pada tag HTML asas seperti
, .
Gaya susun atur adalah gaya yang digunakan untuk menentukan susun atur halaman, seperti pengekodan di mana tajuk, kaki dan menu sampingan akan pergi.
Gaya modul adalah khusus kepada modul seperti galeri atau tayangan slaid.
Gaya negara adalah untuk menonjolkan unsur-unsur dengan keadaan berubah seperti tersembunyi atau kurang upaya.
Tema digunakan untuk mengubah skema visual halaman.

Peraturan gaya yang berbeza dapat dikenal pasti menggunakan awalan dalam nama kelas misalnya, l header (untuk susun atur) atau t-header (untuk tema). Kami juga boleh mengatur jenis peraturan yang berlainan dengan meletakkannya dalam fail dan folder berasingan.

Kelebihan SMACSS:Kod teratur yang lebih baik.

Kekurangan SMACSS: Tiada yang saya fikirkan.

Terdapat buku dalam talian percuma yang boleh anda baca tentang SMACSS, atau anda boleh membeli versi ebooknya untuk mengkaji lebih lanjut.

Kesimpulannya

Metodologi CSS di atas akan memberi anda satu sistem mengurus dan mengoptimumkan kod CSS anda. Mereka boleh digabungkan bersama, seperti OOCSS-SMACSS, atau OOCSS-BEM, atau BEM-SAMCSS untuk memenuhi keperluan anda..

Terdapat juga kerangka kerja dan perpustakaan jika anda ingin sistem automatik untuk melaksanakan metodologi CSS seperti:

Rangka kerja OOCSS
Alat BEM
Rangka kerja CSS organik (mengikut konsep atom).