CSS Naming Convention yang Perlu Diketahui dan Kenapa Perlu Digunakan
Tags: css
Published: 2024-06-05 02:42:15


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gbk6ry96tlao7pwrzyuy.png)

Kalau teman-teman pengen bikin website yang keren dan gampang diatur, teman-teman kudu ngerti yang namanya konvensi penamaan CSS. Ini kayak aturan main buat ngasih nama class dan ID di CSS biar kode teman-teman gampang dibaca dan dipelihara. Ada beberapa gaya penamaan yang sering dipake: BEM, OOCSS, SMACSS, dan Atomic CSS. Nih gue jelasin satu-satu dengan bahasa yang asik.

**1. BEM (Block, Element, Modifier)**
BEM ini pendekatan dari Rusia yang bikin kode teman-teman lebih terstruktur.

- Block: Ini kayak komponen utama, misal tombol atau menu.
- Element: Bagian dari block, kayak item di dalam menu.
- Modifier: Variasi dari block atau element, kayak tombol yang warnanya beda.

```html
<div class="menu">
  <ul class="menu__list">
    <li class="menu__item menu__item--active">Home</li>
    <li class="menu__item">About</li>
    <li class="menu__item">Contact</li>
  </ul>
</div>
```

```css
.menu { ... }
.menu__list { ... }
.menu__item { ... }
.menu__item--active { ... }

```

Kenapa Pake Ini:

- **Jelas**: Nama-nama class-nya gampang dipahami.
- **Gampang Diatur**: Kode lebih terorganisir, jadi kalo mau ubah sesuatu, gak bikin pusing.
- **Bisa Dipake Ulang**: Teman-teman bisa pake komponen yang sama di tempat lain tanpa masalah.

**2. OOCSS (Object-Oriented CSS)**
OOCSS ini kayak OOP di pemrograman, fokusnya ke komponen yang bisa dipake berulang.

- Memisahkan Struktur dan style: Struktur di satu class, style di class lain.
- Komponen Reusable: Bikin komponen generik yang bisa dipake di mana aja.

Contoh:

```html
<div class="box box--small color-primary">
  <p class="text">This is a small box with primary color.</p>
</div>
```

```css
.box { ... }
.box--small { width: 100px; height: 100px; }
.color-primary { background-color: blue; }
.text { ... }
```

Kenapa Pake Ini:

- **Modular**: Teman-teman bisa bikin komponen yang terpisah dan bisa dipake ulang.
- **Gampang Diatur**: Mudah buat maintain, karena struktur dan style terpisah.

**3. SMACSS (Scalable and Modular Architecture for CSS)**
SMACSS ini cara buat ngatur CSS yang fleksibel dengan kategorikan aturan jadi lima: Base, Layout, Module, State, dan Theme.

- Base: Style dasar buat elemen HTML.
- Layout: Style buat tata letak utama.
- Module: Komponen yang bisa dipake ulang.
- State: Style buat status khusus dari modul.
- Theme: Variasi tema buat modul atau layout.

Contoh:

```html
<div class="header">
  <h1 class="header__title">Website Title</h1>
  <nav class="header__nav">
    <ul class="nav__list">
      <li class="nav__item">Home</li>
      <li class="nav__item nav__item--active">About</li>
    </ul>
  </nav>
</div>

```

```css
.header { ... }
.header__title { ... }
.header__nav { ... }
.nav__list { ... }
.nav__item { ... }
.nav__item--active { ... }

```

Kenapa Pake Ini:

- **Skalabilitas**: Kode tetap rapi walau proyek gede.
- **Modular**: Bikin komponen yang bisa dipake ulang dengan aturan jelas.

**4. Atomic CSS**
Atomic CSS ini setiap class cuma punya satu properti CSS, kayak utility-first CSS.

Contoh:

```html
<div class="d-flex justify-center align-items-center p-2">
  <p class="text-center font-bold">Hello, world!</p>
</div>

```

```css
.d-flex { display: flex; }
.justify-center { justify-content: center; }
.align-items-center { align-items: center; }
.p-2 { padding: 0.5rem; }
.text-center { text-align: center; }
.font-bold { font-weight: bold; }

```

Kenapa Pake Ini:

- **Konsisten**: Utility classes bikin gaya yang sama di seluruh proyek.
- **Cepat**: Teman-teman bisa cepat apply gaya tanpa nulis CSS baru.

**Kesimpulan**
Pake _CSS Naming Conventions_ itu penting biar kode teman-teman rapi dan gampang diatur. Mau pake BEM, OOCSS, SMACSS, atau Atomic CSS, tergantung kebutuhan proyek teman-teman. Yang jelas, dengan penamaan yang konsisten, teman-teman bakal lebih mudah maintain dan ngembangin website teman-teman. Jadi, mulai sekarang coba deh ikutin salah satu konvensi ini, pasti bakal kerasa bedanya! Sampai bertemu di artikel yang lain!!