4 ms·

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

roryokane 14y ago
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.
- cwebbdesign 14y ago
  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!
- philipwalton 14y ago
  What part of OOCSS do you think SASS already solves? Perhaps there's some disagreement about this that can help me answer your question.
  - nilliams 14y ago
    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.

roryokane 14y ago

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.

cwebbdesign 14y ago
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!
philipwalton 14y ago
What part of OOCSS do you think SASS already solves? Perhaps there's some disagreement about this that can help me answer your question.
- nilliams 14y ago
  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.