Mengenal macam - macam Metodologi penulisan CSS - Part 2

Sesuai janji, kita akan melanjutkan pembahasan tentang metodologi CSS yang belum kita selesaikan di blog sebelumnya. Selain 2 metodologi CSS yaitu OOCSS dan BEM yang telah kita bahas kemarin, berikut ini adalah metodologi - metodologi lainnya.

SUIT

Metodologi SUIT adalah pendekatan berdasarkan BEM, tetapi dengan beberapa penyesuaian dan penambahan yang dibuat oleh Nicholas Gallagher. SUIT melakukan semua yang dilakukan BEM, tetapi bagi banyak pengguna, ini dianggap sebagai peningkatan.

SUIT terdiri dari Utilities dan Components. Di dalam komponen-komponennya mungkin terdapat Modifiers, Descendants, dan States.

SUIT menggunakan kombinasi dari gaya penulisan PascalCase, camelCase dan dashes. Konvensi-konvensinya menegakkan batas pada sejumlah garis putus-putus dan garis bawah yang membingungkan yang dapat muncul dalam BEM.

Sebagai contoh, kelas BEM .search-form__text-field akan menjadi .SearchForm-textField dalam SUIT.

Kelas SUIT CSS hadir dalam lima format:

• u-utilityName
• ComponentName
• ComponentName--modifierName
• ComponentName-elementName
• ComponentName.is-stateOfName

Konvensi penamaan kelas ini menyoroti pembagian antara:

• Utility
• Component
• Descendent
• Modifier

Utility
Utilities menangani struktur dan gaya posisional, dan ditulis sedemikian rupa sehingga mereka dapat diterapkan di mana saja dalam suatu komponen. Mereka diawali dengan u- dan ditulis dalam camelCase.
Contoh: .u-clearFix.

Component
Sebuah komponen dalam SUIT seperti block pada BEM. Komponen selalu ditulis dalam PascalCase. Selain komponen, semua ditulis menggunakan pascalCase, ini membuat mereka mudah untuk diidentifikasi.
Contoh: .SearchForm

Component Namespace
Komponen opsional dapat diawali dengan namespace dan nmsp
Contoh: .mine-SearchForm

Descendent
Descendent dalam SUIT menggantikan elemen dalam BEM.
Contoh: .SearchForm-heading, .SearchForm-textField , .SearchForm-submitButton

Modifier
SUIT menggunakan modifier seperti halnya BEM, namun peran mereka lebih dikontrol ketat. Modifier SUIT umumnya hanya diterapkan langsung ke komponen, bukan ke keturunan. Ini juga tidak boleh digunakan untuk mewakili perubahan state, karena SUIT memiliki konvensi penamaan khusus untuk state.
Modifier ditulis dalam camelcase dan didahului oleh dua tanda hubung --.
Contoh: .SearchForm--advanced

State
State dapat digunakan untuk mencerminkan perubahan komponen. State memungkinkan mereka untuk dibedakan secara jelas dari modifier, yang mencerminkan modifikasi penampilan dasar komponen tanpa memandang state. Jika perlu, state juga dapat diterapkan ke turunan.

State diawali dengan is- dan ditulis dalam camelCase. Mereka juga selalu ditulis sebagai kelas yang berdampingan.
Contoh: .SearchForm.is-invalid

Dokumentasi resmi SUIT: https://suitcss.github.io/

ACSS ( Atomic CSS )

ACSS adalah metodologi yang dipopulerkan oleh Yahoo. Konsep kunci ACSS adalah menciptakan kelas untuk tingkat gaya paling atomik, yaitu pasangan nilai-properti, kemudian menggunakannya dalam HTML sesuai kebutuhan.
Gagasan dalam ACSS adalah untuk memiliki kelas kepada hampir semua pasangan nilai-properti terkait yang tidak dapat digunakan kembali.

Contoh:

.mr-8 {
   margin-right: 8px;
}

