Belajar CSS Architecture: BEM, OOCSS, dan SMACSS

Ketika proyek website semakin besar, pengelolaan file CSS bisa menjadi tantangan besar. Banyak developer menghadapi masalah seperti kode CSS yang berantakan, duplikasi style, dan sulitnya memelihara kode dalam jangka panjang.

Di sinilah CSS Architecture berperan. Dengan pendekatan seperti BEM, OOCSS, dan SMACSS, kamu bisa menulis CSS yang terstruktur, konsisten, dan mudah dikelola bahkan dalam tim besar.

Artikel ini akan menjadi panduan lengkap belajar CSS architecture, mencakup konsep, contoh implementasi, dan best practice untuk membuat kode CSS yang bersih dan scalable.

Baca juga: Tutorial Membuat Portfolio Website Responsive Menggunakan CSS

Apa Itu CSS Architecture?

CSS Architecture adalah pendekatan atau metodologi dalam menulis kode CSS agar mudah diatur, di-maintain, dan di-scale. Tujuan utamanya adalah membuat struktur CSS modular—kode yang bisa digunakan kembali tanpa menyebabkan konflik antar-style.

Tanpa arsitektur yang jelas, CSS akan mudah menjadi spaghetti code: sulit dipahami, tidak efisien, dan rawan error saat perubahan kecil dilakukan.

Arsitektur CSS yang populer saat ini antara lain:

• BEM (Block, Element, Modifier)
• OOCSS (Object-Oriented CSS)
• SMACSS (Scalable and Modular Architecture for CSS)

Ketiganya memiliki filosofi berbeda, tetapi punya tujuan yang sama: membuat CSS lebih maintainable dan scalable.

Mengenal BEM (Block, Element, Modifier)

Apa Itu BEM?

BEM adalah metodologi yang dikembangkan oleh tim Yandex. Tujuannya adalah membuat struktur penamaan CSS yang konsisten dan mudah dipahami.

Format penulisan BEM adalah sebagai berikut:

.block {}
.block__element {}
.block--modifier {}Code language: CSS (css)

Penjelasan:

• Block: Komponen utama yang berdiri sendiri (misalnya: card, menu, button).
• Element: Bagian dari block yang tidak bisa berdiri sendiri (misalnya: card__title, menu__item).
• Modifier: Variasi atau status dari block/element (misalnya: button--primary, card--dark).

Contoh Implementasi:

HTML:

<div class="card card--highlight">
    <h2 class="card__title">Judul Artikel</h2>
    <p class="card__content">Isi konten dari artikel ini.</p>
</div>Code language: HTML, XML (xml)

CSS:

.card {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
}

.card--highlight {
    background: #f0f8ff;
}

.card__title {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.card__content {
    color: #555;
}Code language: CSS (css)

Keunggulan BEM:

• Penamaan yang jelas dan konsisten.
• Meminimalisir konflik antar komponen.
• Mudah dipahami oleh developer lain.

Kekurangan:

• Penulisan class bisa jadi panjang.
• Kurang fleksibel untuk struktur HTML dinamis.

OOCSS (Object-Oriented CSS)

Konsep Dasar OOCSS

OOCSS atau Object-Oriented CSS diperkenalkan oleh Nicole Sullivan, dengan prinsip utama:

• Pisahkan struktur dari skin (tampilan).
• Pisahkan container dari content.

Dengan OOCSS, kamu membangun CSS layaknya membuat object reusable, yang dapat digunakan ulang di berbagai tempat.

Contoh Implementasi OOCSS:

<div class="media">
    <img src="avatar.jpg" class="media__img" alt="Avatar">
    <div class="media__body">
        <h4 class="title">John Doe</h4>
        <p class="text">Desainer UI/UX</p>
    </div>
</div>Code language: JavaScript (javascript)

.media {
    display: flex;
    align-items: center;
}

.media__img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 15px;
}

.title {
    font-weight: bold;
}

.text {
    color: #666;
}Code language: CSS (css)

Keunggulan OOCSS:

• Kode bisa digunakan ulang di banyak tempat.
• Lebih efisien dan modular.
• Mendorong desain yang konsisten.

Kekurangan:

• Kadang memerlukan lebih banyak class.
• Butuh perencanaan struktur yang baik.

SMACSS (Scalable and Modular Architecture for CSS)

Apa Itu SMACSS?

SMACSS, diciptakan oleh Jonathan Snook, adalah metodologi yang membagi CSS menjadi beberapa kategori agar mudah diatur dan di-scale.

SMACSS membagi style menjadi 5 kategori:

Contoh Struktur Folder SMACSS:

css/
│
├── base/
│   └── _reset.css
├── layout/
│   └── _header.css
├── module/
│   └── _button.css
├── state/
│   └── _is-active.css
└── theme/
    └── _dark.cssCode language: JavaScript (javascript)

Keunggulan SMACSS:

• Struktur modular dan scalable.
• Cocok untuk proyek besar dengan banyak komponen.
• Mudah dikembangkan oleh banyak developer.

Kekurangan:

• Perlu setup awal yang lebih kompleks.
• Butuh konsistensi tim dalam menerapkan konvensi.

Perbandingan BEM, OOCSS, dan SMACSS

Cara Memilih Metodologi CSS yang Tepat

Tidak ada satu arsitektur yang paling sempurna. Pilihan tergantung dari kebutuhan proyek dan tim:

• Gunakan BEM jika kamu ingin struktur penamaan yang konsisten dan mudah dipahami.
• Gunakan OOCSS jika kamu ingin fokus pada reusability dan efisiensi kode.
• Gunakan SMACSS jika proyekmu besar dan membutuhkan struktur folder modular.

Kamu bahkan bisa menggabungkan ketiganya, misalnya menggunakan BEM di dalam struktur SMACSS.

Best Practice CSS Architecture

Beberapa tips penting agar CSS tetap rapi dan efisien:

• Gunakan naming convention konsisten.
• Hindari selector berlapis terlalu dalam.
• Gunakan preprocessor (Sass/LESS) untuk manajemen file.
• Pisahkan style berdasarkan fungsi (layout, komponen, utilitas).
• Gunakan CSS linting tools seperti Stylelint untuk menjaga konsistensi.

Kesimpulan

Menerapkan arsitektur CSS seperti BEM, OOCSS, atau SMACSS membantu kamu menulis kode yang:

• Rapi dan terstruktur
• Mudah dikelola oleh tim
• Efisien untuk proyek jangka panjang

Belajar CSS Architecture bukan hanya soal penamaan class, tapi tentang membangun mindset developer profesional yang menulis kode bersih dan scalable.

Jika kamu ingin menjadi web developer handal, menguasai BEM, OOCSS, dan SMACSS adalah langkah penting yang tak boleh dilewatkan.