Workflow para volar con el CSS
1 recomendación1,298 vistas
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.
Workflow para volar con el CSS
- 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.
- 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?