Pengantar Metodologi BEM

Apa itu Metodologi BEM?

Saat Anda membuat situs web yang lebih kecil, cara Anda mengatur gaya biasanya bukan masalah besar. Anda membuat file biasa, menulis semua CSS yang diperlukan, dan hanya itu. Namun, jika menyangkut proyek yang lebih besar dan lebih kompleks, cara Anda mengatur kode menjadi sangat penting . Bagaimana kode terstruktur bahkan lebih penting jika Anda bekerja dalam tim yang terdiri dari beberapa pengembang front-end dan back-end.

Saat ini, ada banyak metodologi dengan tujuan mengurangi kode CSS dan membuat kode CSS Anda lebih mudah dipelihara. Pada artikel ini, saya akan menjelaskan dan memberikan beberapa contoh salah satunya: BEM. BEM adalah singkatan dari B lock Element M odifier . Ide utama di baliknya adalah untuk mempercepat proses pengembangan, dan memudahkan kerja tim pengembang dengan mengatur kelas CSS ke dalam modul independen. Jika Anda pernah melihat nama kelas seperti header__form--search , itu adalah tindakan BEM. Ya, kelas dapat diberi nama yang sangat panjang, tetapi semuanya dapat dibaca dan dimengerti.

Perhatikan bahwa praktik terbaik adalah menggunakan BEM hanya dengan kelas, dan bukan ID karena kelas memungkinkan Anda mengulang nama jika perlu dan membuat struktur pengkodean yang lebih konsisten. Juga, jika Anda ingin memecah situs web Anda menjadi modul yang terorganisir, itu harus terdiri dari struktur yang sama: blok, elemen, dan pengubah. Di mana setiap blok dapat memiliki beberapa elemen, dan baik blok maupun elemen dapat memiliki beberapa pengubah. Namun, pertama-tama mari kita mulai dengan struktur dasar BEM dan menjelaskannya dengan contoh.

Memblokir

Blok mewakili objek di situs web Anda. Anggap saja sebagai potongan struktural yang lebih besar dari kode Anda. Blok paling umum di setiap situs web saat ini adalah header, konten, sidebar, footer, dan pencarian. Blok di BEM selalu menjadi titik awal untuk menghubungkan kelas CSS Anda. Lihatlah beberapa contoh blok:

• sebuah konten
• sebuah menu
• formulir pencarian

 .content {/* Styles */} .menu {/* Styles */} .search {/* Styles */}

Elemen

Elemen adalah komponen di dalam blok yang melakukan fungsi tertentu. Seharusnya hanya masuk akal dalam konteks bloknya:

• artikel konten
• item menu
• bidang masukan pencarian

 .content__article {/* Styles */} .menu__item {/* Styles */} .search__input {/* Styles */}

pengubah

Modifier adalah bagaimana kita merepresentasikan variasi dari sebuah blok. Jika Anda pernah menggunakan Bootstrap, maka contoh terbaik adalah ukuran tombol. Ukuran tombol hanyalah variasi ukuran tombol itu sendiri, yang menjadikannya pengubah:

• artikel unggulan konten
• tautan menu
• bidang pencarian dengan atau tanpa ikon

 .content__article--featured {/* Styles */} .menu__item--link {/* Styles */} .search__input--icon {/* Styles */}

Konvensi Penamaan

Tujuan utama metodologi BEM adalah membuat nama pemilih CSS seinformatif dan setransparan mungkin. Gaya BEM asli didefinisikan dengan cara ini:

Nama blok biasanya berupa satu kata seperti .header , tetapi jika Anda memiliki definisi blok yang lebih panjang maka dibagi dengan satu tanda hubung - :

 .lang-switcher {/* Styles */}

Nama elemen dimulai dengan garis bawah ganda __ :

 .lang-switcher__flag {/* Styles */}

Nama pengubah dimulai dengan garis bawah tunggal _ :

 .lang-switcher__flag_basic {/* Styles */}

Hanya ada satu aturan yang sangat penting dalam metodologi BEM - pengubah tidak dapat digunakan di luar konteks pemiliknya.

Contoh:

 .btn_big {/* Styles */}

Anda dapat menggunakan btn_big hanya jika header didefinisikan juga.

