Shuvo Habib
Jul 12, 2017 · 2 min read

Learn CSS; BEM Methodology ; Bonus: Two complete Free BEM CSS Template with this tutorial :3

Well , I thought of learning BEM for a few times through articles or tutorials. And as expected each and every approach of my learning without practicing went in vain. So I decided to create Two complete HTML template using BEM methodology. I’m done with it. Now I’m confident I know BEM. :3

Github Link of the BEM Templates:

Do whatever you want with these Template , Cheers. :3 Play around it, make a new one better than it; You’ll feel better .

The Block, Element, Modifier methodology also known as BEM is a popular methodology for naming classes in HTML and CSS. BEM is developed by the team at Yandex, its goal is to help developers better understand the relationship and maintaining HTML and CSS in a better way given project.

Here’s an example of what a CSS developer writing in the BEM style will prefer to write:

/* Block component */ .sidebar{} /* Element that depends upon the block */ .sidebar__title{} /* Modifier that changes the style of the block */.sidebar-left{} .sidebar-right{}

In this CSS methodology a block is a top-level component, for example a button: .sidebar { }. This block is actually a parent. Child items, or elements, can be placed inside and these are denoted by two underscores following the name of the block like .sidebar__title { } or .sidebar__desc. And modifiers can manipulate the block so that we can theme or style that particular component. This is done by putting two hyphens to the name of the block just like sidebar--right.

The markup will look like this:

<div class="sidebar sidebar--big sidebar--small" href="#">
<h2 class="sidebar__title">Big Sidebar</h2>

A common argument against BEM is that it looks weird; I dare say that if you shy away from code based purely on its looks then you’re often missing the point. Though it looks weird but serves a valid purpose of making the code more readable and maintainable. So you shouldn’t ignore it.

I agree that BEM does look weird, but the power it brings far outweighs any negatives to do with its appearance by an order of magnitude…

So that’s BEM a highly useful, powerful and simple naming convention in making front-end code easier to read and understand, easier to work with, easier to scale, more robust and explicit and a lot more strict and finally making your code more maintainable.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store