Como preparar pizza con SMACSS

Manuela Castrillón Medina

Estudiante de Ingeniería de Sistemas

Universidad de Antioquia

@manucastrillonm

#YoEnEl2000

Pioneras developers

SMACSS

Scalable and Modular Architecture for CSS

https://smacss.com/

Jonathan Snook

Framework

Library

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

.l-flex {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}

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

OOCSS (Object Oriented CSS)

BEM (Block, Element, Modifier)

THANKS

By Manu Castrillón

SMACSS