CSS dan BEM

Artikel ini menjelaskan tentang CSS dan BEM.

YouTube Video

HTML untuk Pratinjau

css-bem.html
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>BEM Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-bem.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS &amp; BEM(Block Element Modifier)</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>BEM Example</h2>
20        </header>
21        <article>
22            <h3>BEM HTML Example</h3>
23            <section>
24                <header><h4>HTML</h4></header>
25<pre class="sample">
26&lt;div class=&quot;button button--primary&quot;&gt;
27    &lt;span class=&quot;button__text&quot;&gt;Click Me&lt;/span&gt;
28&lt;/div&gt;
29</pre>
30            </section>
31        </article>
32        <article>
33            <h3>BEM Example</h3>
34            <section>
35                <header><h4>HTML</h4></header>
36<pre class="sample">
37&lt;header class=&quot;header&quot;&gt;
38    &lt;div class=&quot;header__logo&quot;&gt;My Logo&lt;/div&gt;
39    &lt;nav class=&quot;header__nav&quot;&gt;
40        &lt;ul class=&quot;header__menu&quot;&gt;
41            &lt;li class=&quot;header__menu-item header__menu-item--active&quot;&gt;Home&lt;/li&gt;
42            &lt;li class=&quot;header__menu-item&quot;&gt;About&lt;/li&gt;
43            &lt;li class=&quot;header__menu-item&quot;&gt;Contact&lt;/li&gt;
44        &lt;/ul&gt;
45    &lt;/nav&gt;
46&lt;/header&gt;
47</pre>
48            </section>
49            <header><h4>HTML+CSS</h4></header>
50            <section class="sample-view">
51                <header class="header">
52                    <div class="header__logo">My Logo</div>
53                    <nav class="header__nav">
54                        <ul class="header__menu">
55                            <li class="header__menu-item header__menu-item--active">Home</li>
56                            <li class="header__menu-item">About</li>
57                            <li class="header__menu-item">Contact</li>
58                        </ul>
59                    </nav>
60                </header>
61            </section>
62        </article>
63        <article>
64            <h3>BEM Example</h3>
65            <section>
66                <header><h4>HTML</h4></header>
67<pre class="sample">
68&lt;header class=&quot;header&quot;&gt;
69    &lt;div class=&quot;header__logo&quot;&gt;My Logo&lt;/div&gt;
70    &lt;nav class=&quot;header__nav&quot;&gt;
71        &lt;ul class=&quot;header__menu&quot;&gt;
72            &lt;li class=&quot;header__menu-item header__menu-item--active&quot;&gt;Home&lt;/li&gt;
73            &lt;li class=&quot;header__menu-item&quot;&gt;About&lt;/li&gt;
74            &lt;li class=&quot;header__menu-item&quot;&gt;Contact&lt;/li&gt;
75            &lt;li class=&quot;header__menu-item header__menu-item--disabled&quot;&gt;Disabled&lt;/li&gt;
76        &lt;/ul&gt;
77    &lt;/nav&gt;
78&lt;/header&gt;
79</pre>
80            </section>
81            <header><h4>HTML+CSS</h4></header>
82            <section class="sample-view">
83                <header class="header">
84                    <div class="header__logo">My Logo</div>
85                    <nav class="header__nav">
86                        <ul class="header__menu">
87                            <li class="header__menu-item header__menu-item--active">Home</li>
88                            <li class="header__menu-item">About</li>
89                            <li class="header__menu-item">Contact</li>
90                            <li class="header__menu-item header__menu-item--disabled">Disabled</li>
91                        </ul>
92                    </nav>
93                </header>
94            </section>
95        </article>
96    </main>
97</body>
98</html>

CSS dan BEM: Pendekatan untuk Pengelolaan Gaya yang Efektif

CSS adalah bahasa dasar yang digunakan untuk menentukan tampilan sebuah situs web. Namun, mengelola CSS secara efektif bisa menjadi tantangan, terutama untuk proyek berskala besar. BEM (Block Element Modifier) adalah konvensi penamaan CSS yang dirancang untuk mengatasi masalah ini dan meningkatkan tingkat penggunaan ulang serta pemeliharaan.

Tantangan dalam CSS dan Kebutuhan untuk BEM

Tantangan dalam CSS meliputi masalah-masalah berikut ini:.

  1. Tabrakan global namespace: Dalam CSS, nama kelas bersifat global, yang dapat menimbulkan risiko tabrakan antar komponen berbeda.
  2. Penggunaan selektor kompleks secara berlebihan: Selektor turunan atau ID yang terlalu kompleks meningkatkan spesifisitas, sehingga menyulitkan modifikasi di masa mendatang.
  3. Pengurangan penggunaan ulang: Gaya tertentu menjadi lebih sulit untuk digunakan kembali pada komponen lain.

