Les caractéristiques du langage

• Portée
• Cascade et héritage
• Ordre du code source
• Spécificité

L'interface chaise-clavier

• Organisation personnelle du code
• Hétérogénéité des compétences

Gestion de la spécificité

Gestion de la spécificité

Les 3 côtés du triangle

En pratique

  // Generics
  @import "generics/generics.normalize.scss";
  @import "generics/generics.box-sizing.scss";
  @import "generics/generics.reduced-motion.scss";

  // Elements
  @import "elements/elements.page.scss";
  @import "elements/elements.heading.scss";
  @import "elements/elements.link.scss";
  @import "elements/elements.selection.scss";

  // Objects
  @import "objects/objects.wrapper.scss";
  @import "objects/objects.media.scss";
  @import "objects/objects.list-inline.scss";

  // Components
  @import "components/components.section.scss";
  @import "components/components.button.scss";
  @import "components/components.header.scss";
  @import "components/components.nav.scss";
  @import "components/components.card.scss";

  @import "components/components.glide-core.scss";
  @import "components/components.glide-theme.scss";

  // Utilities
  @import "utilities/utilities.hidden.scss";
  @import "utilities/utilities.visually-hidden.scss";
            

Au niveau du code

• Favorise l'approche modulaire
• Limite la quantité de règles CSS
• Évite les guerres de spécificité

Pour le développeur

• Facilite (re)prise en main du code
• Simplifie la maintenance et les évolutions
• Prévient les surcharges accidentelles non souhaitées