Contoh buruk:

 <div class=”btn_big”>...</div>

Contoh yang baik:

 <div class=”btn btn_big”>...</div>

Selain gaya BEM asli ini, ada skema penamaan alternatif seperti gaya Harry Roberts dan CamelCase.

Contoh gaya Harry Roberts:

 .block-name__element-name--modifier-name {/* Styles */}

Contoh gaya CamelCase:

 .BlockName__ElementName_ModifierName {/* Styles */}

Ada beberapa yang lain juga, tetapi dua ini adalah yang paling umum. Secara pribadi, saya adalah penggemar konvensi penamaan yang diusulkan oleh Harris Roberts, yang memiliki aturan berikut:

• Nama ditulis dengan huruf kecil
• Kata-kata dalam nama entitas BEM dipisahkan oleh tanda hubung -
• Nama elemen dipisahkan dari nama blok dengan garis bawah ganda __
• Pengubah Boolean dibatasi oleh tanda hubung ganda --
• Pengubah tipe nilai kunci tidak digunakan

Alasan mengapa konvensi penamaan ini terbentuk jauh lebih baik daripada yang lain adalah Anda dapat dengan mudah membedakan elemen pengubah dari yang lain. Dalam konvensi penamaan asli, pengubah akan didefinisikan seperti ini:

 .block__element_modifier {/* Styles */}

Tetapi seperti yang Anda lihat, tidak ada banyak perbedaan antara garis bawah tunggal dan ganda. Di sisi lain, tanda hubung ganda memberikan pemisahan yang bersih, dan Anda dapat melihat pengubah secara instan:

 .block__element--modifier {/* Styles */}

Contoh BEM dalam Berbagai Format

Harap dicatat bahwa selain CSS, BEM juga sangat berguna dalam mengatur JSON, XML, file pohon, atau format apa pun yang mendukung bersarang. Pikirkan metodologi BEM sebagai cara yang baik untuk membangun UI Anda.

Mari kita perhatikan HTML berikut, terstruktur dalam format BEM:

 <header class=”header”> <img class=”header__logo”> <form class=”header__search-from”> <input class=”header__search-from__input” type=”input”> <button class=”header__search-from__button” type=”button”> </form> <div class=”header__lang-switcher”></div> </header>

Hal yang sama dapat dicapai dengan menggunakan format JSON dan XML.

XML:

 <block:header> <block:logo/> <block:search-from> <block:input/> <block:button/> </block> <block:lang-switcher/> </block>

JSON:

 { block: 'header', content: [ { block: 'logo' }, { block: 'search-form', content: [ { block: 'input' }, { block: 'button' } ] }, { block: 'lang-switcher' } ] }

Organisasi Sistem File dari Proyek BEM

Di BEM, sangat penting untuk mengatur file Anda dengan cara yang benar. BEM tidak hanya memberi Anda organisasi kelas CSS yang hebat dan membuatnya benar-benar dapat dipahami, tetapi juga memberi Anda struktur file yang sangat mudah dipelihara. Mari kita ambil contoh proyek, menggunakan teknik organisasi file BEM dengan file SASS:

 blocks/ input/ __box/ --big/ input__box--big.scss input__box.scss button/ --big/ button--big.scss

Seperti yang Anda lihat di atas, hanya dengan melihat struktur subfolder di dalam folder utama Anda, semuanya jelas dan terorganisir. Dengan cara ini, tidak ada bedanya siapa yang bekerja setelah Anda atau jika Anda bekerja setelah seseorang, karena sangat mudah untuk mengikuti pola yang sama.

Membagi Proyek BEM menjadi Platform

Selain hanya mengatur file Anda menggunakan teknik metodologi BEM, Anda juga dapat membahas hal-hal yang lebih spesifik. Misalnya, jika Anda sedang membangun proyek web yang akan sepenuhnya responsif, dan klien menentukan bahwa beberapa blok di ponsel benar-benar berbeda dari pada perangkat desktop, akan lebih baik untuk membagi struktur folder BEM Anda ke dalam platform. Contoh pengaturan tombol di berbagai platform:

 common.blocks/ button/ button.scss desktop.blocks/ button/ buttons.scss mobile.blocks/ button/ button.scss

