workflow para volar con el css - hack2progress.com€¦ · workflow para volar con el css naiara...
TRANSCRIPT
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?