Workflow para volar con el CSS

Naiara Abaroa

About

Naiara AbaroaUI Designer/developer en WiMi5

@nabaroawww.naknak.me

Workflow para volar con el CSS

CSS

¿Qué es?

CSS Snapshot 201513 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 quién eres?

.

Buenas prácticaslas de toda la vida

DRY (Don´t Repeat Yourself)

Am I repeating myself?

Mantén el código

● 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 están creadas con mucho sentido común.

https://smacss.com/

Sé flex

Flexbox ha llegado para ahorrarte tiempo y trabajo.

Utilízalo

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.

Esteroidessí o sí

CSS Supervitaminado

Gulp

Es una herramienta de automatización de procesos que nos facilita mucho la vida

http://gulpjs.com/

Sass

¿Quién ha dicho que el CSS es aburrido?

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

http://sass-lang.com/

Ventajas de Sass

Código

● Mantenible● Reutilizable● Ordenado● Y sobre todo, es mucho más 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? Olvídate de ellos.

Empieza a trabajar con el estándar 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?