Model BEM CSS – Panduan Menulis CSS Boleh Skala dan Boleh Diselenggara

Model CSS BEM – Panduan Menulis CSS Boleh Skala dan Boleh Diselenggara

Dalam artikel ini, kami akan menyelami metodologi BEM (Blok, Elemen, Pengubah suai), konvensyen penamaan CSS popular yang membantu anda menulis CSS yang bersih, tersusun dan boleh diselenggara untuk projek besar. BEM memastikan kod anda kekal berskala apabila projek berkembang dan mengurangkan kemungkinan konflik gaya.

1. Apakah BEM?

BEM adalah singkatan kepada:

• Sekat: Entiti kendiri yang bermakna dengan sendirinya, seperti butang, menu atau borang.
• Elemen: Sebahagian daripada blok yang melaksanakan fungsi tertentu, seperti label butang atau item menu.
• Pengubah suai: Variasi atau keadaan blok atau elemen, seperti butang dilumpuhkan atau item menu yang diserlahkan.

Metodologi BEM menekankan mencipta kod CSS yang boleh digunakan semula, boleh diramal dan boleh diselenggara.

Konvensyen Penamaan BEM:

.block {}
.block__element {}
.block--modifier {}

• Sekat: Mewakili bekas utama.
• Elemen: Ikut nama blok, dipisahkan dengan garis bawah berganda (__).
• Pengubah suai: Ikut nama blok atau elemen, dipisahkan dengan tanda sempang berganda (--).

2. Mentakrifkan Struktur

Mari pecahkan struktur BEM dengan contoh.

Contoh:

<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>

Dalam contoh ini:

• Blok: .menu ialah blok utama yang mewakili menu navigasi.
• Elemen: .menu__list dan .menu__item ialah elemen dalam blok.
• Pengubahsuai: .menu__item--aktif ialah pengubahsuai yang menunjukkan keadaan aktif item menu.

3. Blok dalam BEM

Sebuah blok ialah komponen bebas yang boleh digunakan semula. Anggap ia sebagai entiti serba lengkap yang boleh diletakkan di mana-mana dalam kod anda tanpa perlu risau gayanya dipengaruhi oleh elemen lain.

Contoh:

.button {
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
}

Di sini, .button ialah blok yang mentakrifkan gaya untuk komponen butang. Anda boleh menggunakan semula blok ini merentas berbilang bahagian tapak web anda.

4. Elemen dalam BEM

Satu elemen ialah sebahagian daripada blok yang tidak mempunyai makna tersendiri. Ia terikat pada blok dan wujud untuk melaksanakan fungsi yang berkaitan dengan blok.

Contoh:

.button__icon {
    margin-right: 10px;
}
.button__label {
    font-size: 14px;
}

Di sini:

• .button__icon ialah elemen dalam blok .button, mewakili ikon dalam butang.
• .button__label ialah elemen lain, mewakili label teks butang.

5. Pengubah suai dalam BEM

pengubah suai mewakili variasi blok atau elemen. Pengubah suai digunakan untuk menukar rupa atau gelagat komponen, seperti menukar warna butang atau menjadikan elemen lebih besar.

Contoh:

.button--primary {
    background-color: #2ecc71;
}
.button--large {
    padding: 15px 30px;
}

Di sini:

• .button--primary ialah pengubah suai yang menukar warna latar belakang butang.
• .butang--besar ialah satu lagi pengubah suai yang meningkatkan saiz butang.

Pengubah suai juga boleh digunakan pada elemen:

.button__icon--small {
    width: 10px;
    height: 10px;
}

6. Kebaikan Menggunakan BEM

• Skalabiliti: BEM direka bentuk untuk berskala, menjadikannya sesuai untuk projek yang lebih besar dengan banyak komponen.
• Kebolehgunaan semula: Blok adalah serba lengkap dan boleh digunakan semula merentasi bahagian projek yang berlainan.
• Kebolehselenggaraan: BEM menggalakkan penamaan yang jelas dan konsisten, menjadikannya lebih mudah untuk mengekalkan CSS semasa projek berkembang.
• Kebolehramalan: Anda boleh dengan mudah mengetahui elemen mana yang tergolong dalam blok mana dan memahami variasinya berdasarkan pengubah suai.

7. BEM dalam Tindakan

Mari lihat contoh yang lebih lengkap yang merangkumi blok, elemen dan pengubah suai:

HTML:

<div class="card">
    <div class="card__header">
        <h2 class="card__title">Card Title</h2>
    </div>
    <div class="card__body">
        <p class="card__text">This is a simple card component.</p>
    </div>
    <div class="card__footer">
        <button class="button card__button card__button--primary">Read More</button>
    </div>
</div>

CSS:

/* Block */
.card {
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 5px;
}

/* Elements */
.card__header {
    margin-bottom: 15px;
}
.card__title {
    font-size: 18px;
    color: #333;
}
.card__body {
    margin-bottom: 15px;
}
.card__text {
    color: #666;
}
.card__footer {
    text-align: right;
}

/* Modifier */
.card__button--primary {
    background-color: #3498db;
    color: white;
}

Dalam contoh ini:

• .kad ialah blok yang mewakili keseluruhan komponen kad.
• .card__header, .card__title, .card__body dan .card__footer ialah elemen dalam blok kad.
• .card__button--primary ialah pengubah suai yang menggunakan gaya utama pada butang dalam kad.

8. Kesilapan Biasa yang Perlu Dielakkan dalam BEM

• Terlalu banyak elemen bersarang: Elakkan elemen bersarang dalam, kerana ia boleh membawa kepada nama kelas yang tidak perlu panjang.
• Pengubah suai yang tidak diperlukan: Hanya gunakan pengubah suai apabila anda perlu menukar rupa atau keadaan blok atau elemen.
• Menggabungkan BEM dengan konvensyen penamaan lain: Berpegang teguh pada BEM sepanjang projek anda untuk konsistensi.

Kesimpulan

Metodologi BEM ialah cara yang berkesan untuk memastikan CSS anda teratur, boleh diramal dan berskala. Dengan memecahkan komponen anda kepada blok, elemen dan pengubah suai, anda boleh mengekalkan kod yang lebih bersih dan mengelakkan konflik gaya, menjadikan pembangunan lebih pantas dan cekap sebagai projek anda berkembang.

---

Ikuti saya di LinkedIn

Ridoy Hasan

Atas ialah kandungan terperinci Model BEM CSS – Panduan Menulis CSS Boleh Skala dan Boleh Diselenggara. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!