SASS dan BEM

Artikel ini menjelaskan tentang SASS dan BEM.

Kami akan menjelaskan konsep dan metode implementasi untuk mencegah kebingungan dan kerentanan yang sering terjadi saat CSS menjadi skala besar, dengan menggunakan SASS dan BEM, disertai contoh konkret.

YouTube Video

SASS dan BEM

Ketika jumlah file dan layar bertambah, CSS cenderung mengalami masalah seperti 'Saya tidak tahu di mana gaya ini didefinisikan' dan 'Hanya perubahan kecil sudah merusak tampilan di layar lain.'.

Hal ini karena CSS pada dasarnya adalah bahasa yang tidak memaksakan aturan desain. Jika Anda terus menulis seperti itu, dependensi yang tidak diinginkan akan bertambah.

SASS dan BEM adalah teknik praktis untuk mengubah CSS dari sesuatu yang Anda tulis secara ad hoc menjadi sesuatu yang Anda rancang dan kelola, sehingga mencegah masalah seperti ini. Dengan menggabungkan keduanya, Anda dapat memperjelas makna dari gaya serta meningkatkan keterbacaan, penggunaan ulang, dan kemudahan pemeliharaan secara bersamaan.

Alasan mengapa CSS mudah menjadi tidak terkelola

CSS seperti berikut ini dapat sulit dipahami bagaimana perilakunya saat Anda melihat kembali kodenya nanti.

 1.title {
 2  font-size: 16px;
 3  color: #333;
 4}
 5
 6.container .title {
 7  font-size: 18px;
 8}
 9
10.sidebar .container .title {
11  color: red;
12}

• Pada contoh ini, kelas .title yang sama tampak berbeda tergantung di mana ia ditempatkan, sehingga Anda tidak dapat langsung mengetahui gaya mana yang akan diterapkan pada .title tersebut.
• Dengan cara ini, saat selector menjadi lebih dalam dan lebih tergantung pada elemen induk, CSS menjadi lebih sulit untuk diprediksi ruang lingkup pengaruhnya dan rentan rusak saat dimodifikasi.

BEM adalah konvensi penamaan yang 'menyatakan peran melalui nama'

BEM adalah singkatan dari Block / Element / Modifier, dan di dalam namanya terdapat informasi tentang komponen apa yang diwakili oleh kelas tersebut dan dalam keadaan apa.

• Block adalah komponen independen.
• Element adalah elemen internal dari Block.
• Modifier menyatakan sebuah keadaan atau variasi.

1.card {}
2.card__title {}
3.card--highlighted {}

Dengan konvensi penamaan ini, Anda dapat menebak struktur dan peran hanya dengan melihat HTML-nya saja.

Bentuk dasar HTML dengan menggunakan BEM

Berikut adalah contoh UI kartu yang diekspresikan dalam HTML menggunakan BEM.

1<div class="card card--highlighted">
2  <h2 class="card__title">Title</h2>
3  <p class="card__text">Description</p>
4</div>

Hanya dari nama kelasnya saja, Anda dapat memahami bahwa ini adalah komponen kartu, judul di dalamnya, serta 'keadaan ditekankan'. Inilah keunggulan terbesar dari BEM.

Namun, BEM saja dapat menyebabkan CSS menjadi verbose (panjang dan rumit).

Jika Anda menulis BEM begitu saja di dalam CSS, jumlah kode cenderung bertambah banyak.

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

Di sini, dengan menggunakan SASS, Anda dapat memiliki kode yang terorganisir dan tetap menjaga struktur.

Ekspresikan BEM secara alami dengan nesting di SASS

Dengan memakai nesting di SASS, Anda dapat mencerminkan struktur BEM secara langsung di dalam kode Anda.

 1.card {
 2  padding: 16px;
 3
 4  &__title {
 5    font-size: 18px;
 6  }
 7
 8  &__text {
 9    font-size: 14px;
10  }
11
12  &--highlighted {
13    border: 2px solid orange;
14  }
15}

& mengacu pada selector induk dan sangat cocok digunakan dengan penamaan BEM.

CSS yang dihasilkan dari SASS ini

SASS di atas dikompilasi menjadi CSS seperti berikut.

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

Meskipun tampilannya sama, beban kognitif bagi pengembang jauh berkurang.

Mendesain untuk penggunaan Modifier yang aman

Karena Modifier pada BEM mewakili 'keadaan', kuncinya adalah membatasi penggunaannya hanya untuk override.

 1.button {
 2  padding: 8px 12px;
 3  background: #eee;
 4
 5  &--primary {
 6    background: blue;
 7    color: white;
 8  }
 9
10  &--disabled {
11    opacity: 0.5;
12    pointer-events: none;
13  }
14}

Desain menjadi lebih stabil jika Modifier diperlakukan bukan sebagai 'tambahan' melainkan sebagai 'perubahan'.

Batasi nesting Element hanya satu tingkat

Dalam BEM, penting untuk tidak menanamkan elemen terlalu dalam.

1.card {
2  &__header {
3    font-weight: bold;
4  }
5
6  &__body {
7    margin-top: 8px;
8  }
9}

Element bertingkat seperti .card__header__title adalah tanda bahwa sebaiknya Anda mempertimbangkan untuk memecah Block.

Contoh struktur file SASS

Terakhir, berikut contoh struktur SASS yang praktis untuk proyek nyata.

1styles/
2├── base/
3│   └── reset.scss
4├── components/
5│   ├── card.scss
6│   └── button.scss
7├── layout/
8│   └── header.scss
9└── main.scss

Jika Anda mengelola setiap komponen sebagai 1 block = 1 file, kemungkinan mengalami kerusakan akan lebih kecil.

Contoh card.scss

 1.card {
 2  padding: 16px;
 3  border: 1px solid #ccc;
 4
 5  &__title {
 6    font-size: 18px;
 7  }
 8
 9  &__text {
10    color: #666;
11  }
12}

Karena semuanya bersifat mandiri dalam unit ini, penghapusan, pemindahan, dan penggunaan ulang akan menjadi lebih mudah.

Ringkasan

SASS dan BEM bukan hanya teknik kekinian—mereka adalah pendekatan praktis untuk mengubah CSS menjadi kode yang dapat didesain.

• BEM menamai makna dan peran.
• SASS memungkinkan penulisan yang mudah sembari menjaga struktur.
• Menggabungkan keduanya membuat CSS lebih tahan terhadap kerusakan.

Mari kita tulis CSS hari ini dengan cara yang dapat dipahami oleh diri Anda di masa depan.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video