A quick overview of SMACSS, BEM, and SASS.

I must say this for SMACSS and BEM that I am sure when you read the detail documentation, most of you will realize that you are already following similar guidelines in your projects knowingly or unknowingly. But once you finish reading the documentation, it will give a boost to your thought processes and align or fit them more in the right direction or place.

SMACSS

SMACSS which stands for Scalable and Modular Architecture for CSS is a set of guidelines to categorize your CSS rulesets to make the CSS codebase scalable and modular. It is not a technology or utility, it’s just a set of some golden rules or you can say guidelines to write your CSS.

According to SMACSS principles, we can divide our CSS rulesets into these five categories — Base, Layout, Module, State and Theme.

Base — All the CSS rulesets which are used to give default styling to HTML elements in all occurrences of the page, fall under the Base rules. We don’t use class or id selectors to define these rulesets, rather we use element descendent selector, or a child selector, along with any pseudo-classes.

Sometimes, we also call them CSS resets to reset the default styling of the HTML elements. These rulesets are generally written on top of the other CSS rulesets.

Layout — As per SMACSS principles, all the UI elements or components in a page can be categorized into two groups- major and minor UI Components. The major components are those which define the structure of the page and generally do not repeat itself in the page like headers , footers , sidebar , body , etc. These major components form the page Layout and hence, referred to as Layout rules.

On the other hand, the minor components which sit under the major components are referred to as Module, discussed in the next section.

Module — Modules are individually separated and distinct UI component. It sits inside the layout component as mentioned above as well as inside Modules itself. It is independent of other UI modules or layouts. Some very common examples are accordion , modal , button , carousal , etc.

State — State CSS Rulesets are basically to define Styles for a different state of a UI component. These basically overrides the default Styling of a UI module.

For example — A message may be in a success or error state.

Since we are also discussing BEM methodology in the next section, you should know that the M(Modifier) in BEM are basically States in SMACSS.

Theme — Theme CSS Rulesets are basically to create theme-specific Styles. They mainly override default colors and images with the theme-specific properties.

We don’t need themes in every application and because of that, they aren’t included as part of the core types.