Created
March 29, 2016 18:28
-
-
Save chinchang/2832a1f24d29023f687deb408e9397ba to your computer and use it in GitHub Desktop.
Comparing code for OOCSS and Atomic CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
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> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@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:
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.
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...