002 - [Angular] Estilos globales vs locales
Bitacora: se vuelve entrete escribir, te vas "re-haciendo".
Uhhh tantas emociones en el anterior xD,
Demosle,
Manejar estilos requiere:
- Mantener la consistencia de la experiencia.
- Evitar colisiones.
- Que sean fáciles de usar.
- Que sean fáciles de modificar.
- Que sean óptimos o “performantes”.
☝ y de seguro faltan características que desconozco.
Mi kit de supervivencia
Agrupar los estilos en:
a) Estilos de estructura y composición
Tipo | Objetivo | ejemplo |
---|---|---|
Estructurales | Para reutilizar estructuras | .card .box .container |
De composición o “Layout” | Para reutilizar estructuras | .row .d-flex .padding-top-1 |
Idealmente, 1x Sass para Composición y 1 Sass para Estructuras o directamente todo en el styles.scss
.
Cada proyecto tiene su encanto.
b) Estilos únicos por componente
La única condición que aplico es que sea semántico y evitar cualquier tipo de colisión con nombres globales.
No voy a ocupar: .container .card
.
Dolores de cabeza
Cuando no hemos considerado la agrupación empezamos a mezclar categorias y vemos cosas como:
Estilos de componente basados en un Mix de globales y locales :
- Dificil de entender
- Dificil de debugear
- Dificil de modificar
- No necesitas mas de 1 clase por etiqueta HTML.
Estilos locales chocando con estilos globales
Esto es algo siempre me pasa en proyectos que utilizan Bootstrap.
👌Bootstrap tiene muy buenos nombres de clase.
El problema es…
🫣Capa8!
-
Identifica las clases globales y evitalas.
-
La duplicidad es una decisión, no un enemigo. Muchas veces es más flexible aplicar estilos parecidos en varias partes que lidiar con estos estilos abstractos/padres fundamentales “heredados” por toda la aplicación (modificas uno y empiezan a llover los Bugs ☄️☄️☄️ ).
No caigas en la trampa de los estilos “reutilizables” a nivel de componente.
Cuando me toca modificar, apunto a algo así:
Anécdota:
Me asignaron un ticket para “modificar el layout de un componente.”
Tranquilin yonwein, que podría salir mal? …
[!] No se porqué solo toma algunos estilos 🤔🤔🤔 ???
[!] solo algunos, solo algunos, solo algunos… 🤔
Aja! Especificidad!
eeeh nope xD
Este era el problema:
…
Los estilos no estaban referenciados y los que tomaba venían de los globales xD!
😬😬😬
Les dejo unos articulos geniales acerca del manejo de CSS:
Xabelin 👋