Como preparar pizza con SMACSS

Rules

Base rules

Layout rules

Module rules

State rules

Theme rules

Base rules

Is applied to an element using an element selector, a descendent selector, or a child selector, along with any pseudo-classes.

body {
  padding: 20px 10px 0px 10px;
  background: #f27329;
}

Layout rules

Divide the page into sections

Prefix:

.layout-   .l-

major styles

minor styles

Module rules

Are the reusable, modular parts of our design

.plate {
  width: 600px;
  height: 600px;
  border-radius: 500px;
  background: #4a1804;
  position: relative;
  left: 100px;
}

State rules

A state is something that augments and overrides all other styles. 

The use of !important is allowed

Prefix:

.is-

.plate:hover {
  animation: rotate 10s linear infinite;
}

Theme rules

Defines colours and images that give your application or site its look and feel. 

Other Architectures

THANKS