Perhatikan bahwa ini hanyalah sebuah contoh jika Anda ingin mengatur seluruh proyek Anda menggunakan metodologi BEM. Pohon file dengan struktur BEM tidak wajib menggunakan BEM dengan benar, Anda dapat menggunakan BEM hanya di beberapa segmen proyek. Sejauh ini saya belum menggunakan organisasi struktur file BEM yang ketat ini di mana setiap elemen dan pengubah file telah dibuat. Sebagai gantinya, saya hanya membuat struktur file untuk blok yang memiliki deklarasi elemen dan pengubahnya.

BEM dalam Praktek

Karena Anda sekarang sudah familiar dengan konvensi penamaan, saya akan mendemonstrasikan metodologi BEM dalam praktiknya. Katakanlah kita memiliki kode HTML ini dalam tindakan:

 <a class=”btn btn--big btn--primary-color” href=”#” title=”Title”> <span class=”btn__price”>$3.99</span> <span class=”btn__text”>Product</span> </a>

Dengan markup CSS berikut diterapkan:

 .btn__price {/* Styles */} .btn__text {/* Styles */} .btn--big {/* Styles */} .btn--primary-color {/* Styles */}

Sekarang, jangan menyesatkan. Dalam contoh kami sejauh ini, kami hampir selalu memiliki blok, elemen, dan pengubah, yang tidak selalu harus demikian.

Sebagai contoh, katakanlah kita memiliki sebuah blok bernama person . Seseorang memiliki kaki dan tangan, bisa juga perempuan atau laki-laki. Jika kita ingin mendefinisikan orang laki-laki dengan tangan kanan akan terlihat seperti ini:

 .person--male__hand--right {/* Styles */}

Sekarang Anda dapat melihat arti sebenarnya dari BEM. Kami mendefinisikan seseorang yang pengubahnya adalah jenis kelamin. Karena tidak masalah apakah seseorang laki-laki atau perempuan, ia memiliki tangan, dan tangan adalah elemen. Dan lagi, setiap orang dapat memiliki tangan kanan atau kiri yang lagi-lagi merupakan modifikator.

Dalam kasus lain, jika kita ingin mendefinisikan orang umum dengan satu tangan, kita akan melakukannya seperti ini:

 .person__hand {/* Styles */}

Seperti yang Anda perhatikan, setelah Anda merasa nyaman dengan BEM, sangat mudah untuk menyusun struktur CSS dan HTML Anda dengannya.

Menggunakan BEM dengan Praprosesor CSS

Secara pribadi, saya tidak dapat membayangkan memulai proyek baru tanpa menggunakan salah satu praprosesor CSS. Seperti yang Anda semua tahu, praprosesor adalah hal yang hebat dan mereka memberi kami banyak manfaat, dan yang paling penting mereka sangat cocok dengan metodologi BEM.

Dalam contoh berikut, Anda dapat melihat contoh paling umum dari BEM, dalam kombinasi dengan SASS:

 .person { &__hand {/* Styles */} &__leg {/* Styles */} &--male { /* Styles */ &__hand { /* Styles */ &--left {/* Styles */} &--right {/* Styles */} } &__leg { /* Styles */ &--left {/* Styles */} &--right {/* Styles */} } } &--female { /* Styles */ &__hand { /* Styles */ &--left {/* Styles */} &--right {/* Styles */} } &__leg { /* Styles */ &--left {/* Styles */} &--right {/* Styles */} } } }

Kode SASS akan dikompilasi menjadi CSS berikut:

 .person__hand {/* Styles */} .person__leg {/* Styles */} .person--male {/* Styles */} .person--male__hand {/* Styles */} .person--male__hand--left {/* Styles */} .person--male__hand--right {/* Styles */} .person--male__leg {/* Styles */} .person--male__leg--left {/* Styles */} .person--male__leg--right {/* Styles */} .person--female {/* Styles */} .person--female__hand {/* Styles */} .person--female__hand--left {/* Styles */} .person--female__hand--right {/* Styles */} .person--female__leg {/* Styles */} .person--female__leg--left {/* Styles */} .person--female__leg--right {/* Styles */}

