This month i finally got assigned to front-end project at my work. It was nothing big. We had to add one subpage to one of our portals, due to incoming conference. During this week I have learned few things that I have never bumped into before and I find them quite important. Todays topic - BEM.

BEM

Never before I have really considered css arrangement before. I was aware of css selectors specificity, and why I should avoid using id and complex selectors but i didn’t know how exactly do this. My coworkers said that in our project we will use BEM, and told me to familiarize myself with the idea. So I went to http://getbem.com/. I was amazed how easily this approach solves my css struggles.

BEM is shortcut for Block Element Modifier. Basically it is all about using almost only classes in style-sheet and giving class names consisting of name of block in which element exist, element name and optionally modification. For example: .form__submit--disabled. Class names might seem long but they are so descriptive that it is completely clear what they refer to. When using css preprocessors they become very convenient. Check it out! This is only one page article to read . Also at introduction section You can find reference to other methodologies.

Good luck with tidying Your css up :)