Mengenal macam - macam Metodologi penulisan CSS - Part 2
Tags: html, webdev, beginners, programming
Published: 2022-11-04 06:29:12

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](https://dev.to/azrilardian/mengenal-macan-macam-metodologi-penulisan-css-part-1-4010) 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!_ 🖐️