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?