View http://www.kapowaz.net/articles/cargo-cult-css
I’ve been sitting on this article for a while but finally was able to give it a good, focused read. If I’m honest, there are many great points to consider. I say that because at first glance it feels very anti-“modern” CSS, but what good is something if it hasn’t been questioned repeatedly (even when the masses have stopped)?
I think a lot about CSS. Internally I continue to struggle with the balance of OOCSS/SMACSS/etc. insofar as not being quite settled (again: personally) with my choices on whether to use more classes (inherently adding to the complexity of the HTML and more) or use more CSS (which results in larger documents). I told myself I was overthinking it and stuck close with SMACSS to the best of my ability, although not fully.
I have kind of my own adaptation of SMACSS when I write CSS and it’s done the job (more than) well for the past couple years. My workflow felt good, breaking things up felt organized, I was able to progress through larger projects with relative ease, but something still (to this day) doesn’t sit right. I can’t emphasize enough how this is personal to my experience and is likely a result of not reading SMACSS for a third time to find a likely solution to my underlying pain points, but I digress.
The one part of this article in particular that really hit home for me was this particular code comparison:
<span style="display: block; font-family: Arial, sans-serif; font-size: 11px; color: blue; border-style: solid; border-color: blue; border-width: 2px; padding: 20px;">Here's a box.</span>
<span style="display: block; font-family: Arial, sans-serif; font-size: 11px; color: blue; border-style: solid; border-color: blue; border-width: 2px; padding: 20px;">Here's another box.</span>
<span style="display: block; font-family: Arial, sans-serif; font-size: 11px; color: blue; border-style: solid; border-color: blue; border-width: 2px; padding: 20px;">Here's yet another box.</span>
<span class="display-block blue-box font-arial color-blue solid-blue-border padding-20">Here's a box.</span>
<span class="display-block blue-box font-arial color-blue solid-blue-border padding-20">Here's another box.</span>
<span class="display-block blue-box font-arial color-blue solid-blue-border padding-20">Here's yet another box.</span>
The author admitted to it being an extreme example, and it is, but there is a fine grain of truth there that I think exposes some of my personal issues with using a ton of classes so as to be adaptive and increase maintainability. Naturally it all comes down to the actual class names you’re using, but I hope we can understand the point the author is trying to make.
To this day I don’t have a working answer that’s any better than the genius approaches to CSS I’ve had the privilege of reading about, but I think the fact that we’re still talking about ways to implement a foundational approach to writing and maintaining CSS is awesome. Preprocessors shook up that world like never before and I think it’s the best thing that’s ever happened to CSS. It’s opened up the doors for using things like partials, mixins, functions, and more to level up our approach to CSS, and until we’ve got more time under our belts actually using these approaches we can’t say we’ve found the solution.
I’ve started to focus more on the efficiency aspect of writing CSS. When I’m working on a project I haven’t touched in six months I want to be able to rattle off new HTML without having to sift through classes to make sure I’m using the right ones at the right time. I’ve found that to be a big bottleneck for me in recent months. I realize it likely comes down to my adaptation of strategy resulting in this bottleneck, but it’s something on my mind without a doubt.
I don’t know if I’ll ever find the balance of OOCSS I’m really looking for, but I think it’s getting better with each project I take on, so that’s a good thing. Articles like this keep me on my toes.