Saltearse al contenido

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

TipoObjetivoejemplo
EstructuralesPara 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 :

<!-- dev que se pregunta si programar es el camino ;( -->
<div class="pd1 cols-md mt3 card d-flex flex-direction-column col-2-sm">
<div class="card-header pd-2 row mt-3">
<div class="pd1 text-bold mb-1 mt-1 text-center"></div>
<div class=""></div>
</div>
<div class="card-body content pd-2 row content"></div>
<div class="card-footer pd-2"></div>
</div>
  • Dificil de entender
  • Dificil de debugear
  • Dificil de modificar
  1. No necesitas mas de 1 clase por etiqueta HTML.

Estilos locales chocando con estilos globales

<div class="card">
<div class="cardHeader">
<div class="name"></div>
<div class="level"></div>
</div>
<div class="container">
<div class="avatar creature"></div>
<div class="stats"></div>
<div class="actions"></div>
</div>
<div class="footer"></div>
</div>

Esto es algo siempre me pasa en proyectos que utilizan Bootstrap.

👌Bootstrap tiene muy buenos nombres de clase.


El problema es…


🫣Capa8!

  1. Identifica las clases globales y evitalas.

  2. 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í:

<!-- para quedar de rey -->
<div class="creature">
<div class="creature__header">
<div class="creature__name"></div>
<div class="creature__level"></div>
</div>
<div class="content">
<div class="creature__avatar"></div>
<div class="creature__stats"></div>
<div class="creature__actions"></div>
</div>
<div class="footer"></div>
</div>


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:

@Component({
selector: "app-page-account",
standalone: true,
imports: [CommonModule],
templateUrl: "./page-account.component.html",
})
export class PageAccountComponent {}

…

@Component({
selector: "app-page-account",
standalone: true,
imports: [CommonModule],
templateUrl: "./page-account.component.html",
// styleUrls: ['./page-account.component.scss'], <=
})
export class PageAccountComponent {}

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 👋