Metodologi arsitektur CSS apa yang membantu basis kode besar?

Question

Accepted Answer

Saat proyek berkembang, CSS biasa menderita dari **lingkup global** — setiap pemilih bersaing secara global, perang spesifisitas meletus, dan tidak ada yang berani menghapus suatu aturan. Metodologi menerapkan struktur dan konvensi penamaan untuk menjaga CSS tetap dapat dipelihara. ## BEM (Block Element Modifier) Sebuah konvensi penamaan yang membuat hubungan eksplisit dan menjaga spesifisitas tetap datar (semua kelas tunggal): ```css .card { } /* Block — standalone component */ .card__title { } /* Element — a part of the block (double underscore) */ .card__button { } .card--featured { } /* Modifier — a variant (double dash) */ ``` ```html

...

``` Nilai BEM: nama kelas mendokumentasikan diri sendiri, dibatasi oleh konvensi, dan secara konsisten memiliki spesifisitas rendah (tanpa nesting/id wars). ## Utility-first (Tailwind) Susun gaya dari kelas-kelas kecil dengan tujuan tunggal langsung dalam markup: ```html

...

``` Kelebihan: tanpa penamaan, tanpa CSS yang tidak digunakan (dimurnikan), token desain konsisten. Kekurangan: HTML bertele-tele. Sangat populer karena kecepatan dan konsistensinya. ## Scoped / CSS Modules & CSS-in-JS Pendekatan modern dalam framework komponen — batasi gaya ke komponen sehingga **tidak dapat bocor**: ```jsx import styles from "./Card.module.css"; // class names are hashed/localized

...

// → .Card_card__a1b2 (unique) ``` Ini memecahkan masalah lingkup global secara mekanis daripada menurut konvensi. ## Sistem lainnya ```text OOCSS — separate structure from skin, reuse objects SMACSS — categorize rules (base, layout, module, state, theme) ITCSS — layer CSS by specificity (generic → explicit), low to high ``` ## Tujuan umum Semuanya melawan musuh yang sama: **spesifisitas merayap**, **tabrakan penamaan**, **kode mati**, dan **kaskade yang tidak dapat diprediksi**. Baik melalui penamaan (BEM), utilitas (Tailwind), atau scoping (Modules), mereka menjaga CSS dapat diprediksi dan aman diubah dalam skala besar. ## Mengapa ini penting Basis kode CSS besar runtuh di bawah lingkup global dan perang spesifisitas tanpa disiplin. Memilih dan menerapkan metodologi secara konsisten (umumnya BEM, Tailwind, atau CSS Modules yang dibatasi saat ini) adalah yang menjaga gaya modular, dapat dihapus, dan bebas konflik saat tim dan basis kode berkembang.