BEM (Block, Element, Modifier) - Suka Code
Di situs brosur yang lebih kecil, cara Anda mengatur gaya biasanya tidak menjadi perhatian besar. Anda masuk ke sana, menulis beberapa CSS, atau bahkan mungkin SASS. Anda mengkompilasi semuanya menjadi satu lembar gaya dengan pengaturan produksi SASS, dan kemudian Anda menggabungkannya untuk mendapatkan semua lembar gaya dari modul menjadi paket rapi yang bagus.
Namun, ketika datang ke proyek yang lebih besar dan lebih kompleks, bagaimana Anda mengatur kode Anda adalah kunci efisiensi setidaknya dalam tiga cara ini: ini memengaruhi berapa lama Anda menulis kode, berapa banyak kode yang harus Anda tulis. tulis dan berapa banyak yang harus dilakukan browser Anda untuk memuat. Ini menjadi sangat penting ketika Anda bekerja dengan tim pembuat tema, dan ketika kinerja tinggi itu penting.
Metodologi
Ada banyak metodologi di luar sana yang bertujuan untuk mengurangi jejak CSS, mengatur kerja sama di antara pemrogram, dan mempertahankan basis kode CSS yang besar. Ini terlihat jelas dalam proyek-proyek besar seperti Twitter, Facebook dan Github , tetapi proyek-proyek lain sering kali berkembang menjadi beberapa status “File CSS yang sangat besar” dengan cukup cepat.
OOCSS
Memisahkan wadah dan konten dengan "objek" CSS
SMACSS
Panduan gaya untuk menulis CSS Anda dengan lima kategori untuk aturan CSS
SUITCSS
Nama kelas terstruktur dan tanda hubung yang bermakna
Atom
Memecah gaya menjadi potongan atom, atau tak terpisahkan
Mengapa BEM di atas yang lain?
Tidak peduli metodologi apa yang Anda pilih untuk digunakan dalam proyek Anda, Anda akan mendapatkan keuntungan dari keuntungan dari CSS dan UI yang lebih terstruktur. Beberapa gaya kurang ketat dan lebih fleksibel, sementara yang lain lebih mudah dipahami dan diadaptasi dalam tim.
Blok, Element, dan Modifier
Anda tidak akan terkejut mendengar bahwa BEM adalah singkatan dari elemen kunci metodologi - Block, Element dan Modifier.
Blok
Entitas mandiri yang memiliki arti tersendiri.
Contoh
header, container, menu, checkbox, input.
Elemen
Bagian dari blok yang tidak memiliki arti mandiri dan terikat secara semantik ke bloknya.
Contoh
menu item, list item, checkbox, caption, header title.
Modifier
Bendera di blok atau elemen. Gunakan mereka untuk mengubah penampilan atau perilaku.
Contoh
disabled, highlighted, checked, fixed, size big,color yellow.
Sekian tutorial kali ini mengenai BEM (Block, Element, Modifier). Semoga bermanfaat bagi anda.
Sumber : https://getbem.com/
Suka Code Blog adalah website dengan kumpulan konten seputar Game Development, Web Programming, Android Programming, Windows Programming, dan lain-lain.
Belum ada Komentar untuk "BEM (Block, Element, Modifier) - Suka Code"
Posting Komentar