Pengantar Metodologi BEM

Indonesian (Bahasa Indonesia) translation by Muhammad Naufal (you can also view the original English article)

Kita harus menerima kenyataan bahwa kita semua ingin membuat kode kita lebih mudah untuk dibaca. Dengan melakukan hal tersebut, membantu kita bekerja lebih cepat dan efisien, dan ketika orang lain bekerja dengan kita, kita dapat mempertahankan kejelasan dan konsistensi dari semantic atau maknanya. Belakangan ini sepertinya ada banyak standar dan persyaratan di dunia CSS: OOCSS, SMACSS, BEM dan banyak lagi! Ini semua adalah pendekatan untuk memperbaiki struktur CSS, dan kali ini kita akan membahas soal BEM.

BEM adalah singkatan dari Block Element Modifier. Standar ini menunjukkan cara terstruktur untuk memberi nama pada class, berdasarkan properties dari element yang dimaksud. Jika anda pernah melihat nama class seperti header__form—email seperti itu lah cara kerja BEM. Bila menggunakan metodologi BEM, yang perlu diperhatikan bahwa kita hanya akan menggunakan nama class (bukan ID). Nama class memungkinkan anda mengulang nama BEM jika diperlukan, dan membuat struktur pengkodean yang konsisten (keduanya dalam file HTML dan CSS / Sass). Sekarang mari kita lihat penjelasannya.

Block

Block adalah container atau context di mana element itu menemukan dirinya sendiri. Anggap ini sebagai potongan dari struktural besar kode anda. Anda mungkin memiliki header, footer, sidebar dan area main content; Masing-masing akan dianggap sebagai block. Perhatikan gambar di bawah ini:

Element block membentuk root dari class dan akan selalu jadi yang utama. Ketahuilah bahwa begitu anda menentukan block, anda akan siap untuk mulai menamai element anda.

Element

Element adalah bagian dari block. Block adalah keseluruhannya dan bagian-bagiannya adalah element. Setiap element ditulis setelah block yang dihubungkan oleh dua garis bawah.

1	.block__element

Saya tahu ini terlihat sedikit aneh tapi begitu anda mulai menggunakannya anda akan bertanya-tanya bagaimana mungkin selama ini anda tidak menggunakannya ketika menulis CSS! Garis bawah ganda memungkinkan anda untuk menavigasi dan memanipulasi kode anda secara visual dengan cepat.

Berikut adalah beberapa contoh bagaimana metodologi element bekerja:

1	.header__logo {}
2	.header__tagline {}
3	.header__searchbar {}
4	.header__navigation {}

Seperti yang bisa anda lihat, ada ruang untuk kreativitas dan membuat metodologi anda sendiri. "Navigation" bisa diubah menjadi "nav", "tagline" bisa diubah menjadi "tag" atau "tagLine". Intinya adalah menjaga agar nama tetap sederhana, jelas, dan tepat. Tapi jangan terlalu dipikirkan, karena stylesheet dan html anda akan tetap aman (jangan mengulangi kesalahan yang sama). Seharusnya tidak menjadi masalah untuk memperbarui nama class saat anda menemukan semantic yang lebih baik yang sesuai untuk anda (coba saja dengan itu!). Element akan menjadi inti dari nama class anda, membantu anda dalam memahami bagaimana menyusun stylesheet dan mengelola layout anda.

Modifier

Sekarang adalah bagian yang menyenangkan (jika anda belum merasa senang!) saat memberi nama sebuah class, maksudnya adalah untuk membantu membuat element itu berulang sehingga anda tidak perlu menulis class baru di area lain di situs anda jika element style-nya sama. Ketika anda ingin memodifikasi style dari suatu element, anda bisa menggunakan modifier (tentu saja!) untuk melakukannya, anda perlu menambahkan tanda hubung ganda -- setelah element (atau block). Berikut adalah contoh singkatnya

1	.block--modifier {}
2	.block__element--modifier {}

Hati-hati dengan ini! Ingat anda menginginkan semuanya tetap sederhana sehingga tidak harus ada pengulangan dan membuat class tambahan kecuali jika benar-benar diperlukan. Mari kita bahas soal ini dengan kode menggunakan block dari header kita:

1	.header__navigation {}
2	.header__navigation--secondary {}

Jika anda menggunakan secondary navigation, kemungkinan tata letak dan jaraknya tetap sama, tetapi bila secondary navigation menggunakan color yang berbeda. Anda bisa menduplikat syle yang asli, atau bahkan lebih baik lagi, gunakan preprocessor. Dengan Sass, anda bisa menambahkan @extend pada element utama (sehingga elemen sekunder mewarisi semua properti) dan mengubah style yang sesuai.

.header__navigation { 
    background: #008cba; 
    padding: 1rem 0; 
    margin: 2rem 0; 
    text-transform: uppercase; 
    } 
    
.header__navigation--secondary { 
    @extend .header__navigation;
    background: #dfe0e0; 
    }

Anda mungkin berpikir "kalau nama class-nya begitu panjang!" Cara saya melihatnya adalah: nama class pada BEM itu spesifik, jelas, mudah dibaca di dalam html, dan jelas untuk mengkomunikasikan untuk apa mereka.

Yang saya juga suka dengan penamaan class pada BEM adalah anda hanya perlu menggunakan satu nama class untuk setiap tag html. Lihat bagaimana cara kerjanya untuk label. Standard selector:

1	.label .label-default {}
2	.label .label-alert {}

vs. BEM selector:

1	.label {}
2	.label--alert {}

Bahasa seperti Sass (Scss khususnya) memungkinkan kita untuk dengan cepatnya mempunyai element yang berbagi style yang sama dengan pengecualian kecil. Contohnya di bawah ini mencegah kita menduplikasi style, lebih baik kita hanya mengubah apa yang dibutuhkan. Yang sangat saya sukai dari metodologi BEM adalah bahwa saya tidak harus menggabungkan class ambigu seperti "panel panel-default col-md-3 ". Jika anda menggunakan framework seperti Foundation anda bisa mulai memanfaatkan mixins. Tapi untuk contoh sederhana, mari kita memberikan style pada label yang baru saja dijelaskan.

.label { 
    background: #eee; 
    border-radius: 505; 
    color: #333; 
    font-size: 1rem; 
    } 
    
.label--alert { 
    @extend .label; 
    background: #da4531; 
    color: #fff; 
    }

Kesimpulan

Nah begitulah penjelasan singkat tentang BEM. Seperti yang bisa anda lihat, masih banyak lagi yang bisa dijelajahi. BEM adalah sistem yang selalu berkembang yang memungkinkan anda untuk memberikan kejelasan pada kode anda dan membantu anda mendefinisikan dan menetapkan hierarki dengan lebih baik pada pengembangan front-end anda.

Dari pengalaman pribadi saya, ini sangat membantu saya dalam membangun prototype yang lebih efisien, dan beralih membuat kode ke tingkat yang lebih cepat lagi!

Baca Lebih Banyak

Apa pendapat Anda tentang BEM, punya saran, tips, atau trik untuk sesama pembaca Tuts+? Beri tahu kami di komentar di bawah ini!