SMACSS architecture reference for writing CSS

The concept is to keep CSS more organized and more structured, leading to code that is easier to build and easier to maintain. SMACSS is one of the reference guides about CSS naming rules and conventions.

To begin with, there are 5 major categories from SMACSS point of view in CSS functionalities.

  1. Base – fundamental default element display features, like body, form, input or a
  2. Layout – decide how page is divided into sections
  3. Module – reusable parts like modal, sidebar, etc
  4. State – define how module will change based on different context (different views/devices)
  5. Theme – layer of theming, not necessary

For each of these categories, there are rules associated with it. Bear these simple minds with it,

  1. Base rule is default style, no need to use !important, and Reset CSS is helpful
  2. Layout has major & minor. Major layout are mostly shared across whole site, recommend using ID selector.
  3. Modules should avoid element selectors, and use class instead. And sub-classing is the key to increase portability on modules
  4. State should not only apply to layout/module, but also indicate javascript dependency. !important is recommended at this level.
  5. State change can be done in 3 ways, class name, pseudo-class and media query

Having said all these basic category concept and rules, there are actually some thinking go beyond.

Minimize the CSS depth – for better maintenance and readability/portability

CSS Evaluation flow has below facts, thus recommendation based on the facts,

Facts Recommendations
a. Style of an element is evaluated on the element creation (e.g. document rendered during transmission)

b. CSS is evaluated from right to left

i. Use child selectors

ii. Avoid tag selectors for common elements

iii. Use class names as the right-most selector

Using CSS Preprocessors are encouraged (LESS SASS Stylus)

Posted in CSS