Articles
Pengenalan kepada CSS
CSS dan BEM

CSS dan BEM

Artikel ini menerangkan tentang CSS dan BEM.

YouTube Video

HTML untuk Pratonton

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 Pengurusan Gaya yang Berkesan

CSS adalah bahasa asas yang digunakan untuk menentukan rupa laman web. Walau bagaimanapun, pengurusan CSS dengan berkesan boleh menjadi cabaran, terutamanya untuk projek berskala besar. BEM (Block Element Modifier) adalah konvensi penamaan CSS yang direka untuk menangani isu-isu ini dan meningkatkan kebolehgunaan semula serta kebolehselenggaraan.

Cabaran dalam CSS dan Keperluan untuk BEM

Cabaran dalam CSS termasuk masalah-masalah berikut:.

  1. Perlanggaran ruang nama global: Dalam CSS, nama kelas adalah global, yang menimbulkan risiko perlanggaran antara komponen yang berbeza.
  2. Penggunaan berlebihan penentu kompleks: Penentu warisan atau ID yang terlalu kompleks meningkatkan kekhususan, menjadikan pengubahsuaian masa depan sukar.
  3. Pengurangan kebolehgunaan semula: Gaya tertentu menjadi lebih sukar untuk digunakan semula dalam komponen lain.

BEM direka untuk menyelesaikan masalah-masalah ini.

Konsep Asas BEM

BEM terdiri daripada tiga elemen utama:.

  1. Blok: Komponen bebas dengan maknanya sendiri.
  2. Elemen: Sebahagian daripada blok, secara logiknya bersambung dengannya.
  3. Pengubah: Mengubah rupa atau tingkah laku blok atau elemen.

Konvensi penamaan BEM mengikuti format di bawah:.

.block__element--modifier
  • block: Nama komponen blok.
  • element: Elemen yang merupakan sebahagian daripada blok.
  • modifier: Mewakili keadaan tertentu atau variasi gaya.

Contoh Praktikal

Berikut adalah contoh mudah.

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

Manfaat BEM

Berikut adalah kelebihan BEM.

  • Konsistensi Oleh kerana konvensyen penamaan adalah konsisten, kod menjadi lebih mudah dibaca.
  • Kebolehkitaran Semula Menjadi lebih mudah untuk menggunakan semula komponen.
  • Kebolehselenggaraan Pembangun lain boleh memahami kod dengan lebih mudah, menjadikan pengubahsuaian lebih senang dilakukan.

Membangun projek menggunakan BEM

Reka bentuk HTML

Berikut adalah contoh HTML yang menggunakan 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>

Reka bentuk CSS

Tulis 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 mentakrifkan gaya modular menggunakan konvensyen BEM (Block Element Modifier) untuk meningkatkan kebolehkitaran semula dan kebolehselenggaraan.

Memperluaskan gaya

Mari kita lihat cara untuk menambah satu modifier baharu bagi menjadikan satu item menu tertentu tidak aktif.

HTML yang sepadan akan kelihatan 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 mentakrifkan satu modifier yang menjadikan item menu tidak aktif kelihatan malap serta mematikan interaksi klik.

Soalan Lazim

Apabila menggunakan BEM, perkara-perkara berikut boleh diambil kira.

S1: Adakah saya perlu mematuhi konvensi penamaan BEM dengan ketat?

Tidak perlu mengikuti peraturan penamaan BEM secara ketat, tetapi mengekalkan konsistensi adalah penting. Tentukan peraturan yang seragam dalam projek dan pastikan seluruh pasukan mengikutinya.

S2: Bukankah memperkenalkan BEM menjadikan CSS lebih panjang?

Memperkenalkan BEM mungkin menyebabkan nama kelas CSS menjadi lebih panjang, tetapi ini menjadikan peranan setiap komponen lebih jelas. Akibatnya, penyelenggaraan bertambah baik dan manfaatnya melebihi ker redundanan.

S3: Bolehkah BEM digunakan bersama kerangka kerja CSS lain?

BEM boleh digunakan bersama rangka kerja CSS yang lain. Sebagai contoh, walaupun menggunakan Tailwind CSS atau Bootstrap, anda boleh menerapkan BEM pada komponen tersuai.

Kesimpulan

BEM menyediakan konvensyen penamaan yang jelas untuk pemodularan dan memudahkan pengurusan CSS. Dengan menggunakan kaedah ini, anda boleh mengelakkan konflik gaya dan meningkatkan kebolehselenggaraan serta kebolehkitaran semula secara mendadak. Mereka bentuk konvensyen penamaan yang sesuai menyumbang kepada penambahbaikan kualiti dan produktiviti projek.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

`aspect-ratio` Property dan Reka Bentuk Responsif