Professional Documents
Culture Documents
Naiara Abaroa
About
Naiara Abaroa
UI Designer/developer en WiMi5
@nabaroa
www.naknak.me
CSS
Qu es?
http://www.w3.org/TR/css-2015/
Te suena?
Y t de quin eres?
.
Buenas prcticas
las de toda la vida
ordenado
simple
sin repeticiones
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 estn creadas
con mucho sentido comn.
https://smacss.com/
S flex
Flexbox ha llegado para ahorrarte tiempo y trabajo.
Utilzalo
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.
Esteroides
s o s
CSS Supervitaminado
Gulp
Es una herramienta de automatizacin de procesos que nos facilita mucho
la vida
http://gulpjs.com/
Sass
Ventajas de Sass
Cdigo
Mantenible
Reutilizable
Ordenado
Y sobre todo, es mucho ms 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
https://github.com/postcss/autoprefixer
PostCSS
https://github.com/postcss/postcss
Gracias ;)
Preguntas?