A la primera lliçó del mòdul vam dir que un component encapsula tres coses: marcatge, lògica i estil. Les dues primeres ja estan resoltes: el marcatge viu al JSX i la lògica al cos de la funció. L'estil, en canvi, continua amuntegat en un únic src/index.css que creix sense control i on res no impedeix que d'aquí a tres mesos dues persones diferents defineixin una classe .targeta amb regles incompatibles. React no imposa cap solució per a això: t'ofereix diverses estratègies i espera que triïs amb criteri. En aquesta lliçó veuràs les quatre que s'usen a la pràctica, totes aplicades al mateix component —TargetaBicicleta— per poder-les comparar de debò, aprendràs a construir noms de classe dinàmics a partir de l'estat d'una bicicleta, ordenaràs la paleta de CicloUrbano amb variables CSS i adoptaràs l'estratègia que el projecte usarà d'ara endavant.

1. El problema: l'estil també és part del component
2. Estratègia 1: CSS global importat
3. Estratègia 2: estils en línia amb objectes
4. Estratègia 3: CSS Modules amb Vite
5. Estratègia 4: CSS-in-JS i frameworks d'utilitats
6. Classes condicionals segons l'estat de la bicicleta
7. Variables CSS per a la paleta de CicloUrbano
8. Comparativa final i decisió del curs

Avui TargetaBicicleta és incompleta com a unitat: el seu marcatge i la seva lògica són a TargetaBicicleta.jsx, però les seves regles d'estil són a cent línies de distància, en un fitxer que comparteix amb tota la resta. Això produeix quatre problemes concrets:

React no resol això per tu, però sí que et dona l'ingredient que faltava: el component pot decidir les seves classes en temps d'execució, perquè className és una expressió JavaScript com qualsevol altra.

Les quatre estratègies que existeixen es poden ordenar per on viu l'estil:

És la que has usat fins ara, i consisteix a escriure CSS normal i importar-lo.

Vite també permet importar un .css des del propi component, cosa que millora una mica l'organització:

Però compte: això no el fa local. Vite recull tots els .css importats i els ajunta en el full d'estils de la pàgina. El fitxer és més a prop del component, sí, però les seves classes continuen sent globals.

Imagina que d'aquí a dos mesos algú afegeix una pantalla de reserves amb el seu propi full:

Aquest fitxer s'importa i, sense que ningú ho pretengui, les targetes del catàleg perden la vora i l'amplada màxima. No hi ha error, no hi ha avís: només un disseny trencat que apareix en navegar en cert ordre. Depurar-ho ocupa mitja tarda.

Les mitigacions tradicionals existeixen i funcionen a mitges:

• Convencions de noms tipus BEM: .targeta-bicicleta__titol, .targeta-bicicleta--urbana. Redueixen molt el risc, però depenen de la disciplina de tot l'equip, per sempre.
• Prefixos per component: la mateixa idea, amb la mateixa fragilitat.

Quan usar-lo: per al que ha de ser global. Reinicis (box-sizing), tipografia base, colors del body i, sobretot, les variables CSS de la paleta, com veuràs a l'apartat 7.

React permet passar un objecte JavaScript a l'atribut style:

Recorda de la lliçó 01-04 les regles d'aquest objecte:

• Doble clau: les de fora obren l'expressió JSX, les de dins són el literal d'objecte.
• Propietats en camelCase: borderRadius, no border-radius.
• Valors com a cadenes, amb unitats incloses. Els números sense unitat s'interpreten com a píxels: padding: 16 equival a 16px.

Aquest és el seu cas legítim, i és real. Una barra d'ocupació d'una estació l'amplada de la qual depèn de les dades no es pot expressar amb una classe CSS, perquè el percentatge només es coneix en executar:

Aquí la divisió del treball és la correcta: la classe aporta tot allò estàtic (colors, alçada, vores) i l'estil en línia aporta l'únic valor que depèn de les dades.

Quan usar-lo: només per a valors dinàmics que el CSS no pot conèixer —amplades percentuals, posicions, transformacions calculades— i sempre combinat amb una classe que aporti la resta. Mai com a estratègia principal.

Un CSS Module és un fitxer CSS normal el nom del qual acaba en .module.css. Vite el detecta automàticament —sense cap configuració— i fa dues coses: renombra cada classe perquè sigui única en tota l'aplicació i et retorna un objecte que tradueix els teus noms als generats.

