Skip to content

Instantly share code, notes, and snippets.

@jitendravyas
Forked from chinchang/atomic-vs-oocss.html
Created November 7, 2016 04:09
Show Gist options
  • Save jitendravyas/e455d269403ecc5e53f3e827a0cd20b5 to your computer and use it in GitHub Desktop.
Save jitendravyas/e455d269403ecc5e53f3e827a0cd20b5 to your computer and use it in GitHub Desktop.
Comparing code for OOCSS and Atomic CSS
<!--
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