SEM.js – Decoupling the Front-end with Modular CSS
Back in November, I gave a new talk for the first time at the local JavaScript meetup group, SEM.js. I think it’s probably my best talk yet, and after a few more Lunch & Learn run throughs, I think I’ve really been able to tighten it up!
I’ll be giving it again next week at CodeMash and am optimistic that it could be my best presentation yet!
You can read the session abstract below the video…
CSS is hard. It’s a simple language, but getting it right and avoiding specificity hell can be a challenge if you don’t have the right framework to back you up. Especially in large scaling projects, you might start adding ID selectors here and !important properties there and the next thing you know you’ve backed yourself into a corner where even the smallest of UI changes will take hours to work out. Ew.
Or how about this? Ever jump into a project and find that even the slightest markup change results in broken JavaScript AND sometimes even broken backend feature tests?! WTF. Ew.
This talk will look at how taking a modular, object-oriented approach to CSS can turn frontend woes into frontend wins. We’ll examine modern CSS approaches like OOCSS, SMACSS, and BEM and demonstrate how they will help to not only decouple your CSS styles and reduce specificity conflicts, but how they will also help to decouple your CSS and HTML from your JavaScript and feature specs.