I have for a while used many a methodology for CSS, from my early years of just throwing it together, to OOCSS then SMACSS, I have now settled onto BEM and do believe it is a great way to go, especially for future scope of projects.

Lets look back

I use to write CSS when I was at university and then at my first job a lot like this: [css] #column { color:red; } a.columnlink { color:blue; } [/css] Even this short snippet gives an insight into what was going on, no structure, no methodology. Just make it work. It worked and many projects I look back at, that are still up and running, are alive and well and work fine. This is not in doubt, it works, it looks nice then it is fine. However it can always be improved, unless your a CSS demi-god then you're cool buddy, keep being perfect. Never be harsh if the site works, we all work differently so don't be that guy. Part of my make-up is the need to forever revise and learn. And eventually this lead me to going with a technique called "compartmentalising". The idea being blocking up all html into blocks and making the css relevant to that (an early pre-cursor to BEM you might clock on to). So imagine html like this: [html] <div class="block-news"> <div class="top"> <h2>Heading</h2> </div> <ul> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> </div> [/html] This lead my CSS to start looking like this: [css] .block-news {} .block-news .top {} .block-news .top h2 {} .block-news ul {} .block-news ul li {border-bottom:1px solid black; padding:10px;} .block-news ul li a {color:red;} [/css] This worked pretty well in all honesty and many projects I found would fly together, however it starts to highlight the problem that BEM eventually tries to solve. What if you need to override the bottom rule? where should the variation come from? Say we have block-news now on a page where the links should now be blue, what would be appropriate for adding a modifier of a class? Say our html class .block-news has an extra class on it called: variant-blue then our css to override that rule would be like so: [css] .block-news {} .block-news .top {} .block-news .top h2 {} .block-news ul {} .block-news ul li {border-bottom:1px solid black; padding:10px;} .block-news ul li a {color:red;} .block-news.variant-blue ul li a {color:blue;} [/css] This is just for one variant, for any instance this has other variants, the rules are going to need to be created to override the rule that would be picked up. This way of working works well on smaller scale projects and would be a way I would come back to this for smaller projects (scratch that, I probably would not) in future but of course the title of this post says otherwise!

OOCSS (Object orientated CSS)

A great article by smashing magazine showcase's OOCSS. For a little while I jumped ship completely and tried OOCSS, which worked quite alright and would be something I would actually comeback to incorporate in my SASS files as I like the idea of defining styles then applying them in html. In SASS these days I would define the common styles as a mixin then attach them to the CSS class (a different blog post for another say). Anyway my css for OOCSS would look like this: [css] .border-color-big {border-bottom:2px solid black;} .border-radius-3 {border-radius:3px;} .bckgd-red {background-color:red;} [/css] This worked ok but it became a bit unmanageable for me as I was adding too many classes when I really broke down styles to their utmost smallest. Then I found if I combined too many styles into a class, then it would be too much styles for one class and certain areas of the site that did not need some of the styles in the class would require me to either override with an abstract class name and then style or go back through and strip the class down and separate out. It was a little bit difficult to know where to go in terms of how much style a class could have, you could have a class for every single CSS style, imagine the html then: [html] <div class="block-news border-btm-green bckgrd-blue border-radius "> <div class="top border-top-green overflow central"> <h2 class="font-size-100">Heading</h2> </div> </div> [/html] This is just a short and extreme example but highlights how far down OOCSS it could get, now I know you can be a little more cute and combine styles, but again, you run into where rules overlap and you need to create variations of classes and their styles.

SMACSS

SMACSS (Scalable and Modular CSS). Now this is not a definitive methodology that you need to adhere to strictly as it's more a guide rather, one of the key things I took from it was having a base styling section of CSS, so I covered all inputs, pre, p, ul, ol, placeholders, active, hover styles in a section so the site has base styles, then styles by sectioning out header, footer sections and eventually blocked out styling for sections of html (similar to the compartmentalising I mentioned earlier). Now this is a methodology I should've learnt to begin with as this is in my opinion the base level of methodology everyone should at least be aware of as it just works well and I think you should work with SMACSS. However I eventually started to notice that all throughout these different ways of working, I never once stopped to think about the problem of future scope. I was always extending styles, too much specificity and use of ID selectors meant that my stylesheets would look fine when they first went live but eventually after phase 2,3,4 and 5 had been rolled out the stylesheet had grown and become a mesh of other developers CSS, which was to override with more CSS or more specificity. It became quite notable that I could solve the problem by looking at how to write my CSS.

In steps BEM

So BEM (Block, Element, Modifier if you don't wish to follow the link), is another methodology and is an interesting concept in how to approach your layout and styling. It's main approach is in how you tackle naming conventions and turning your HTML code into segments/components (naming conventions), or in their terminology: Blocks (similar to my compartmentalising with an earlier approach to my CSS). Now the part that had me interested was the naming conventions of classes. So lets look at some html from earlier but in BEM form: [html] <div class="news news--black"> <div class="news__top"> <h2 class="news__heading">Heading</h2> </div> <ul class="news__ul"> <li class="news__li"><a class="news__link news__link--active" href="#">link</a></li> <li class="news__li"><a class="news__link" href="#">link</a></li> </ul> </div> [/html] Now as you can see there is a lot more classes in the html and it might make you feel uncomfortable, don't worry. That feeling is a lot like the feeling other developers get when looking at your CSS :) So this is probably one of the negatives of BEM is that it adds a truck load of classes to your html markup which you could deem as ugly but if you've come from OOCSS then this is a seamless transition as that methodology can end up with more! But the idea is that you create blocks (in our example its the
.news
class) of html and within the blocks are your elements (
.news__heading, .news__link
would be elements and modifiers (
.news__link--active
). This enables you to have only one CSS class for everything, including your variants. Now the only worry is order, not power. So let's look at the CSS: [css] .news {} .news--black {} .news__top {} .news__heading {} .news__ul {} .news__li {} .news__link {} .news__link--active {} [/css] It's quite neat I think, once you get over the super long class names (they can get long, think Zend class names if you're a backender). What I can tell you from experience is future scope using this methodology really does work when using BEM. I can't say it any more plain, if you're in big teams or working on huge projects, I would advise on having a look at BEM. It does help and comes from experience of over 100 sites I have worked on, the issue always returns to expansion of the same rulesets, you are always creating more powerful CSS rules to overwrite the previous incarnation. With BEM it lets you focus more on order, literally the more expansive the rule (say a class with a modifier e.g. .class--modifier) the further down the page it goes. The only fallback you have to content with is naming conventions, which has always been around for everyone. Good luck.

Monthly Archives: August 2014

CSS class names – BEM wins

I have for a while used many a methodology for CSS, from my early years of just throwing it together, to OOCSS then SMACSS, I have now settled onto BEM and do believe it is a great way to go, especially for future scope of projects. Lets look back I use to write CSS when

Read more