What is SMACSS?

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Up Next:

Redesign My Website in One Day

Redesign My Website in One Day