Css puede ser sorpresivamente difícil
Compiled CSS
Borrar estilos puede generar problemas
Las hojas de estilos crecen y crecen
Solución a Global Css
Naming: BEM, OOCSS, SMACSS
https://www.sitepoint.com/front-end-tooling-trends-2017/
BEM
Block __ Element -- Modifier
Form__Button--Error
Inline Styles
Facil de codificar
Encapsulado
Explicito
Dinamico
no Pseudo classes
no Media Queries
no Animations
no ....
Inline vs Compiled
Considera el uso de ambos en base al contexto
Best Practices:
Encapsulate
Be Small and specifict
Css Modules
Es un CSS file que todas sus clases son encapsuladas localmente por defecto
1. Write plain Css
2. Import style from file.css
3. Use style as Js Object
Automatic BEM
Sass, less
Compose
No Conflictos
Small Css selectors
Compilado en Build Time
Que tiene de malo ?
Toda hoja de estilo es importado como objectos, no hay globales
Theming es un poco mas complejo
Css In JS
JS over Sass, Less , PostCSS ?
~50 cssInJs libraries
Es mas Javascript
Variables, F(), Loops
En ReactJs ya usamos JS en "Templates"
Amarrado a la Libreria
Falta de Css features
Puede ser confuso cuando se mezcla con plain Css
Radium
Jsxstyles
Styled Components
Glamour
...
?
Cual debería usar ?
Gracias!
Preguntas ?
By Isaac Luis Mori Guerra
