Cascading Style Sheets definere utseendet til et nettsideelement ved å koble til attributtene du bruker på det elementet. Disse attributtene kan være enten en ID eller en klasse, og som alle attributter, legger de til nyttig informasjon til elementene de er knyttet til.
Avhengig av hvilket attributt du legger til et element, kan du skrive en CSS-velger for å bruke nødvendige visuelle stiler som er nødvendige for å oppnå utseendet og følelsen for det elementet og nettstedet som en helhet.
Mens enten ID-er eller klasser fungerer med det formål å koble seg til dem med CSS-regler, moderne webdesign metoder favoriserer klasser fremfor ID-er, delvis fordi de er mindre spesifikke og lettere å jobbe med generelt.
En eller flere klasser i CSS?
I de fleste tilfeller tilordner du et enkelt klasseattributt til et element, men du er faktisk ikke begrenset til bare en klasse slik du er med ID-er. Mens et element kan bare ha et enkelt ID-attributt, du kan gi et element flere klasser, og i noen tilfeller vil det gjøre siden din lettere å style og mye mer fleksibel.
Hvis du trenger å tilordne flere klasser til et element, kan du legge til flere klasser og bare skille dem med et mellomrom i attributtet.
For eksempel har dette avsnittet tre klasser:
Dette ville være teksten i avsnittet
Dette angir følgende tre klasser på avsnittstaggen:
- Pullquote
- Utvalgt
- Venstre
Legg merke til mellomrom mellom hver av disse klasseverdiene. Disse rommene er det som setter dem opp som forskjellige, individuelle klasser. Dette er også grunnen til at klassenavn ikke kan ha mellomrom fordi det ville angi dem som separate klasser.
Når du har fått klasseverdiene dine i HTML, kan du deretter tilordne disse som klasser i CSS og bruke stilene du vil legge til. For eksempel.
.pullquote {... }
.featured {... }
s. venstre {... }
I disse eksemplene vises CSS-deklarasjonene og verdiparene inne i de krøllete bukkene, og det er slik disse stilene vil bli brukt på riktig velger.
Hvis du sette en klasse til et bestemt element (for eksempel, venstre), kan du fortsatt bruke den som en del av en liste over klasser; Vær imidlertid oppmerksom på at det bare vil påvirke elementene som er spesifisert i CSS. Med andre ord, venstre stil vil bare gjelde for avsnitt med denne klassen siden velgeren din faktisk sier å bruke den på "avsnitt med en klasseverdi på venstre, "Derimot spesifiserer de to andre velgerne i eksemplet ikke et bestemt element, så de vil gjelde for ethvert element som bruker disse klasseverdiene.
Flere klasser, semantikk og JavaScript
En annen fordel med å bruke flere klasser er at det øker interaktivitetsmulighetene.
Bruk nye klasser på eksisterende elementer ved hjelp av JavaScript uten å fjerne noen av de første klassene. Du kan også bruke klasser for å definere semantikk av et element - legg til flere klasser for å definere hva elementet betyr semantisk. Denne tilnærmingen er hvordan Mikroformater virker.
Fordeler med flere klasser
Lagdeling av flere klasser kan gjøre det lettere å legge til spesialeffekter til elementer uten å måtte lage en helt ny stil for det elementet.
Hvis du for eksempel vil flyte elementer til venstre eller høyre, kan du skrive to klasser:
venstre.
og.
Ikke sant.
med bare.
flyte: venstre;
og.
flyte: høyre;
i dem. Så når du hadde et element du trenger for å flyte til venstre, vil du ganske enkelt legge til klassen "venstre" i klasselisten.
Det er imidlertid en fin linje å gå her. Husk at nettstandarder dikterer skille mellom stil og struktur. Strukturen håndteres ved hjelp av HTML mens stilen er i CSS. Hvis HTML-dokumentet ditt er fylt med elementer som alle har klassenavn som "rødt" eller "igjen", som er navnene det diktere hvordan elementene skal se ut i stedet for hva de er, krysser du den linjen mellom struktur og stil.
Ulemper ved flere klasser
Den største ulempen med å bruke flere samtidige klasser på elementene dine er at det kan gjøre dem litt uhåndterlige å se på og administrere over tid. Det kan bli vanskelig å bestemme hvilke stiler som påvirker et element, og om noen skript påvirker det. Mange av rammene som er tilgjengelige i dag, som Bootstrap, bruker tungt elementer av flere klasser. Denne koden kan komme ut av hånden og vanskelig å jobbe med veldig raskt hvis du ikke er forsiktig.
Når du bruker flere klasser, risikerer du også at stilen for en klasse overstyrer stilen til en annen. Denne kollisjonen kan gjøre det vanskelig å finne ut hvorfor stilene dine ikke blir brukt, selv når det ser ut til at de burde. Vær oppmerksom på spesifisitet, selv med attributtene som brukes til det ene elementet.
Ved å bruke et verktøy som Webmaster-verktøyene i Google Chrome, kan du lettere se hvordan klassene dine påvirker stilene dine, og unngå dette problemet med motstridende stiler og attributter.