Arquitecturas CSS Escalables

Ironhack, Madrid – 19 de Junio, 2017

Ignacio ;)

Ignacio Villanueva

Frontend Developer en especializado en arquitectura, frontend performance y responsive web design.

WeCodeSign Podcast's Logo

Podcaster en WeCodeSign

¿Quiéres saber más?

¡Comenzamos!

¿Por qué nos hace falta una arquitectura a la hora de organizar el CSS?

Especificidad CSS

¿Qué es?

¡Calculadoras a mi!

¿Qué ocurre?

Limita el añadir código

Interrumpe la cascada y su herencia

Aumenta el código 'verbosidad'

Crea frustración

Elementos (1) como :before y :after
Clases, Pseudo-Clases, Atributos (10)
ID (100)
Estilos in-line (1000)
!important (10000)

---

* o :not() no tienen especificidad (0,0,0,0)
Pseudo-elementus como :first-line tienen get 0,0,0,1

Specificity Calculator

Arquitecturas

BEM, SMACSS, OOCSS, ITCSS, Atomic

BEM

¿Cómo funciona?

btn

btn__price

btn--big

<!-- Correcto. La clase `error` está usada correctamente usada -->
<div class="error">

  <!-- `search-form` Elemento de tipo bloque -->
  <form class="search-form">

    <!-- `search-form__input` Elemento de tipo elemento -->
    <input class="search-form__input">

    <!-- `button` Elemento de tipo modificador -->
    <button class="search-form__button">Search</button>
  </form>

  </form>
</div>

Documentación de BEM

SMACSS

¿Cómo funciona?

Base

Layout

Module

State

Theme

<!-- Base: Selectores, aunque a veces pueden ser atributos, pseudoelementos, selectores hijos o padres. -->
<body>, <a:hover>

<!-- Secciones, entendiendo que dentro de cada sección el contenido se dividirá en módulos. -->
<article>, <footer>

<!-- Componentes que pueden ser reutilizados. -->
.module span

<!-- Reglas que nos marcan el estado de nuestros módulos. Ej: estado activo de un botón. -->
.is-collapsed, .is-active

<!-- Theme: SOpcional. -->
.mod, <.theme-background>

Documentación de SMACSS

Object Oriented CSS (OOCSS)

¿Cómo funciona?

Separación de estructura y aspecto

Separación de "contenedores" y contenido: ha de comportarse igual esté donde esté

<!-- Sin usar el "Single Responsibility Principle" -->
.card {
  color: black;
  margin-top: 100px;
  box-shadow: 0 0 30px rgba(0,0,0,.3);
  background-color: white;
  font-size: 30px;
  position: relative;
  display: block;
  width: 50%;
  padding: 30px;
}

<!-- Usando el el "Single Responsibility Principle" -->
.card {
  color: goldenrod;
  box-shadow: 0 0 30px rgba(0,0,0,.3);
  background-color: silver;
  font-size: 30px;
  padding: 30px;
}

.half {
  position: relative;
  display: block;
  width: 50%;
}

.mtxl {
  margin-top: 100px;
}

Documentación de OOCSS

'Namespaces'

Transparent UI Code with Namespaces

¿Cómo funciona?

o- Objeto

c- Componente

u- Utilidad

t- Tema

s- Scope

is- / has- Condición

_ Hack (no usar)

js- JavaScript

qa- Test (QA)

.o-layout {}
.c-modal {}
.u-clearfix {}
.t-night {}
.s-cms-refactor {}
.is-open {}
._discus {}
.js-modal {}
.qa-error {}

Specificity Calculator

Atomic Design

¿Cómo funciona?

Átomos

Moléculas

Organismos

Plantillas

Páginas

CSS = Hojas de Estilo en Cascada

Parece obvio pero os daréis cuenta de que no siempre es así

Sass

Escribir Sass no implica que el CSS resultante sea bueno

Beneficios de usar Sass

Arquitectura Sass 7-1

Parte 1/3

sass/
|
|– abstracts/
|   |– _variables.scss    # Sass Variables
|   |– _functions.scss    # Sass Functions
|   |– _mixins.scss       # Sass Mixins
|   |– _placeholders.scss # Sass Placeholders
|
|– base/
|   |– _reset.scss        # Reset/normalize
|   |– _typography.scss   # Typography rules
|   …                     # Etc.

Documentación de Sass 7-1 Pattern

Arquitectura Sass 7-1

Parte 2/3

|
|– components/
|   |– _buttons.scss      # Buttons
|   |– _carousel.scss     # Carousel
|   |– _cover.scss        # Cover
|   |– _dropdown.scss     # Dropdown
|   …                     # Etc.
|
|– layout/
|   |– _navigation.scss   # Navigation
|   |– _grid.scss         # Grid system
|   |– _header.scss       # Header
|   |– _footer.scss       # Footer
|   |– _sidebar.scss      # Sidebar
|   |– _forms.scss        # Forms
|   …                     # Etc.

Documentación de Sass 7-1 Pattern

Arquitectura Sass 7-1

Parte 3/3

|
|– pages/
|   |– _home.scss         # Home specific styles
|   |– _contact.scss      # Contact specific styles
|   …                     # Etc.
|
|– themes/
|   |– _theme.scss        # Default theme
|   |– _admin.scss        # Admin theme
|   …                     # Etc.
|
|– vendors/
|   |– _bootstrap.scss    # Bootstrap
|   |– _jquery-ui.scss    # jQuery UI
|   …                     # Etc.
|
`– main.scss              # Main Sass file

Documentación de Sass 7-1 Pattern

You might not need a CSS framework

Buenas prácticas CSS

Consistencia al escribir código

No usar IDs

No usar !important.

Orden de propiedades CSS

Colapso de márgenes

Usar márgenes derecho e inferior únicamente

Autoprefixers

¡OJO!: No siempre funciona como queremos (flexbox - grid)

¿A quién seguir?

Gente que habla habitualmente de arquitectura CSS.

¡Gracias!



* * *

IgnaciodeNuevo.com

WeCodeSign Podcast

¿Alguna pregunta?