Sebelum membahas tentang Awesome-BEMCSS itu apa, saya akan coba bahas sedikit mengenai BEM.
BEM atau yang merupakan singkatan dari Block-Element-Modifier sesungguhnya bukanlah sebuah CSS Framework layaknya bootstrap atau foundation yang sering kita dengar di dunia per-CSS-an.
BEM hanya sebuah aturan dalam penamaan class di dalam CSS, sebagaimana beberapa aturan-aturan lain yang mungkin kita kenal seperti OOCSS, atomic, SMACSS, dll.
BEM sendiri mengusung konsep yang sederhana namun mudah dipahami meskipun tidak terlalu mudah pada saat implementasi (*paling tidak saya merasa kesulitan pada awalnya).
BEM seperti kepanjangan dari namanya, membagi konsep aturannya ke dalam 3 bagian Block-Element-Modifier.
Block adalah setiap bagian yang bisa berdiri sendiri tanpa punya dependent dengan parent-nya.
BEM tidak mengatur pemberian nama class pada bagian Block, paling tidak buat nama yang meaningful, sesuai dengan fungsinya dan tetap sesimpel mungkin sih menurut saya.
Element sendiri merupakan bagian dari Block, bagian yang memiliki ketergantungan dengan Block diatasnya.
BEM memiliki aturan dalam pemberian nama Element, yakni block__element. Yang artinya setiap Element akan memiliki prefix Block didepannya dengan menggunakan double underscore sebagai sekatnya.
Modifier merupakan bagian di BEM yang berfungsi memberikan flag pada Block atau Element. Flag ini bisa berkaitan dengan perubahan state, behaviour ataupun appearance.
BEM mengatur penamaan Modifier ini dengan block–modifier atau element–modifier.
Demikian penjelasan singkat mengenai BEM CSS Convention,
Selanjutnya kita akan bahas Awesome-BEMCSS.
Awesome-BEMCSS adalah simpel framework yang saya kembangkan sendiri (*dengan bantuan dari teman-teman tentunya) berdasarkan BEM convention.
Sampai post ini di publish, framework ini belum mendukung sebagian besar kebutuhan Anda seperti yang biasa ditemukan pada Framework CSS pada umumnya, tapi bahwa tujuan pembuatannya memang bukan pada kesempurnaan atau kelengkapan fitur namun lebih kepada edukasi dan pengenalan BEM kepada mereka yang belum pernah menggunakan sekaligus menjadi contoh sederhana implementasi BEM pada sebuah project.
Anda bisa melihat halaman demo dari Awesome-BEMCS disini :
https://mazipan.github.io/demo/awesome-bemcss/
Anda bisa temukan juga Awesome-BEMCSS ini di KaryaLokal dari Codepolitan disini :
http://www.karyalokal.com/awesome-bem-css-framework
Sementara untuk source code Anda bisa temukan disini :
https://github.com/mazipan/awesome-bemcss
Silahkan dipelajari dan bila bisa berkontribusi akan sangat membantu saya.
Karena tujuannya adalah edukasi maka pada post selanjutnya akan coba saya jelaskan step by step membuat Awesome-BEMCSS ini.
Semoga diberi keleluasaan waktu untuk meneruskan post selanjutnya :-).
Demikian sharing dari saya, semoga bermanfaat
Irfan Maulana's Journal 