Mengenal macam - macam Metodologi penulisan CSS - Part 1

Di postingan blog kali ini, saya ingin membagikan rangkuman materi berisi tentang macam - macam metodologi penulisan CSS yang saya telah pelajari

Namun, sebelum lebih jauh lagi, kita ada baiknya mengenal apa arti kata metodologi itu sendiri

Apa itu Metodologi

Menurut wikipedia, Metodologi merupakan ilmu-ilmu/cara yang digunakan untuk memperoleh kebenaran menggunakan penelusuran dengan tata cara tertentu dalam menemukan kebenaran. Metodologi tersusun dari cara-cara yang terstruktur untuk memperoleh ilmu.

Wikipedia - Metodologi

Bagaimana? sudah terbayang jika kata metodologi ini kita kaitkan dengan CSS?

Untuk lebih yakin, mari kita pertegas.

CSS sangat sulit untuk dikelola dalam sistem yang besar, kompleks, dan berulang dengan cepat.
Salah satu alasannya adalah CSS tidak memiliki mekanisme pelingkupan bawaan. Segala sesuatu di CSS bersifat global. Artinya, setiap perubahan yang kita buat berpotensi menurun dan mengubah tampilan elemen yang tidak terkait.

Prepocessor CSS, seperti Sass, Less, dan Stylus membuat segalanya lebih mudah dengan menawarkan fitur yang membuat penulisan CSS lebih mudah. Tetapi ini tidak benar-benar memperbaiki masalah skalabilitasnya.

Itulah mengapa metodologi adalah solusi bagi skalabilitas dan pelingkupaan dalam CSS.

Jadi...,

Metodologi CSS adalah metode – metode terdokumentasi untuk membuat CSS dengan cara yang memungkinkan kita untuk mengembangkan, memelihara, dan menskalakan front-end sebagai satu set modul kecil dan terisolasi secara sistematis.

PENTING! Tidak ada metodologi CSS "terbaik". Masing – masing metodologi memiliki keunggulan dan kekurangannya sendiri. Pendekatan yang berbeda bekerja lebih baik untuk individu / tim / proyek yang berbeda.

1. OOCSS (Object oriented CSS)

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

OOCSS berfokus pada fleksibiltas dan modularisasi, single responsibility principle, separation of concerns, dan konsep – konsep lain dari paradigma OOP.

Dalam OOCSS, langkah pertama yang Nicole usulkan adalah mengidentifikasi objek dalam CSS.
OOCSS menganjurkan pemisahan struktur dari kulit. Metodologi ini membuat perbedaan yang jelas antara konten dan penampungnya.

Contoh:

• .button - menyediakan struktur dasar tombol
• .grey-button - menerapkan warna dan properti visual lainnya

Metodologi ini memisahkan kode – kode yang kemungkinan akan ditulis berulang ke dalam class terpisah, jadi ketika ada objek baru yang memiliki strukur kode yang sama, kita hanya tinggal menambahkan class-nya saja.

Contoh:

• <button class="button grey-button">

Pro:

• Kode styling visual yang dapat digunakan kembali (reusable)
• Mengurangi duplikasi properti yang sama di berbagai aturan gaya
• Kode lokasi menjadi lebih fleksibel
• Pengurangan penyeleksi bersarang yang dalam

Kontra:

• Tanpa cukup banyak pola visual yang berulang
• Pemisahan struktur dan kode gaya visual yang keliatannya tidak perlu
• Mendapatkan banyak kelas yang bisa jadi sulit dipelihara dan dikelola

Dokumentasi resmi: http://oocss.org/

2. BEM (Block, element, modifier)

Dikembangkan oleh pengembang di Yandex pada tahun 2009, konsep-konsep kunci untuk BEM (Block, Elemen, Modifier) mencakup identifikasi block, elemen, dan modifier.
Ide di balik BEM adalah untuk membedakan kelas CSS yang memenuhi peran yang berbeda. Ini dilakukan dengan memberi nama kelas CSS dengan cara yang menunjukkan peran mereka.

Contoh:

• .block
• .block__element
• .block__element--modifier

Block adalah komponen UI modular yang independen, sedangkan elemen mengacu pada komponen dari block (gambar, judul, teks), dan modifier dapat digunakan ketika keadaan block atau elemen berubah, misalnya ketika kita ingin menambahkan kelas aktif ke item menu untuk menyorotnya, kelas aktif bertindak sebagai pengubah.

Block
Blok merupakan container atau context di mana element itu menemukan dirinya sendiri, seperti header, sidebar, footer.

Contoh: .search-form

Elemen
Elemen adalah bagian dari block. Block adalah keseluruhannya dan bagian-bagiannya adalah elemen. Elemen ditandai dengan menambahkan dua pemisah garis bawah __ dan nama elemen ke nama induknya.

Contoh: .search-form__heading, .search-form__text-field, dan .search-form__submit-button

Modifier
Modifier diterapkan ke block atau elemen untuk menandai perubahan dalam presentasinya, atau perubahan statusnya. Mereka ditandai dengan menambahkan pemisah dan nama pengubah ke block atau elemen yang ditujukan.

Dalam dokumentasi situs BEM resmi, pemisah pengubah harus berupa garis bawah tunggal _. Namun, konvensi Pedoman CSS “BEM-like” oleh Harry Roberts menggunakan dua garis --, ini lebih banyak digunakan dan dikenal daripada konvensi BEM resmi.

Contoh: .search-form--advanced

Pro:

• Mudah digunakan karena setiap tag akan memiliki nama kelas dan pengurangan penyeleksi CSS yang mendalam.
• Dapat menghindari penggunaan !important yang mana merupakan anti pattern pada css
• Mudah dalam pengembangan
• Menghindari membuat selector langsung ke elemen

Kontra:

• Agar nama-nama tersebut terlihat waras, BEM menyarankan untuk memblokir elemen yang bersarang dangkal
• Untuk html bersarang yang lebih dari 2-3 level akan membuat kita mungkin sulit untuk menentukan nama
• Konvensi penamaan tidak intuitif bagi pengembang yang tidak berpengalaman

Perbandingan BEM dengan CSS standar

BEM:
• Memberi kita lebih banyak kode modular. Kita dapat mengambil bagian apapun secara terpisah.
• Memungkinkan siapa pun menulis CSS. Kita tidak perlu mewaspadai gaya penulisan dan penggantian kustom. Dalam tim besar, ini merupakan hal yang bagus.
• Menghapus masalah kekhususan apapun.
• Secara signifikan lebih bertele-tele.

CSS standar (yang bergantung pada penggunaan penyeleksi keturunan):
• Berarti gaya kita tergantung pada konteks.
• Membutuhkan kesadaran kaskade. Kode di satu tempat dapat mempengaruhi kode di tempat lain. Dalam tim kecil ini bukan masalah, namun pada tim besar akan menjadi masalah yang serius.
• Dapat menderita masalah kekhususan yang mungkin sulit bagi pengembang pemula untuk melakukan debug.
• Secara signifikan lebih ketat.

Pertimbangkan menggunakan BEM jika kita tidak memiliki arsitektur berorientasi komponen, jika kita memiliki kode lawas yang didukung, atau jika kita merasa sangat sulit melakukan segala sesuatu secara manual tanpa alat (sass, stylus, dll)

Dokumentasi resmi : https://en.bem.info/methodology/

Penutup

Nah, agar blog ini tidak terlalu panjang, kita bagi menjadi dua bagian, di post berikutnya kita akan melanjutkan lagi pembahasan mengenai metodologi ini. Stay tune, guys!