Fixa't en els noms: .targeta, .titol, .dada. Curts i genèrics, perquè l'àmbit local fa innecessari el prefix. No hi ha cap risc que xoquin amb les .targeta d'un altre component.

import estils from './TargetaBicicleta.module.css' no importa text: importa un objecte que Vite genera en processar el fitxer.

I l'HTML que arriba al navegador:

Aquest sufix es calcula a partir del nom del fitxer i del seu contingut, de manera que és impossible que dos components diferents generin la mateixa classe. El problema de les col·lisions desapareix per construcció, no per disciplina.

Dos detalls de sintaxi útils:

• estils[bicicleta.tipus]: accés per claudàtors. Com que bicicleta.tipus val 'urbana', 'electrica' o 'carga', obtenim la classe de la variant corresponent. Així es connecten les dades amb l'estil sense cap if.
• Classes amb guions: si anomenes una classe .targeta-destacada, en JS hauràs d'escriure estils['targeta-destacada']. Per això a CSS Modules s'estila usar camelCase: .targetaDestacada → estils.targetaDestacada.

Aquesta és l'estratègia per defecte de CicloUrbano a partir d'ara, per tres raons: no afegeix cap dependència, resol el problema real (les col·lisions) sense demanar-te disciplina, i continua sent CSS, de manera que tot el que saps de la cascada et serveix igual.

Quan dos components necessiten les mateixes regles, hi ha dues vies netes:

composes és una funcionalitat pròpia de CSS Modules: la classe resultant inclou totes dues. L'alternativa, més senzilla, és posar aquestes regles comunes al CSS global i combinar-les amb el helper de l'apartat 6: className={classes('caixa', estils.targeta)}.

Les dues alternatives restants són molt populars i convé conèixer-les encara que no les fem servir al curs.

Llibreries com styled-components o Emotion permeten escriure CSS dins de JavaScript i obtenir un component ja estilat:

El seu gran atractiu és que les props determinen l'estil de forma directa, amb tota la potència de CSS. Els seus inconvenients: una dependència més, un cost en temps d'execució (els estils es generen mentre l'aplicació corre), fricció amb el renderitzat en servidor i una tendència clara de l'ecosistema a allunyar-se d'aquest enfocament en favor de solucions que resolen en temps de compilació (zero-runtime), com Vanilla Extract o Panda CSS.

L'enfocament oposat: en lloc d'escriure CSS, es componen classes atòmiques predefinides directament al JSX.

Avantatges: no es canvia de fitxer per estilar, el CSS final és minúscul perquè només s'inclouen les utilitats usades, i el sistema de disseny (espaiats, colors, tipografies) ve imposat, cosa que dona molta consistència. Inconvenients: el JSX s'omple de classes i perd llegibilitat, hi ha una corba d'aprenentatge de noms, i compondre condicionals llargs exigeix una llibreria auxiliar.

Sigui quina sigui l'estratègia, hi ha una necessitat constant: triar classes en funció de les dades. A CicloUrbano, el distintiu d'estat ha de ser verd si la bicicleta està disponible, taronja si està llogada i vermell si està en manteniment.

La forma més directa, i la que ja vas usar a EtiquetaEstat:

estat--${estat} produeix estat--disponible, estat--alquilada o estat--mantenimiento. Una sola línia cobreix els tres casos i afegir un quart estat no exigeix tocar el component, només el CSS.

Compte amb un límit important: això funciona amb CSS global, però no amb CSS Modules, perquè les classes d'un mòdul estan renombrades. Aquí cal accedir a l'objecte:

Quan la classe depèn d'un booleà:

Això es torna il·legible de seguida. Amb tres o quatre condicions apareixen plantilles monstruoses, espais dobles i undefined colant-se a l'atribut.

La solució és una funció que ajunti els noms vàlids i descarti la resta. Ocupa tres línies i la faràs servir a tots els teus projectes:

Com funciona, pas a pas:

• ...noms és un paràmetre rest: recull tots els arguments en un array.
• .filter(Boolean) elimina els valors falsy de l'array: false, undefined, null, '' i 0. És una drecera idiomàtica equivalent a .filter(valor => Boolean(valor)).
• .join(' ') uneix els que queden separats per espais, que és justament el format de className.

Amb ell, el JSX torna a ser llegible:

Si destacada és false, l'expressió destacada && estils.destacada val false, i filter(Boolean) la descarta. Sense ternaris, sense cadenes buides, sense espais sobrants.

En projectes reals veuràs la llibreria clsx (o classnames), que fa exactament això amb més funcionalitats. El nostre helper de tres línies cobreix el cas habitual sense afegir dependències.

I les classes que falten al mòdul:

Els colors de CicloUrbano es repeteixen literalment des de la lliçó 01-03: #12805c a cinc llocs, #d9e2ec en uns altres tants. Canviar el verd de marca implicaria avui una cerca i substitució per tot el projecte, amb el risc de deixar-se'n algun.

Les variables CSS (propietats personalitzades) resolen això de forma nativa, sense eines ni preprocessadors:

I ara qualsevol fitxer d'estil del projecte les pot fer servir, inclosos els .module.css, perquè les variables sí que travessen l'àmbit local: el que CSS Modules renomena són les classes, no les propietats personalitzades.

Avantatges concrets:

Aquest últim punt mereix un exemple, perquè combina el millor de les estratègies 2 i 3:

El JavaScript només aporta la dada; tota la presentació —inclosa la transició, impossible en un estil en línia— continua al CSS. És el patró recomanat per a estils dinàmics.

No és «triar-ne una i descartar la resta»: les estratègies es complementen, i aquest repartiment és el que veuràs a la majoria de projectes amb Vite:

Estructura de fitxers resultant:

Amb això, TargetaBicicleta és per fi una unitat completa: el seu marcatge, la seva lògica i el seu estil són a la mateixa carpeta, amb el mateix nom, i es poden esborrar junts sense deixar rastre. Aquesta era la promesa de la primera lliçó del mòdul.

• Usar class en lloc de className. L'error més repetit de React. class és paraula reservada de JavaScript.
• Oblidar el .module al nom del fitxer. TargetaBicicleta.css és global; només TargetaBicicleta.module.css activa l'àmbit local. El símptoma és que l'import estils arriba buit i les classes no s'apliquen.
• Escriure className={estils} en lloc de className={estils.targeta}. estils és un objecte; React acabarà pintant [object Object] com a classe.
• Referir-se a una classe que no existeix al mòdul. estils.targeat val undefined i l'element es queda sense classe, sense cap error. És el fallo més difícil de veure: revisa sempre l'HTML generat a l'inspector.
• Escriure CSS amb guions en un mòdul i accedir-hi amb punt. .targeta-destacada obliga a estils['targeta-destacada']. Usa camelCase als mòduls.
• Inserir false en una plantilla de classe. `targeta ${destacada && 'destacada'}` produeix literalment "targeta false" quan la condició és falsa. Usa el helper classes o un ternari amb cadena buida.
• Posar unitats on React ja les posa, o no posar-les on calen. A style, width: 300 és 300px, però width: '80%' necessita ser cadena. I flex: 1 o zIndex: 10 van sense unitat.
• Intentar :hover amb estils en línia. No existeix. Si el necessites, cal una classe.
• Consell: comença per les variables CSS. Abans d'escriure el primer component d'un projecte, defineix la paleta a :root. Estalvia una refactorització garantida.
• Consell: anomena les classes d'un mòdul pel seu paper, no pel seu aspecte. .titol i .preu envelleixen bé; .textVerd no.
• Consell: si un component necessita més de tres o quatre classes condicionals, revisa el seu disseny. Sol ser senyal que calen dos components diferents.
• Nota sobre accessibilitat: el color mai no ha de ser l'únic portador d'informació. El nostre EtiquetaEstat encerta en mostrar també el text de l'estat junt amb el color. Això es tracta a fons a Accessibilitat en Components Interactius.

Migra EtiquetaEstat de CSS global a CSS Modules. Crea src/components/EtiquetaEstat.module.css amb una classe base i una classe per cada estat (disponible, alquilada, mantenimiento), fent servir les variables CSS de la paleta. Adapta el component perquè combini la classe base amb la de l'estat rebut per props, i afegeix un efecte de :hover que augmenti lleugerament l'opacitat.

Pista: la classe de l'estat cal obtenir-la de l'objecte d'estils, no construir-la amb una plantilla de cadena.

Crea el component DisponibilitatEstacio complet (src/components/DisponibilitatEstacio.jsx i el seu mòdul CSS). Ha de rebre una estacio del domini i un nombre de places ocupades, i mostrar el nom, el recompte i una barra de progrés. L'amplada de la barra s'ha de passar com a variable CSS des del component, i el color ha de canviar segons l'ocupació: verd per sota del 60 %, taronja entre el 60 % i el 85 %, vermell per sobre.

Usa el helper classes per triar la classe de color.

Per a cada situació, indica quina estratègia d'estil triaries i per què. Justifica-ho en dues o tres frases.

1. El reinici de marges i el box-sizing de tota l'aplicació.
2. El color de fons d'una fila de taula que depèn de l'estat de la bicicleta (tres valors possibles).
3. La posició exacta d'un tooltip, calculada a partir de les coordenades del ratolí.
4. Un botó de marca reutilitzable amb estats :hover, :focus i :disabled.
5. La paleta de colors corporativa de CicloUrbano.

Solució 1.

El punt clau: className={`estat estat--${estat}`} deixa de funcionar amb mòduls, perquè les classes estan renombrades. Cal consultar-les a l'objecte amb estils[estat]. I si arribés un estat inesperat, estils[estat] seria undefined i el helper classes el descartaria sense trencar res: l'etiqueta es pintaria sense color de fons en lloc de fallar.

Solució 2.

Repartiment de responsabilitats: el component calcula només la dada (percentatge i nivell), el mòdul CSS aporta tota la presentació —inclosa la transició— i l'estil en línia es limita a entregar una variable. Tant percentatge com nivell són valors derivats: cap dels dos és estat, com vas estudiar a la lliçó anterior.

Solució 3.

Ja saps donar estil a un component de React amb criteri, no per costum. Has vist les quatre estratègies sobre el mateix TargetaBicicleta: el CSS global, còmode però amb un espai de noms compartit on les col·lisions són qüestió de temps; els estils en línia, imbatibles per a valors calculats en execució i inútils per a tota la resta —sense :hover, sense media queries, sense animacions—; els CSS Modules, que Vite suporta de sèrie i que resolen l'àmbit local per construcció; i les alternatives de l'ecosistema, CSS-in-JS i frameworks d'utilitats, amb els seus compromisos ben identificats.

CicloUrbano adopta la combinació que ofereix el millor equilibri: variables CSS a :root per a la paleta i les formes, un .module.css al costat de cada component per a tot el seu estil, i estils en línia només per entregar valors calculats, preferiblement en forma de variable CSS perquè la presentació continuï vivint al CSS. Pel camí has incorporat dues eines que faràs servir constantment: construir classes a partir de les dades amb estils[bicicleta.tipus] i compondre classes condicionals amb el helper classes, que descarta els valors falsos sense embrutar el JSX.

Amb això tanques el Mòdul 2. Saps què és un component com a unitat de disseny i com traçar-ne els límits; saps llegir el codi heretat escrit amb classes i per què tot el nou s'escriu amb funcions; saps parametritzar un component amb props de només lectura i compondre contingut amb children; saps donar-li memòria amb estat, actualitzar-lo de forma immutable i distingir el que es guarda del que es deriva; i ara saps vestir-lo sense que l'estil es descontroli. TargetaBicicleta és, per fi, una unitat completa: marcatge, lògica i estil a la mateixa carpeta.

Però el catàleg continua sent un aparador. El SelectorTipus guarda el tipus triat i no filtra res; ComptadorPlaces resta places que no li importen a ningú més; no hi ha formularis, no hi ha validació i les llistes s'escriuen targeta a targeta. Falta la interacció de debò. Al Mòdul 3: Treballant amb Esdeveniments aprendràs a gestionar els esdeveniments de React amb totes les seves regles, a mostrar o amagar parts de la interfície amb renderitzat condicional, a pintar col·leccions completes amb map i a entendre per fi per a què serveixen les claus que vas veure en la reconciliació, a construir formularis controlats i a validar-los, i a fer que tot això sigui accessible. La lliçó següent és Gestió d'Esdeveniments a React, i a partir d'aquí CicloUrbano deixarà de mirar-se i començarà a respondre.