Jika Anda ingin melangkah lebih jauh, Anda dapat menggunakan mixin SASS yang praktis untuk BEM:

 /// Block Element /// @param {String} $element - Element's name @mixin element($element) { &__#{$element} { @content; } } /// Block Modifier /// @param {String} $modifier - Modifier's name @mixin modifier($modifier) { &--#{$modifier} { @content; } }

Dan Anda dapat menggunakannya seperti ini:

 .person { @include element('hand') {/* Person hand */} @include element('leg') {/* Person leg */} @include modifier('male') { /* Person male */ @include element('hand') { /* Person male hand */ @include modifier('left') { /* Person male left hand */ } @include modifier('right') { /* Person male right hand */ } } } }

Yang akan menghasilkan output CSS berikut:

 .person__hand { /* Person hand */ } .person__leg { /* Person leg */ } .person--male { /* Person male */ } .person--male__hand { /* Person male hand */ } .person--male__hand--left { /* Person male left hand */ } .person--male__hand--right { /* Person male right hand */ }

Saya tahu bahwa kemungkinan besar Anda tidak akan memiliki use case selama ini, tetapi ini adalah contoh yang bagus tentang bagaimana BEM digunakan dan mengapa itu sangat kuat, baik dalam proyek skala kecil maupun besar.

Memulai Proyek BEM Anda

Seperti yang dijelaskan dalam dokumentasi BEM resmi, cara termudah untuk memulai proyek BEM baru Anda adalah dengan menggunakan repositori GIT yang ada. Cukup gunakan perintah klon Git:

 $ git clone https://github.com/bem/project-stub.git

Selanjutnya, buka direktori yang baru dibuat dan instal semua dependensi:

 $ npm install

Semua dependensi yang diperlukan akan diinstal:

Bangun proyek menggunakan ENB:

 $ node_modules/.bin/enb make

Jalankan mode server untuk pengembangan:

 $ node_modules/.bin/enb server

Akibatnya, pesan berikut muncul:

 Server started at 0.0.0.0:8080

Sekarang, ini berarti server sudah aktif dan berjalan. Anda sekarang dapat memeriksa hasilnya di alamat ini:

 http://localhost:8080/desktop.bundles/index/index.html

Seperti yang Anda lihat, ada banyak elemen yang sudah dibuat yang didefinisikan di dalam file bemjson yang terletak di sini:

 project-stub/desktop.bundles/index/index.bemjson.js

Anda dapat melihat dan menjelajahi struktur file saat ini yang menghasilkan semua HTML itu, yang Anda lihat di file index.html localhost Anda. Kami akan mengubah file ini untuk mendapatkan proyek BEM "Orang" kami yang telah kami jelaskan di bab sebelumnya. Anda dapat menghapus (atau mengomentari) seluruh kode dari file index.bemjson.js , dan menggantinya dengan yang ini:

 module.exports = { block: 'page', title: 'Person BEM', favicon : '/favicon.ico', head : [ { elem : 'meta', attrs : { name : 'description', content : '' } }, { elem : 'meta', attrs : { name : 'viewport', content : 'width=device-width, initial-scale=1' } }, { elem : 'css', url : 'index.min.css' } ], scripts: [{ elem : 'js', url : 'index.min.js' }], content: [ { block: 'person', content: [ { elem: 'male', content: [ { elem: 'leg', mods: {side: 'left'}, content: 'Male person leg -- left' }, { elem: 'leg', mods: {side: 'right'}, content: 'Male person leg -- right' }, { elem: 'hand', mods: {side: 'left'}, content: 'Male person hand -- left' }, { elem: 'hand', mods: {side: 'right'}, content: 'Male person hand -- right' } ] }, { elem: 'female', content: [ { elem: 'leg', mods: {side: 'left'}, content: 'Female person leg -- left' }, { elem: 'leg', mods: {side: 'right'}, content: 'Female person leg -- right' }, { elem: 'hand', mods: {side: 'left'}, content: 'Female person hand -- left' }, { elem: 'hand', mods: {side: 'right'}, content: 'Female person hand -- right' } ] }, ] } ] };

