Cascading Style Sheets (CSS) kan du definiera ett elements utseende genom att koppla in de attribut som du tillämpar för det elementet. Dessa attribut kan vara antingen och ID eller en klass och, liksom alla attribut, lägger de till hjälpinformation till de element som de är kopplade till.
Beroende på vilket attribut du lägger till i ett element kan du skriva en CSS-väljare för att tillämpa de visuella visuella stilar som behövs för att uppnå utseende och känsla för det elementet och webbplatsen som helhet.
Medan antingen ID eller klasser arbetar för att ansluta till dem med CSS-regler, har moderna webbdesignmetoder fördelar klasser över ID, delvis, eftersom de är mindre specifika och enklare att arbeta med övergripande. Ja, du hittar fortfarande många webbplatser som använder ID, men de attributen tillämpas mer sparsamt än tidigare, medan klasserna har tagit över moderna webbsidor.
Enstaka eller flera klasser i CSS?
I de flesta fall skulle du tilldela en enda klassattribut till ett element, men du är egentligen inte begränsad till bara en klass, de sätt du är med ID-nummer. Medan ett element bara kan ha ett enda ID-attribut, kan du absolut ge ett element flera klasser och i vissa fall gör det att din sida blir enklare att stil och mycket mer flexibel!
Om du behöver tilldela flera klasser till ett element, kan du lägga till tilläggsklasserna och helt enkelt skilja dem från ett mellanslag i ditt attribut.
Till exempel har denna paragraf tre klasser:
Detta skulle vara texten i stycket
Detta ställer in följande tre klasser på stycke-taggen:
- Pullquote
- Dagens
- Vänster
Lägg märke till mellanrummen mellan var och en av dessa klassvärden. Dessa utrymmen är vad som ställer upp dem som olika, enskilda klasser. Detta är också varför klassnamn inte kan ha mellanslag i dem, för att göra det skulle göra dem som separata klasser. Om du till exempel använde "pullquote-featured-left" utan ett mellanslag, skulle det vara ett klassvärde, men exemplet ovan, där dessa tre ord är separerade med ett mellanslag, sätter de som individuella värden. Det är viktigt att förstå detta koncept när du bestämmer vilka klassvärden som ska användas på dina webbsidor.
När du har klassvärden i HTML kan du sedan tilldela dem som klasser i din CSS och tillämpa de stilar du vill lägga till. Till exempel.
.pullquote {…}.featured {…}p.left {…}
I dessa exempel skulle CSS-deklarationerna och värdena parna vara inuti de krökta axlarna, vilket är hur dessa stilar skulle appliceras på lämplig väljare.
Om du ställer in en klass till ett visst element (till exempel,p.left), kan du fortfarande använda den som en del av en klass av klasser; var dock medveten om att det endast kommer att påverka de element som anges i CSS. Med andra ord, p.left stil gäller endast punkter med den här klassen eftersom din väljare faktiskt säger att den ska tillämpas på "stycken med ett klassvärde av" vänster ". Däremot anger inte de andra två selektorerna i exemplet ett visst element, så de skulle gälla för alla element som använder dessa klassvärden.
Fördelar med flera klasser
Flera klasser kan göra det enklare att lägga till special effekter på element utan att behöva skapa en helt ny stil för det elementet.
Du kan till exempel ha möjlighet att snabbt flytta element till vänster eller höger. Du kan skriva två klasser
vänster och
höger med bara
flyta till vänster; och
float: höger; i dem. Då, när du hade ett element måste du flyta till vänster, du skulle helt enkelt lägga till klassen "vänster" till sin klasslista.
Det finns dock en bra linje att gå här. Kom ihåg att webbstandarder dikterar separation av stil och struktur. Strukturen hanteras via HTML medan stilen är i CSS. Om ditt HTML-dokument är fyllt med element som alla har klassnamn som "röd" eller "vänster", som är namn som dikterar hur element ska se ut snarare än vad de är, passerar du den linjen mellan struktur och stil. Jag försöker begränsa mina icke-semantiska klassnamn så mycket som möjligt av denna anledning.
Flera klasser, semantik och JavaScript
En annan fördel med att använda flera klasser är att det ger dig många fler möjligheter till interaktivitet.
Du kan tillämpa nya klasser på befintliga element med hjälp av JavaScript utan att ta bort några av de ursprungliga klasserna. Du kan också använda klasser för att definiera semantiken för ett element. Det betyder att du kan lägga till ytterligare klasser för att definiera vad det elementet betyder semantiskt. Så fungerar Microformats.
Nackdelar med flera klasser
Den största nackdelen med att använda flera klasser på dina element är att det kan göra dem lite obehagliga att titta på och hantera över tiden. Det kan bli svårt att bestämma vilka stilar som påverkar ett element och om några skript påverkar det. Många av de ramar som finns tillgängliga idag, som Bootstrap, använder tunga element med flera klasser. Den koden kan gå ur hand och svårt att arbeta med mycket snabbt om du inte är försiktig.
När du använder flera klasser riskerar du också att ha en stil för en klass att åsidosätta en annan stil, även om du inte tänkte på det här. Detta kan då göra det svårt att räkna ut varför dina stilar inte tillämpas även när det verkar som om de borde. Du måste vara medveten om specificitet, även med attributen som tillämpas på det här 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 undviker detta problem med motstridiga stilar och attribut.
