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 { }