Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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