BEM dirancang untuk mengatasi masalah-masalah ini.

Konsep Dasar BEM

BEM terdiri dari tiga elemen utama:.

  1. Block: Komponen independen yang memiliki makna tersendiri.
  2. Element: Bagian dari sebuah block, yang secara logis terhubung dengannya.
  3. Modifier: Mengubah tampilan atau perilaku sebuah block atau element.

Konvensi penamaan BEM mengikuti format berikut:.

.block__element--modifier
  • block: Nama komponen dari block.
  • element: Sebuah elemen yang merupakan bagian dari block.
  • modifier: Mewakili keadaan tertentu atau variasi gaya.

Contoh Praktis

Berikut adalah contoh sederhana.

1<div class="button button--primary">
2  <span class="button__text">Click Me</span>
3</div>
  • button adalah sebuah blok.
  • button__text adalah sebuah elemen.
  • button--primary adalah sebuah modifikator.

Manfaat BEM

Berikut adalah kelebihan dari BEM.

  • Konsistensi Karena konvensi penamaan yang konsisten, kode menjadi lebih mudah dibaca.
  • Dapat Digunakan Kembali Komponen menjadi lebih mudah digunakan kembali.
  • Kemudahan Pemeliharaan Pengembang lain dapat lebih mudah memahami kode, sehingga memudahkan modifikasi.

Membangun proyek menggunakan BEM

Desain HTML

Berikut adalah contoh HTML yang menerapkan BEM.

 1<header class="header">
 2  <div class="header__logo">My Logo</div>
 3  <nav class="header__nav">
 4    <ul class="header__menu">
 5      <li class="header__menu-item header__menu-item--active">Home</li>
 6      <li class="header__menu-item">About</li>
 7      <li class="header__menu-item">Contact</li>
 8    </ul>
 9  </nav>
10</header>

Desain CSS

Tuliskan CSS yang sesuai untuk HTML seperti berikut.

 1.header {
 2  background-color: #333;
 3  color: #fff;
 4  padding: 10px;
 5}
 6
 7.header__logo {
 8  font-size: 24px;
 9}
10
11.header__nav {
12  display: flex;
13  justify-content: space-around;
14}
15
16.header__menu {
17  list-style: none;
18  margin: 0;
19  padding: 0;
20  display: flex;
21}
22
23.header__menu-item {
24  margin: 0 10px;
25  padding: 5px 10px;
26}
27
28.header__menu-item--active {
29  font-weight: bold;
30  border-bottom: 2px solid #fff;
31}
  • CSS ini mendefinisikan gaya modular menggunakan konvensi BEM (Block Element Modifier) untuk meningkatkan penggunaan ulang dan kemudahan pemeliharaan.

Memperluas gaya

Mari kita lihat cara menambahkan modifier baru untuk membuat item menu tertentu menjadi tidak aktif.

HTML yang sesuai akan terlihat seperti ini.

1<li class="header__menu-item header__menu-item--disabled">Disabled</li>
1.header__menu-item--disabled {
2  opacity: 0.5;
3  pointer-events: none;
4}
  • CSS ini mendefinisikan modifier yang membuat item menu tidak aktif terlihat lebih redup dan menonaktifkan interaksi klik.

Pertanyaan yang Sering Diajukan

Saat menggunakan BEM, hal-hal berikut dapat diperhatikan.

Q1: Apakah saya harus benar-benar mengikuti konvensi penamaan BEM?

Tidak perlu mengikuti aturan penamaan BEM secara ketat, namun menjaga konsistensi sangatlah penting. Tentukan aturan yang seragam dalam proyek dan pastikan seluruh tim mengikutinya.

Q2: Bukankah penerapan BEM membuat CSS menjadi lebih verbose?

Menggunakan BEM mungkin menghasilkan nama kelas CSS yang lebih panjang, tetapi hal ini membuat peran komponen menjadi lebih jelas. Akibatnya, pemeliharaan menjadi lebih baik, dan keuntungannya lebih besar daripada kerumitannya.

Q3: Apakah BEM dapat digunakan bersama dengan kerangka kerja CSS lainnya?

BEM dapat digunakan bersama dengan framework CSS lainnya. Misalnya, bahkan ketika menggunakan Tailwind CSS atau Bootstrap, Anda dapat menerapkan BEM pada komponen kustom.

Kesimpulan

BEM menyediakan konvensi penamaan yang jelas untuk memodularisasi dan membuat CSS lebih mudah dikelola. Dengan menggunakan metode ini, Anda dapat mencegah konflik gaya dan secara dramatis meningkatkan kemudahan pemeliharaan serta penggunaan ulang. Merancang konvensi penamaan yang tepat dapat meningkatkan kualitas proyek dan produktivitas.

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

YouTube Video