SMACSS. scalable modular architecture for CSS

[genkio]

study notes taken from the frontendmasters Scalable Modular Architecture for CSS course.

knowledge I obtained in this course + blended with my own take = Less SMACSS starter

What is SMACSS?

• SMACSS is Categorization
• SMACSS is Naming Convention
• SMACSS is Decoupling CSS from HTML

SMACSS is Categorization

• Base
• Layout
• Module
• Sub-module
• Sub-component

Base

• element selectors (but not elements like button, input which should be created as module)
• css resets
• normalize

html {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

body {
  margin: 0;
  padding: 0;
}

h1, h2, h3 {
  margin: 1em 0;
}

Layout

• major containing elements, a container that contains stuff
• grid systems
• layout specify width and margin

.l－highlight { background-color: #CCC; }
.l－featured { background-color: #CCC; }
.l－constrained { width: 760px; }
.l－content {
  float: right;
  width: 20%;
}
.l－sidebar {
  float: right;
  width: 80%;
}

<div>
  <div class="layout-constrained"></div>
</div>
<div class="layout-highlight">
  <div class="layout-constrained"></div>
</div>

Module

• content pieces that contain content
• expand to fill layout
• isolate modules from each other, each module should be stand on its own
• prevent styles from coming in or out, btn-clean should not be relying on styles coming from modal-header
• (each module should in a separate file)

Sub-module

• module variations (dark button, small button etc)
• small differences between each one

Sub-component

• module child elements (modal header to a modal for example)

SMACSS is Naming Convention

Module

• root module should be one word without -

.module-name {} /*allows for hyphens, always a root node*/
.module-name--submodule {} /*hyphens*/
.module-name__subcomponent {} /*underscores*/

/*or*/

.moduleName {}
.moduleName-subModule {}
.moduleName--subComponent {}

State

• prefix state with is-
• is- prefix indicates likelihood of JavaScript dependency
• is- indicates a toggleable state
• states that are specific to a module should include module name

.btn {}
.btn-is-active {}
.btn-is-disabled {}

Theme

• should theme (color for instance) be decoupled from module
• themes should be in a separate css file

.theme-header {}
.theme-border {}
.theme-background {}

Helpers

.text-xl { font-size: 140%; }
.text-l { font-size: 120%; }
.text {}
.text-s { font-size: 90%; }
.text-xs { font-size: 80%; }

Prefixing for versioning

.next-btn {}
.next-btn-is-active {}
.next-btn-is-disabled {}

Wrap up

• pick a system that works for you and your team
• be consistent

SMACSS is Decoupling CSS from HTML

• single class rule
• use fewer selectors, preferably one
• use child selectors to limit depth

Some other conventions

• class over id
• avoid !important except states