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