Short thoughts about BEM CSS

I'm a Windows Phone user and I really love their mobile OS. I owned a Lumia 920 and now I use the bigger and thinner Lumia 830, a phone that I absolutely love. In fact, I like it so much that it made to want to recreate it with HTML and CSS. And I actually did it: Lumia 830 - HTML version.

The whole project is on Github if you want to check out the source. So far it concerns mostly the visual aspect and simple screensaver with dynamic time but I'm planning to add some basic functionality as well, in an attempt to imitate the Windows Phone Mobile OS.

Now what's this got to do with BEM CSS you might ask and the answer is rather simple: after doing the CSS structure and naming the classes in my personal style, with a hybrid approach, based mostly on my experience, combined with various tips read along the years, I was not completely satisfied with the result.

To my shame, I found out only about BEM a week ago. I did some quick reading about the subject: standing for Block Element Modifier, BEM is a styling methodology aiming to help you achieve reusable components and easier code sharing. It seemed interesting, albeit rather verbose, so today I decided to give it a try and quickly rewrite the Lumia project's CSS.

To my surprise, not only I found it useful, but I actually enjoyed using it. Although the resulting class names are quite long, it's much, much easier to name things and the block / module based naming approach makes things much less likely to conflict with other 3rd party styles.

The funny thing is I actually used a similar naming approach at work recently, a much more rudimentary one, specifically to avoid class name clashing. After using BEM tonight I already have ideas on how to improve everything I did.

Are there downsides to it? Of course. I don't have much experience with BEM, having just tried it, but I do have experience with large projects and looking back, I believe BEM would have been very helpful with them. It can be used for smaller things as well although the larger, collaborative projects are where it shines.

I will definitely use it again in the future but before making an overall decision, I need to check out other methodologies as well. After having my eyes open about their utility, I'm planning on studying OOCSS and RSCSS.

Fortunately, web development is not the Highlander. In the end there can be more than one and knowing about all of them surely cannot hurt.