.fl-r {
   float: right;
}

Seperti yang kita lihat, jumlah kelas akan bertambah signifikan dengan metode ini, imbasnya adalah HTML akan penuh oleh semua kelas tersebut. Metode ini tidak 100% efektif, tetapi dapat dibuat bermanfaat jika diinginkan.

Pro:

• Styling HTML tanpa meninggalkan HTML.

Kontra:

• Terlalu banyak kelas
• Css dan html menjadi tidak rapi.

Dokumentasi resmi ACSS: https://acss.io/

SMACSS ( Scalable and modular architecture CSS )

“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”

Dikembangkan pada tahun 2011 oleh Jonathan Snook.
Ide kunci dalam metodologi CSS ini adalah bagaimana kita mengkategorikan aturan gaya CSS kita.

Berikut kategori – kategori beserta contohnya:

Base

Gaya bawaan yang dikhususkan pada tag HTML dasar

Contoh:

h1 {
   font-size: 32px;
}

div {
   margin: 0 auto;
}

a {
   color: blue;
}

Layout

Gaya yang digunakan untuk menentukan tata letak halaman, seperti style pada header, footer, dan sidebar.

Nama kelas diawali dengan layout-atau l-.

Contoh:

.layout-sidebar {
   width: 320px;
}

.l-comments {
   width: 640px;
}

Modules

Komponen modular dan dapat digunakan kembali.

Contoh:

.call-to-action-button {
   text-transform: uppercase;
   color: #FFF200;
}`

.search-form {
   display: inline-block;
   background-color: E1E1E1;
}

State

Digunakan untuk menyoroti elemen dengan status yang dapat diubah seperti disembunyikan atau dinonaktifkan.

Contoh:

.is-hidden {
   display: none;
}

.is-highlighted {
   color: #FF0000;
   background-color: #F4F0BB;
   border: 1px solid #CBBD15;
}

Themes

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). Kita juga dapat mengatur berbagai jenis aturan ini dengan menempatkannya di file dan folder terpisah.

Pro:

• Kode yang lebih terorganisir. Kontra:
• Dibanding BEM atau SUIT, kemungkinan duplikasi class dan bobot selector lebih tinggi

Dokumentasi resmi SMACSS: http://smacss.com/

Penutup

Metodologi – metodologi diatas dapat digabungkan bersama, seperti OOCSS-SMACSS, atau OOCSS-BEM, atau BEM-SMACSS. Semua bisa disesuaikan dengan kebutuhan kita masing- masing.

Semua metodologi CSS menangani masalah skalabilitas dan pemeliharaan di CSS dengan menyediakan sistem berbasis kelas untuk memecah desain web besar menjadi banyak unit kecil, modular, dan terpisah. Setiap modul UI dapat digunakan berulang kali di seluruh desain, dan bahkan dipindahkan dari satu proyek ke proyek lain jika dua proyek berbagi metodologi CSS yang sama.

Dalam prosesnya, metodologi CSS melakukan lebih dari sekadar memperbaiki masalah skalabilitas CSS, keunggulan lainnya adalah kita menjadi lebih mudah untuk mengembangkan dan mengulang kembali desain yang ada. Mereka membuat kode front-end lebih mudah dibaca dan dipahami, menyediakan dokumentasi siap pakai, dan memudahkan banyak orang untuk berkolaborasi dalam sebuah desain.

Dan karena metodologi CSS mendorong penggunaan kembali kode yang ada, mereka menerapkan konsistensi dalam desain visual dan mengurangi ukuran halaman serta meningkatkan kecepatan rendering halaman.

Semoga semua rangkuman materi metodologi CSS pada blog kali ini dapat menambah wawasan kita mengenai betapa pentingnya struktur class CSS yang bahkan seringkali kita kesampingkan untuk diperhatikan pada saat melakukan styling pada website.

Sampai jumpa di blog selanjutnya, guys! 🖐️