Memahami Metodologi Penulisan CSS

Dalam posting ini kita akan melihat apa itu metodologi penulisan CSS, beberapa metodologi terkenal, dan bagaimana mereka dapat berguna bagi kami dalam mengoptimalkan kode CSS kami. Mari kita mulai dengan pertanyaan paling sederhana untuk membuat bola bergulir. Apa itu metodologi?

Metodologi adalah sistem metode. Pikirkan suatu metode hanya sebagai cara melakukan sesuatu secara sistematis, dengan cara tertentu yang telah ditentukan dalam melakukan sesuatu untuk mencapai hasil yang kita inginkan.

Untuk mendapatkan hasil yang lebih baik, kami meningkatkan metode kami dengan merencanakannya dengan lebih baik, mengubah urutan, menyederhanakan langkah - apa pun yang berhasil lebih cepat dan lebih dari itu efisien.

Metodologi CSS

Sekarang mari kita bicara tentang metodologi CSS. Seperti halnya segala sesuatu dalam hidup, kita juga memiliki metode penulisan CSS: beberapa tulis ulang CSS pertama, beberapa gaya tata letak tempat terakhir, beberapa mulai dengan dua hingga tiga kelas untuk menata elemen, beberapa menulis semua kode CSS dalam satu file.

Metode pilihan kami telah ditetapkan dengan sendirinya dari waktu ke waktu atau dipengaruhi oleh orang lain atau diperlukan di tempat kerja kami atau karena semua hal di atas. Namun seiring waktu, para veteran CSS telah merumuskan metodologi untuk menulis CSS itu lebih dari itu fleksibel, terdefinisi, dapat digunakan kembali, dapat dipahami dan dikelola.

Kita akan melihat metodologi yang dirumuskan, yang akan mencakup:

OOCSS (Object Oriented CSS)
BEM (Blok, Elemen, Pengubah)
ACSS (Atomic CSS)
SMACSS (Arsitektur Scalable dan Modular untuk CSS)

Catatan: Tidak satu pun dari konsep yang disebutkan di bawah ini yang harus dikacaukan dengan kerangka kerja, pustaka atau alat yang mungkin memiliki nama dan konsep yang sama dengan metodologi ini. Posting ini hanya tentang metodologi untuk menulis CSS.

1. OOCSS

Dikembangkan oleh Nicole Sullivan pada 2008, konsep-konsep kunci OOCSS (Object Oriented CSS) termasuk CSS obyek identifikasi, pemisahan struktur dan gaya visual, dan menghindari gaya berbasis lokasi.

Dalam OOCSS, langkah pertama yang Nicole usulkan adalah kita lakukan mengidentifikasi objek dalam CSS.

“Pada dasarnya, "objek" CSS adalah pola visual berulang, yang dapat diabstraksi menjadi potongan independen HTML, CSS, dan mungkin JavaScript. Objek itu kemudian dapat digunakan kembali di seluruh situs. - Nicole Sullivan, Github (OOCSS)“

Ambil contoh struktur ini dari situs ini. Berikut adalah sesuatu yang merupakan pola visual yang berulang dan memiliki HTML dan / atau CSS sendiri yang independen:

Di sini kita memiliki dua jenis objek, preview judul yang lebih besar yang akan kita beri nama post-preview-primary dan bilah sisi dengan judul yang akan kami beri nama post-preview-secondary.

Kita harus struktur dan kulit terpisah (Yaitu gaya yang menciptakan penampilan objek). Kedua jenis objek memiliki struktur yang berbeda, satu di dalam kotak yang lebih besar meskipun terlihat serupa, dengan gambar di sebelah kiri dan judul di sebelah kanan..

Mari kita berikan gambar dari kedua objek kelas post-preview-image dan tambahkan kode yang menempatkan gambar di sebelah kiri. Ini menghentikan kita dari keharusan mengulang kode tempat meletakkan gambar di dalam objek di CSS. Jika ada benda serupa lainnya, kami menggunakan kembali post-preview-image untuk mereka.

Pemisahan kulit juga bisa dilakukan untuk gaya yang lebih sederhana perbatasan atau latar belakang. Jika Anda memiliki banyak objek dengan batas biru yang sama, membuat kelas terpisah untuk perbatasan biru dan menambahkannya ke objek akan mengurangi berapa kali batas biru harus dikodekan dalam CSS.

Nicole juga menyarankan untuk tidak tambahkan gaya berdasarkan lokasi, misalnya, alih-alih menargetkan semua tautan di dalam div tertentu untuk disoroti, berikan tautan itu a kelas stabilo dengan gaya CSS yang sesuai. Dengan cara ini ketika Anda perlu menyorot tautan di beberapa bagian lain halaman, Anda bisa menggunakan kembali kelas penyorot.

Pro dari OOCSS: Kode styling visual yang dapat digunakan kembali, kode lokasi fleksibel, pengurangan penyeleksi bersarang dalam.

Cons dari OOCSS: Tanpa cukup banyak pola visual yang berulang, pemisahan struktur dan kode gaya visual tampaknya tidak perlu.

2. BEM

Dikembangkan oleh pengembang di Yandex pada tahun 2009, konsep-konsep kunci untuk BEM (Blok, Elemen, Pengubah) mencakup identifikasi blok, elemen & pengubah dan menamai mereka sesuai.

SEBUAH “blok” pada dasarnya sama dengan “obyek”(dari contoh sebelumnya), sebuah “elemen” mengacu pada komponen blok (gambar, judul, teks pratinjau di atas pratinjau-posting- benda). SEBUAH “pengubah” dapat digunakan ketika keadaan blok atau elemen berubah, misalnya ketika Anda menambahkan kelas aktif ke item menu untuk menyorotnya, kelas aktif bertindak sebagai pengubah Anda.

