Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

The approaches laid out seem reasonable, but it's hard not to feel as if the web dev community has moved on to using LESS and SASS as a means of addressing some of the same issues.


These approaches are not incompatible with SASS/LESS. If anything, learning them is more important now that we have preprocessors.


If that's the case, I would be interested to see a tutorial on OOCSS that assumes you're already using Sass, and skips explaining the parts of OOCSS that Sass already solves. I hadn't really taken OOCSS seriously because I thought Sass solved everything that OOCSS did.


There's a good starting tutorial in the SMACSS book discussing the integration of SMACSS and preprocessors. I'll see if I can make some time to write a more in-depth treatment discussing pre-processors and OOCSS. If anybody already knows of one, I'd love to see it as well!


What part of OOCSS do you think SASS already solves? Perhaps there's some disagreement about this that can help me answer your question.


I would assume (perhaps wrongly?) he's referring to mixins, which allow you to easily re-use chunks of declarations (or objects). The pure OOCSS alternative to this is to separate your classes more.

Quick example, OOCSS way of making the notion of 'fancifying a thing', is to make a separate class to represent 'fanciness'.

  .fancy { color: hotpink; font-style: italic }
  .thing { width: 100px; height: 40px }
Then in your HTML apply both classes to make a fancy thing: <div class="thing fancy">ta-da</div>

Whereas in SASS you could do that with a mixin instead:

  @mixin fancy { color: hotpink; font-style: italic }
  .fancy-thing { width: 100px; height: 40px; @include fancy }
And in your HTML, you then apply a single class: <div class="fancy-thing">bam</div>

There are advantages of both, and there are clearly variations you could make on the SASS version (i.e. you could make a separate thing mixin too, then mix both into a single fancy-thing class - making the thing concept as reusable as in the CSS version).

Personally I like the level of understanding that doing it the CSS way brings (note this is also an example of the separating 'skin' from 'structure' idea, which I think is very valuable). You could argue that it could lead to class-itis though. Swings and roundabouts.


I agree that preprocessors can address some of the issues that OOCSS sets out to address. At the same time I think that an over reliance on preprocessors can result in the same set of problems. Preprocessing can easily result in bloated, highly repetitive CSS and deeply nested selectors.

I personally love using SASS and in fact (as mentioned by philipwalton) find it highly compatible with OOCSS. However, as with any tool, I advocate for thoughtful and critical implementation. I tend to suggest that anytime the final CSS file contains a large amount of repetitive styles or deeply nested selectors it's time to consider refactoring.


Developers are always going to combine approaches to what best suits them. Using abstract, extendable naming conventions and abstracting out each module/widget into separate files organised into folders for compilation via LESS or SASS is an ideal combination for me. I think every front-ender needs to pick and choose ideas from multiple methodologies, otherwise there will always be issues with maintainability when building large sites.

More important than any one methodology is consistency and documentation, no one wants to pick up a project with 'genius' abbreviated class names without some example markup!




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: