Workflow para volar con el CSS

Naiara Abaroa
About
Naiara Abaroa
UI Designer/developer en WiMi5

@nabaroa
www.naknak.me
Workflow para volar con el CSS
 CSS
Qu es?
CSS Snapshot 2015
13 October 2015

As of 2015, Cascading Style Sheets (CSS) is defined by the following

specifications.

http://www.w3.org/TR/css-2015/
Te suena?
Y t de quin eres?

.
Buenas prcticas
las de toda la vida
DRY (Dont Repeat Yourself)

Am I repeating myself?

Mantn el cdigo
ordenado
simple
sin repeticiones
Evita selectores extra

As no:
body #container .someclass ul li {....}
As s:
.someclass li {...}
Ojo con la especificidad
Qu nombre te pongo?

Nombrar clases de una manera coherente

BEM (Block, Element, Modifier)

The main idea of the naming convention is to make names of CSS selectors as informative and clear
as possible. This will help make code development and debugging easier and also solve some of the
problems faced by web developers.

https://en.bem.info/
Arquitectura CSS

SMACCS (Scalable and Modular Architecture for CSS).

Son unas reglas sencillas y flexibles de organizar el CSS que estn creadas
con mucho sentido comn.

https://smacss.com/
S flex

Flexbox ha llegado para ahorrarte tiempo y trabajo.

Utilzalo

https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Ok, en este punto estamos creando un CSS ordenado, limpio y con una
nomenclatura correcta.
Esteroides
s o s
CSS Supervitaminado
Gulp

Es una herramienta de automatizacin de procesos que nos facilita mucho

la vida

http://gulpjs.com/
Sass

Quin ha dicho que el CSS es aburrido?

Mixins, funciones, operaciones,... hasta cansar.

http://sass-lang.com/
Ventajas de Sass

Cdigo
Mantenible
Reutilizable
Ordenado
Y sobre todo, es mucho ms divertido.
Custom properties

Variables nativas del CSS

:root {
--main-color: #06c;
--accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
color: var(--main-color);
}

www.w3.org/TR/css-variables-1/
Postprocesado

Vendor Prefixes? Olvdate de ellos.

Empieza a trabajar con el estndar ya!

https://github.com/postcss/autoprefixer
PostCSS

Es una herramienta para modificar el CSS mediante plugins de JS.

https://github.com/postcss/postcss
Fuck the rules!
(but responsibly)
Gracias ;)
Preguntas?