Setelah Anda mengidentifikasi komponen, beri nama yang sesuai. Sebagai contoh:

blok menu akan memiliki kelas menu
barang-barangnya akan memiliki kelas menu__item (blok dan elemen dipisahkan oleh garis bawah ganda)
pengubah untuk status menu yang dinonaktifkan dapat memiliki kelas menu_disabled (pengubah dibatasi oleh satu garis bawah tunggal)
pengubah untuk keadaan dinonaktifkan dari item menu bisa menu__item_ditabled.

Untuk pengubah, kita juga bisa menggunakan nilai kunci_ format untuk penamaan. Misalnya, untuk membedakan item menu apa pun yang tertaut ke artikel usang, kami dapat memberi mereka kelas menu__item_status_obsolete, dan untuk menata setiap item menu yang mengarah ke dokumen yang tertunda, nama kelasnya bisa saja menu__item_status_pending.

Penamaan dapat dimodifikasi untuk apa yang cocok untuk Anda. Idenya adalah untuk bisa mengidentifikasi, blok, elemen dan pengubah dari nama kelas. Lihatlah beberapa sistem penamaan yang terdaftar di situs BEM.

Situs BEM juga mencantumkan bagaimana pemisahan blok, elemen, dan pengubah juga dapat dimasukkan ke dalam sistem file CSS. Blok seperti “tombol” dan “input” dapat memiliki folder sendiri yang terdiri dari file (.css, .js) yang dikaitkan dengan blok-blok itu, yang membuat segalanya lebih mudah ketika kita ingin mengimpor blok-blok itu di proyek lain.

Pro BEM:Mudah digunakan nama kelas dan pengurangan penyeleksi CSS yang mendalam.

Kekurangan BEM:Agar nama-nama tersebut terlihat waras, BEM menyarankan agar kami terus memblokir elemen yang bersarang dangkal.

3. ACSS

Dipopulerkan oleh Yahoo, di suatu tempat di dekat akhir yang pertama dekade ke-21^st abad, konsep kunci ACSS terdiri dari menciptakan kelas untuk tingkat gaya paling atomik yaitu pasangan nilai-properti, kemudian menggunakannya dalam HTML sesuai kebutuhan.

Sulit untuk menentukan kapan ACSS (Atomic CSS) pertama kali dikembangkan sejak konsep ini telah digunakan untuk sementara waktu sekarang. Pengembang telah menggunakan kelas seperti .clearfix overflow: hidden untuk waktu yang lama. Gagasan dalam ACSS adalah untuk memiliki kelas untuk hampir semua pasangan nilai properti terkait yang tidak dapat digunakan kembali kita akan membutuhkan di situs kami, dan untuk menambahkan kelas-kelas itu ketika diperlukan ke elemen HTML.

Di bawah ini adalah contoh kelas berdasarkan ACSS dan bagaimana mereka digunakan dalam HTML.

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

Seperti yang Anda lihat, jumlah kelas akan bertambah tinggi dengan metode ini dan HTML akan penuh sesak oleh semua kelas tersebut. Metode ini tidak 100% efektif tetapi dapat dibuat bermanfaat jika diinginkan. Lagipula Yahoo menggunakan ini.

Pro ACSS:Styling HTML tanpa meninggalkan HTML.

Kekurangan ACSS:Terlalu banyak kelas, tidak terlalu rapi dan Anda mungkin membencinya.

4. SMACSS

Dikembangkan pada tahun 2011 oleh Jonathan Snook SMACSS (Arsitektur Scalable dan Modular untuk CSS) bekerja dengan mengidentifikasi 5 jenis aturan gaya yang berbeda. Nama kelas dan sistem pengarsipan dibuat berdasarkan ini.

“SMACSS adalah cara untuk memeriksa proses desain Anda dan sebagai cara untuk menyesuaikan kerangka kerja yang kaku ke dalam proses pemikiran yang fleksibel. - Jonathan Snook”

SMACSS mengidentifikasi 5 jenis aturan gaya yaitu dasar, tata letak, modul, status, dan tema.

Gaya dasar adalah gaya default yang diarahkan pada tag HTML dasar seperti
, .
Gaya tata letak adalah gaya yang digunakan untuk menentukan tata letak halaman, seperti pengkodean tempat menu header, footer, dan samping.
Gaya modul khusus untuk modul seperti galeri atau tampilan slide.
Gaya negara adalah untuk menyorot elemen dengan status yang dapat diubah seperti disembunyikan atau dinonaktifkan.
Tema digunakan untuk mengubah skema visual halaman.

Aturan gaya yang berbeda dapat diidentifikasi menggunakan awalan dalam nama kelas misalnya, l-header (untuk tata letak) atau t-header (untuk tema). Kami juga dapat mengatur berbagai jenis aturan ini dengan menempatkannya di file dan folder terpisah.

Pro dari SMACSS:Kode yang lebih terorganisir.

Kontra SMACSS: Tidak ada yang bisa saya pikirkan.

Ada buku online gratis yang bisa Anda baca tentang SMACSS, atau Anda dapat membeli versi ebook-nya untuk mempelajarinya lebih lanjut.

Kesimpulan

Metodologi CSS di atas akan memberi Anda sebuah sistem kelola dan optimalkan kode CSS Anda. Mereka dapat digabungkan bersama, seperti OOCSS-SMACSS, atau OOCSS-BEM, atau BEM-SAMCSS yang sesuai dengan kebutuhan Anda.

Ada juga kerangka kerja dan pustaka jika Anda menginginkan sistem otomatis untuk mengeksekusi metodologi CSS seperti:

Kerangka kerja OOCSS
Alat BEM
Kerangka kerja CSS organik (mengikuti konsep atom).