At the very core of SMACSS is categorization.
1.Base (exclusively – body, a, input[type=text]…)
2.Layout (reusable, modular parts of our design – container) – .l- or .layout- .grid-
3.Module (sidebar, product lists…)
4.State (hidden, expanded, active, inactive) .is-
5.Theme
#article { width: 80%; float: left; } #sidebar { width: 20%; float: right; } .l-fixed #article { width: 600px; } .l-fixed #sidebar { width: 200px; }
/* Example Module */ .example { } /* Callout Module */ .callout { } /* Callout Module with State */ .callout.is-collapsed { } /* Form field module */ .field { } /* Inline layout */ .l-inline { }