CSS yang kecil mudah dikelola; masalah muncul saat proyek membesar. Section ini membahas cara mengorganisasi file, konvensi penamaan seperti BEM, pendekatan component-based dan utility classes, serta strategi menghindari konflik specificity.

# Mengorganisasi File CSS

Susun stylesheet proyek ke dalam folder per concern, atur urutan import, dan terapkan konvensi nama file yang konsisten.

Buka → # Naming Conventions

Beri nama class secara bermakna, konsisten, dan mudah dicari dengan pola kebab-case serta prefiks peran yang jelas.

Buka → # Component-based CSS

Susun CSS sebagai kumpulan komponen mandiri yang kohesif, bervariasi lewat modifier, dan dapat dikomposisi ulang.

Buka → # BEM

Terapkan konvensi BEM (Block, Element, Modifier) untuk menamai komponen dengan flat selectors yang bebas konflik.

Buka → # Utility Classes

Kenali utility classes — satu class untuk satu tugas — beserta trade-off-nya dan situasi ketika pendekatan ini paling cocok.

Buka → # Design Tokens

Simpan keputusan desain sebagai design tokens berupa custom properties bernama semantik dan dokumentasinya sebagai kontrak tim.

Buka → # CSS Custom Properties

Atur custom properties sebagai arsitektur berlapis: token global, variabel lokal komponen dengan fallback, dan pendaftaran tipe via @property.

Buka → # Avoiding Specificity Conflicts

Cegah konflik specificity dengan selector satu class, pemisahan prioritas lewat @layer, dan disiplin menghindari !important.

Buka → # Maintainable CSS

Rangkum kebiasaan perawatan CSS: checklist kualitas, komentar seksi, review, refactor bertahap, dan penerapan DRY dengan batas yang sehat.

Buka →