Cascading Style Sheets definiera utseendet på en webbsida genom att ansluta till attributen som du tillämpar på det elementet. Dessa attribut kan vara antingen ett ID eller en klass och som alla attribut lägger de till användbar information till de element som de är kopplade till.
Beroende på vilket attribut du lägger till ett element kan du skriva en CSS-väljare för att tillämpa nödvändiga visuella stilar som behövs för att uppnå utseendet och känslan för det elementet och webbplatsen som helhet.
Medan antingen ID eller klasser fungerar i syfte att ansluta till dem med CSS-regler, modern webbdesign metoder gynnar klasser framför ID, delvis eftersom de är mindre specifika och lättare att arbeta med överlag.
En eller flera klasser i CSS?
I de flesta fall tilldelar du ett enda klassattribut till ett element, men du är faktiskt inte begränsad till bara en klass som du är med ID. Medan ett element kan bara ha ett enda ID-attribut, du kan ge ett element flera klasser och, i vissa fall, gör det din sida lättare att utforma och mycket mer flexibel.
Om du behöver tilldela flera klasser till ett element, lägg till ytterligare klasser och separera dem helt enkelt med ett mellanslag i ditt attribut.
Till exempel har det här stycket tre klasser:
Detta skulle vara texten i stycket
Detta ställer in följande tre klasser på stycketaggen:
- Pullquote
- Utvalda
- Vänster
Lägg märke till mellanrummen mellan var och en av dessa klassvärden. Dessa utrymmen är det som ställer upp dem som olika, individuella klasser. Det är också därför klassnamn inte kan ha mellanslag eftersom de skulle ställa in dem som separata klasser.
När du väl har fått dina klassvärden i HTMLkan du sedan tilldela dessa som klasser i din CSS och tillämpa de stilar du vill lägga till. Till exempel.
.pullquote {... }
.featured {... }
vänster {... }
I dessa exempel visas CSS-deklarationer och värdenpar inom de lockiga hakparenteserna, vilket är hur dessa stilar tillämpas på lämplig väljare.
Om du ställa in en klass till ett specifikt element (till exempel, vänster), du kan fortfarande använda den som en del av en lista över klasser; var dock medveten om att det bara kommer att påverka de element som anges i CSS. Med andra ord, vänster stil gäller bara stycken med den här klassen eftersom din väljare faktiskt säger att den ska tillämpas på "stycken med klassvärdet vänster"Däremot anger de andra två väljarna i exemplet inte ett visst element, så de skulle tillämpas på alla element som använder dessa klassvärden.
Flera klasser, semantik och JavaScript
En annan fördel med att använda flera klasser är att det ökar möjligheterna till interaktivitet.
Tillämpa nya klasser på befintliga element med JavaScript utan att ta bort några av de första klasserna. Du kan också använda klasser för att definiera semantik för ett element - lägg till ytterligare klasser för att definiera vad det elementet betyder semantiskt. Detta tillvägagångssätt är hur Mikroformat Arbetar.
Fördelar med flera klasser
Att lägga flera klasser kan göra det lättare att lägga till specialeffekter till element utan att behöva skapa en helt ny stil för det elementet.
Om du till exempel vill flyta element åt vänster eller höger kan du skriva två klasser:
vänster.
och.
rätt.
med bara.
flyta till vänster;
och.
flyta: höger;
i dem. Sedan, när du hade ett element du behöver för att flyta åt vänster, skulle du helt enkelt lägga till klassen "vänster" i sin klasslista.
Det finns dock en fin linje att gå här. Kom ihåg att webbstandarder dikterar separationen av stil och struktur. Strukturen hanteras med HTML medan stilen är i CSS. Om ditt HTML-dokument är fyllt med element som alla har klassnamn som "rött" eller "kvar", vilket är namn som diktera hur element ska se ut snarare än vad de är, du korsar gränsen mellan struktur och stil.
Nackdelar med flera klasser
Den största nackdelen med att använda flera samtidiga klasser på dina element är att det kan göra dem lite besvärliga att titta på och hantera över tiden. Det kan bli svårt att avgöra vilka stilar som påverkar ett element och om några skript påverkar det. Många av de ramar som finns idag, som Bootstrap, använder tunga element med flera klasser. Den koden kan komma ur hand och svår att arbeta med mycket snabbt om du inte är försiktig.
När du använder flera klasser riskerar du också att stilen för en klass åsidosätter stilen för en annan. Den här kollisionen kan göra det svårt att ta reda på varför dina stilar inte tillämpas även när det verkar som de borde. Förbli medveten om specificitet, även med attributen som tillämpas på det ena elementet.
Genom att använda ett verktyg som verktyg för webbansvariga i Google Chrome kan du lättare se hur dina klasser påverkar dina stilar och undvika detta problem med motstridiga stilar och attribut.