No es limita a una única classe CSS per element.
Les fulles d'estil en cascada (CSS) permeten definir l'aparença d'un element enganxant-se als atributs que apliqueu a aquest element. Aquests atributs poden ser ID i una classe i, com tots els atributs, afegeixen informació útil als elements als quals estan connectats. Segons l'atribut que afegiu a un element, podeu escriure un selector CSS per aplicar els estils visuals necessaris necessaris per aconseguir l'aspecte d'aquest element i del conjunt del lloc web.
Tot i que les ID o les classes funcionen amb la finalitat de connectar-les amb normes CSS, els mètodes moderns de disseny web afavoreixen les classes sobre ID, en part, perquè són menys específics i més fàcils de treballar en general. Sí, encara trobareu molts llocs que utilitzen identificadors, però aquests atributs s'apliquen amb menys freqüència que en el passat, mentre que les classes han assumit les pàgines web modernes.
Classes individuals o múltiples en CSS?
En la majoria dels casos, assignaria un atribut d'una sola classe a un element, però en realitat no es limita a una sola classe, de la mateixa manera que es troba amb ID. Tot i que un element només pot tenir un únic atribut d'identificació, podeu donar absolutament un element a diverses classes i, en alguns casos, fer-ho farà que la vostra pàgina sigui més senzilla i molt més flexible.
Si heu d'assignar diverses classes a un element, podeu afegir les classes addicionals i, simplement, separar-les amb un espai al vostre atribut.
Per exemple, aquest paràgraf té tres classes:
pullquote featured left "> Aquest seria el text del paràgraf
Això estableix les següents tres classes a l'etiqueta del paràgraf:
- Pullquote
- Destacat
- Esquerra
Observeu els espais entre cadascun d'aquests valors de classe. Aquests espais són els que els configuren com a classes individuals diferents. Per això, els noms de classe no poden tenir espais en ells, perquè fer-ho els faria com a classes separades.
Per exemple, si utilitzeu "pullquote-featured-left" sense un espai, seria un valor de classe, però l'exemple anterior, on aquestes tres paraules es separen amb un espai, les estableix com a valors individuals. És important entendre aquest concepte a mesura que decideix els valors de classe que s'utilitzaran a les vostres pàgines web.
Una vegada que hàgiu obtingut els valors de classe en HTML, podeu assignar-los com a classes al CSS i aplicar els estils que voleu afegir. Per exemple.
.pullquote {...}
.featured {...}
p.left {...}
En aquests exemples, les parelles de declaracions i valors de CSS estarien dins dels claudàtors, de manera que aquests estils s'aplicarien al selector adequat.
Nota: si estableix una classe en un element específic (per exemple, p.left), encara es pot utilitzar com a part d'una llista de classes; No obstant això, tingueu en compte que només afectarà els elements especificats al CSS. En altres paraules, l'estil p.left només s'aplicarà als paràgrafs amb aquesta classe ja que el selector està dient que s'aplica a "paràgrafs amb un valor de classe de" esquerra ". Per contra, els altres dos selectors de l'exemple no especifiquen un determinat element, de manera que s'aplicaran a qualsevol element que utilitzi aquests valors de classe.
Avantatges de classes múltiples
Les classes múltiples poden facilitar l'addició d'efectes especials als elements sense haver de crear un estil nou per a aquest element.
Per exemple, és possible que vulgueu tenir la possibilitat de flotar elements a l'esquerra o a la dreta ràpidament. Podeu escriure dues classes d'esquerra i dreta amb només flotar: a l'esquerra; i flotant: correcte; en ells. Després, cada vegada que tenies un element que necessites flotar a l'esquerra, només has d'afegir la classe "esquerra" a la llista de classes.
No obstant això, hi ha una bona línia per caminar aquí. Recordeu que els estàndards web dicten la separació de l'estil i l'estructura. L'estructura es gestiona a través d'HTML mentre l'estil es troba en CSS.
Si el vostre document HTML està ple d'elements que tenen noms de classe com "vermell" o "a l'esquerra", que són noms que determinen com han de mirar els elements en lloc del que són, creuem aquesta línia entre estructura i estil. Intento limitar al màxim els meus noms de classe no semàntica per aquest motiu.
Classes múltiples, Semàntica i JavaScript
Un altre avantatge per utilitzar classes múltiples és que li ofereix moltes més possibilitats d'interactivitat.
Podeu aplicar classes noves als elements existents mitjançant JavaScript sense treure cap de les classes inicials. També podeu utilitzar classes per definir la semàntica d'un element . Això significa que podeu afegir-hi classes addicionals per definir el que significa semànticament. Així funcionen els Microformats.
Desavantatges de les classes múltiples
El desavantatge més gran d'utilitzar classes múltiples en els elements és que poden fer-les una mica difícils d'observar i gestionar amb el temps. Pot ser difícil determinar quins estils estan afectant un element i si hi ha scripts que l'afecten. Molts dels marcs disponibles avui, com Bootstrap, fan un ús intensiu d'elements amb diverses classes. Aquest codi pot sortir de la mà i treballar amb molta rapidesa si no teniu cura.
Quan utilitzeu diverses classes, també corre el risc que l'estil d'una classe anul·li l'estil d'un altre, fins i tot si no teniu cap intenció. Això pot dificultar per què els vostres estils no s'apliquen fins i tot quan sembli que ho haurien de fer.
Heu de tenir en compte l'especificitat, fins i tot amb els atributs aplicats a aquell element.
Si feu servir una eina com ara les eines per a administradors web de Chrome, podeu veure més fàcilment com afecten les vostres classes els vostres estils i evitar aquest problema d'estils i atributs conflictius.
Article original de Jennifer Krynin. Editat per Jeremy Girard el 17/08/17