Quan dues regles diuen coses diferents al mateix element, guanya la més específica. L'especificitat es compta com a tres xifres (id, classe, element): les classes, pseudoclasses (:hover, :not()) i atributs sumen a la segona xifra; les etiquetes i pseudoelements, a la tercera. Si empaten, guanya la regla que va més avall. L'atribut style en línia guanya a tots els selectors.

Per això, a la capçalera, .enllac:hover tapava el fons de .actiu, i la solució va ser .enllac:hover:not(.actiu).

• Cada element és una caixa: contingut + padding + border, i el margin fora. Per defecte, width només mesura el contingut.
• Amb box-sizing: border-box, el width ja inclou padding i vora. Per això el reinici el posa a tots els elements.
• Els marges verticals de dos blocs seguits es col·lapsen: es queda el més gran.
• rem: relatiu a la mida de lletra de l'arrel (16px per defecte). em: relatiu a l'element. %: al pare. vw/dvh: a la finestra. fr: fracció de l'espai lliure a Grid.
• clamp(mínim, preferit, màxim): una mida fluida amb límits.

Flexbox col·loca elements en una fila o columna: justify-content alinea a l'eix principal, align-items a l'eix creuat, i gap separa. Grid treballa en files i columnes alhora.

.graella {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--espai-4);
}

.peu {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
}

Els colors, espais i radis es declaren un sol cop com a variables CSS a :root i es fan servir amb var(). El tema fosc només redefineix les variables: no cal tocar cap component.

:root {
  --color-marca: #e02018;
  --color-fons: #ffffff;
  --color-text: #1a1a1a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-fons: #121212;
    --color-text: #f2f2f2;
  }
}

:focus-visible { outline: 3px solid var(--color-text); }

@media (prefers-reduced-motion: reduce) {
  .targeta { transition: none; }
}

Hi ha cinc maneres de posar CSS en React (full global, CSS Modules, style, CSS-in-JS i utilitats). Al mòdul fem servir tokens al full global + un .module.css per component. L'atribut style queda només per a valors calculats en temps d'execució.

import clsx from 'clsx';
import estils from './TargetaProducte.module.css';

export default function TargetaProducte({ nom, esgotat }: Props) {
  return (
    <article className={clsx(estils.targeta, esgotat && estils.esgotat)}>
      <h3 className={estils.titol}>{nom}</h3>
    </article>
  );
}