Este documento ofrece consejos y buenas prácticas para trabajar con CSS de forma ordenada y eficiente, incluyendo seguir estándares como BEM y SMACCS, usar Flexbox, automatizar procesos con Gulp, preprocesadores como Sass, variables CSS nativas, y herramientas como PostCSS y Autoprefixer. El objetivo es crear hojas de estilo mantenibles, reutilizables y que aprovechen las nuevas características del lenguaje.

1. Workflow para volar con el CSS
Naiara Abaroa

2. About
Naiara Abaroa
UI Designer/developer en WiMi5
@nabaroa
www.naknak.me

3. Workflow para volar con el CSS

4. CSS
¿Qué es?

5. 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/

6. ¿Te suena?

7. Y tú ¿de quién eres?
.

8. Buenas prácticaslas de toda la vida

9. DRY (Don´t Repeat Yourself)
Am I repeating myself?
Mantén el código
● ordenado
● simple
● sin repeticiones

10. Evita selectores extra
Así no:
body #container .someclass ul li {....}
Así sí:
.someclass li {...}

11. Ojo con la especificidad

12. ¿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/

13. 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/

14. Sé flex
Flexbox ha llegado para ahorrarte tiempo y trabajo.
Utilízalo
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

15. Ok, en este punto estamos creando un CSS ordenado, limpio y con una
nomenclatura correcta.

16. Esteroides
sí o sí

17. CSS Supervitaminado

18. Gulp
Es una herramienta de automatización de procesos que nos facilita mucho
la vida
http://gulpjs.com/

19. Sass
¿Quién ha dicho que el CSS es aburrido?
Mixins, funciones, operaciones,... hasta cansar.
http://sass-lang.com/

20. Ventajas de Sass
Código
● Mantenible
● Reutilizable
● Ordenado
● Y sobre todo, es mucho más divertido.

21. 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/

22. Postprocesado
¿Vendor Prefixes? Olvídate de ellos.
Empieza a trabajar con el estándar ya!
https://github.com/postcss/autoprefixer

23. PostCSS
Es una herramienta para modificar el CSS mediante plugins de JS.
https://github.com/postcss/postcss

24. Fuck the rules!
(but responsibly)

25. Gracias ;)

26. ¿Preguntas?