Awesome BEM CSS – Simple CSS Framework with BEM Convention

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

mazipan-signature

Be a good reader, leave your comment please.

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s