“Escopar” (de l’anglès to scope) és la pràctica de limitar l’abast d’unes regles CSS perquè només afectin un contenidor concret del HTML. Això evita efectes col·laterals (p. ex., que un estil global sobreescrigui el disseny d’altres pàgines) i millora la mantenibilitat, l’accessibilitat i la coherència visual.
Exemple bàsic
I a HTML
Amb aquest patró, els estils només s’apliquen dins .gd-projects.
Bones pràctiques d’escopat
Prefixar amb una classe contenidor (p. ex.
.gd-…) o un namespace per secció.Evitar donar estils a tags globals (
body,html,h1,a) fora d’un contenidor.Preferir variables CSS a nivell de contenidor si cal canviar paletes locals:
- Usar :where() per reduir especificitat i facilitar overrides nets:
- Evitar
!importantexcepte com a darrera opció.
Errors habituals
Estils globals que forcen colors/fons del lloc (
body { background: … }).Canviar la disposició del body (flex/grid) globalment.
Barreges d’overlays i opacitats que “apaguin” continguts.
Dependències de temes “dark/light” aplicades globalment en lloc d’un contenidor.
Termes relacionats
Encapsulació d’estils (Shadow DOM)
CSS Modules, CSS-in-JS
Especificitat i cascada
Metodologies: BEM, ITCSS, namespaces
Micro-FAQ
Quan convé escopar?
Quan una secció necessita estils propis (p. ex., un portfoli, una landing, un widget incrustat) o quan comparteixes components entre pàgines.
És millor escopar o usar !important?
Escopar. !important complica el manteniment i sovint encadena més problemes d’especificitat.
Diferència amb Shadow DOM?
Shadow DOM encapsula estils a nivell de component web nadiu. Escopar amb classes és la versió “clàssica” amb CSS estàndard.