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.
htt...
¿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 co...
Arquitectura CSS
SMACCS (Scalable and Modular Architecture for CSS).
Son unas reglas sencillas y flexibles de organizar el...
Sé flex
Flexbox ha llegado para ahorrarte tiempo y trabajo.
Utilízalo
https://css-tricks.com/snippets/css/a-guide-to-flexb...
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 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 fil...
Postprocesado
¿Vendor Prefixes? Olvídate de ellos.
Empieza a trabajar con el estándar ya!
https://github.com/postcss/autop...
PostCSS
Es una herramienta para modificar el CSS mediante plugins de JS.
https://github.com/postcss/postcss
Fuck the rules!
(but responsibly)
Gracias ;)
¿Preguntas?
Próxima SlideShare
Cargando en…5
×

Workflow para volar con el CSS

653 visualizaciones

Publicado el

Slides para el Hack2Progress celebrado en Santander el 20-21 de noviembre del 2015.

Publicado en: Tecnología
0 comentarios
1 recomendación
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
653
En SlideShare
0
De insertados
0
Número de insertados
31
Acciones
Compartido
0
Descargas
5
Comentarios
0
Recomendaciones
1
Insertados 0
No insertados

No hay notas en la diapositiva.

Workflow para volar con el CSS

  1. 1. Workflow para volar con el CSS Naiara Abaroa
  2. 2. About Naiara Abaroa UI Designer/developer en WiMi5 @nabaroa www.naknak.me
  3. 3. Workflow para volar con el CSS
  4. 4. CSS ¿Qué es?
  5. 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. 6. ¿Te suena?
  7. 7. Y tú ¿de quién eres? .
  8. 8. Buenas prácticaslas de toda la vida
  9. 9. DRY (Don´t Repeat Yourself) Am I repeating myself? Mantén el código ● ordenado ● simple ● sin repeticiones
  10. 10. Evita selectores extra Así no: body #container .someclass ul li {....} Así sí: .someclass li {...}
  11. 11. Ojo con la especificidad
  12. 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. 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. 14. Sé flex Flexbox ha llegado para ahorrarte tiempo y trabajo. Utilízalo https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  15. 15. Ok, en este punto estamos creando un CSS ordenado, limpio y con una nomenclatura correcta.
  16. 16. Esteroides sí o sí
  17. 17. CSS Supervitaminado
  18. 18. Gulp Es una herramienta de automatización de procesos que nos facilita mucho la vida http://gulpjs.com/
  19. 19. Sass ¿Quién ha dicho que el CSS es aburrido? Mixins, funciones, operaciones,... hasta cansar. http://sass-lang.com/
  20. 20. Ventajas de Sass Código ● Mantenible ● Reutilizable ● Ordenado ● Y sobre todo, es mucho más divertido.
  21. 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. 22. Postprocesado ¿Vendor Prefixes? Olvídate de ellos. Empieza a trabajar con el estándar ya! https://github.com/postcss/autoprefixer
  23. 23. PostCSS Es una herramienta para modificar el CSS mediante plugins de JS. https://github.com/postcss/postcss
  24. 24. Fuck the rules! (but responsibly)
  25. 25. Gracias ;)
  26. 26. ¿Preguntas?

×