Sekarang, HTML berikut akan dihasilkan:

 <div class="person"> <div class="person__male"> <div class="person__leg person__leg_side_left"> Male person leg -- left </div> <div class="person__leg person__leg_side_right"> Male person leg -- right </div> <div class="person__hand person__hand_side_left"> Male person hand -- left </div> <div class="person__hand person__hand_side_right"> Male person hand -- right </div> </div> <div class="person__female"> <div class="person__leg person__leg_side_left"> Female person leg -- left </div> <div class="person__leg person__leg_side_right"> Female person leg -- right </div> <div class="person__hand person__hand_side_left"> Female person hand -- left </div> <div class="person__hand person__hand_side_right"> Female person hand -- right </div> </div> </div>

Seperti yang Anda lihat dari kode di atas, skema pengkodean BEM default digunakan dalam skenario ini karena kami hanya menggunakan pengaturan default yang disediakan BEM kepada kami. Ada lebih banyak perintah dan opsi yang dapat Anda jelajahi dan gunakan, seperti membuat halaman baru, memblokir, atau memodifikasi BEM HTML. Saya tidak akan membahasnya terlalu dalam, dan semuanya dapat ditemukan di dokumentasi resmi BEM.

Keuntungan dan Kekhawatiran

Keuntungan

• BEM sangat baik untuk perawatan. Berapa kali Anda harus bekerja setelah seseorang dalam proyek skala besar dan Anda terlalu takut untuk mengubah apa pun tanpa sesuatu yang tidak diketahui runtuh? Saat menggunakan BEM, Anda tahu tujuan pasti dari elemen tersebut dan di blok mana elemen itu muncul.
• Nama kelas logis dan intuitif, dan setiap anggota tim tahu apa yang dilakukan elemen tersebut di situs web. BEM memberi semua orang di sebuah proyek sintaks deklaratif yang dapat mereka bagikan sehingga mereka berada di halaman yang sama.
• BEM menghilangkan pemilih CSS bersarang. Setiap elemen HTML memiliki kelas CSS sendiri, dan dari namanya Anda tahu apa tujuannya. Satu pemilih untuk mengatur semuanya .

Kekhawatiran dan Kesalahan Umum

• Jangan masuk terlalu dalam ke sarang. Aturan utama tidak boleh menggunakan lebih dari dua level orang tua dan anak.
• Hati-hati dengan di mana Anda memulai cakupan blok Anda. Kesalahan umum di sini adalah ketika pengembang menggunakan blok, tetapi dia tidak menyadari bahwa pada titik pengembangan selanjutnya blok yang sama akan memiliki blok induk utama yang mungkin akan melanggar aturan dengan bersarang.
• Hindari SASS @extend. Mengutip Harry Roberts tentang ini:

Anda dapat membuat lebih banyak kombinasi dalam tampilan dengan tidak 'mengikat' kelas bersama-sama di Sass. HTML memiliki jejak kertas yang jauh lebih baik karena Anda dapat melihat setiap kelas bertindak pada bagian DOM. CSS Anda tetap jauh lebih ramping karena Anda tidak perlu membuat kelas placeholder baru (atau kelas manifes yang menggabungkannya) setiap kali Anda ingin membuat bagian baru dari UI.

Kesimpulan

Ketika saya melihat skema pengkodean BEM untuk pertama kalinya, pikiran pertama saya adalah:

Kelas-kelas ini terlalu panjang untuk ditulis dan dibaca.

Tapi setelah mencobanya, sekarang saya tidak bisa membayangkan memulai proyek baru tanpa menggunakannya. Bagi saya, BEM secara besar-besaran meningkatkan kemampuan pemeliharaan kode saya, dan saya pasti dapat mengatakan bahwa setiap pengembang yang akan "dilemparkan" ke dalam proyek berbasis BEM akan sangat cepat mengejar seluruh struktur kode.

Terlepas dari semua ini, ada banyak diskusi di jejaring sosial tentang BEM. Ada yang mengatakan BEM tidak bagus, bertanya-tanya mengapa mereka harus menulis kelas nama yang panjang daripada hanya menggunakan elemen bersarang HTML default. Yah, tidak ada yang mengatakan bahwa Anda harus menyukai BEM, tetapi kenyataannya adalah bahwa sebagian besar pengembang front-end menerimanya dan menganggapnya sangat berguna.