What is SMACSS?


8 months ago

Learn SMACSS

Not a framework. It’s a way of thinking.

It has 5 categories

  • Base
    • Normalize
    • Reset
    • No classes in this page
  • Layout (Major Components)
    • May use ID
    • E.g : Header, sidebar, footer, homepage
  • Module (Minor Components)
    • Classes
    • E.g : Button, Card
  • State *
    • Expand module
    • E.g : .btn-primary , .btn-info, . btn-danger
  • Theme (Optional)

 

Example of state *


.card {}; /* Module */
.is-card-hover{}; /* State hover */
.is-card-expanded{}; /* State on expand */

Naming Convention

Group in their own module


.video{ };
.video--title{ };
.video--image{ };
.video--meta{ };

Best way to use

Use Sass Preprocessor


@import 'base';
@import 'utilities';
@import 'layout';
@import 'variables';

@import ‘modules/card’;

Use nesting with drawback


.card {
/* Components */
&--header{ }

/* Sub Modules */.
&-animate-left { }
}

Learn more on how to SMACSS on SMACSS.com