Comparing code for OOCSS and Atomic CSS

atomic-vs-oocss.html

<!--
Example: A simple list component with each item as a block one below other with some padding and border.
-->

<!-- Atomic CSS -->
<ul class="MB(baseSpacing)  Bgc(#0280ae)">
  <li class="P(halfBaseSpacing) BdB(1px)"></li>
  ...
</ul>

<!-- OOCSS
The styles have been defined in CSS. Eg.
.block-list { margin-top: $base-spacing; background-color: #0280ae; }
.block-list > li { padding: $half-base-spacing; border-bottom: 1px; }
-->
<ul class="block-list">
  <li></li>
  ...
</ul>

Hey, thanks @thierryk for that explanation. Taking further your examples of media object and grid, I have a question - Don't you think, seeing the markup should quickly convey what the visual structure will finally be when rendered?
Seeing the ACSS HTML blocks, I would say the brain would need to do more work in order to recreate an image of the final output in comparison to if I just see a Media or line class.

Also, I just realised that ACSS requires the developer to be more well-versed with CSS and its quirks because what he has in his hands are essentially individual CSS properties. And he needs a solid understanding of each property to be able to combine them to create visual structures. Whereas in OOCSS, he would have classes available that can abstract those quirks & other complex bits.

@chinchang this is not a real concern if you offer a style guide that is component based—where devs can copy/paste html snippets from. Imagine this for example:

<!-- Media Object -->
<div class="Ov(h)">
  <img class="Fl(start) W(20%) Mend(10px)" src="" alt="">
  <p class="Ov(h)">…</p>
</div>

Also, I may be wrong but I'd think it's easy for the brain to recognize a pattern like this after just a couple of uses. After all, it's only composed of 3 elements and 2 main classes.

Also, I just realised that ACSS requires the developer to be more well-versed with CSS and its quirks because what he has in his hands are essentially individual CSS properties. [...]. Whereas in OOCSS, he would have classes available that can abstract those quirks & other complex bits.

Sure, but this goes both ways. Looking at a class like Media may tell you how the element will display but it won't give you any hint about how this is actually done in term of styling (CSS). So one approach may be easier to grasp but there is nothing to learn from it while the other approach may require you to learn about a few class and at the same time learn how the layout of these boxes is created through specific properties. In my opinion, in the long run, less abstraction makes you a better developer. But note that I'm not saying devs should use a Atomic CSS approach just for this reason (that would be wrong).

When it comes to CSS there is no simple solution, no simple answer. You look at your problems/requirements, you look at the solutions out there, and you pick what works best for you; and that may be OOCSS, ACSS, ECSS, SMACSS, Bootstrap, whatever...