Skip to content

Instantly share code, notes, and snippets.

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>
<!-- 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">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment