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.
- Base – fundamental default element display features, like body, form, input or a
- Layout – decide how page is divided into sections
- Module – reusable parts like modal, sidebar, etc
- State – define how module will change based on different context (different views/devices)
- Theme – layer of theming, not necessary
For each of these categories, there are rules associated with it. Bear these simple minds with it,
- Base rule is default style, no need to use
!important, and Reset CSS is helpful
- Layout has major & minor. Major layout are mostly shared across whole site, recommend using ID selector.
- Modules should avoid element selectors, and use class instead. And sub-classing is the key to increase portability on modules
!importantis recommended at this level.
- 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,
|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)