Saltearse al contenido
🪼manuhb.dev

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 👋