Cascading Style Sheets (CSS) lar deg definere et elements utseende ved å koble til attributter du søker på det elementet. Disse attributter kan være enten og ID eller en klasse, og, som alle attributter, legger de nyttige opplysninger til elementene de er knyttet til.
Avhengig av hvilken egenskap du legger til i et element, kan du skrive en CSS-velger for å bruke de nødvendige visuelle stilene som trengs for å oppnå utseendet og følelsen for det elementet og nettstedet som helhet.
Mens enten ID eller klasser arbeider for å hekte seg i CSS-regler, vil moderne webdesignmetoder favorisere klasser over ID-er, delvis fordi de er mindre spesifikke og enklere å jobbe med generelt. Ja, du vil fortsatt finne mange nettsteder som bruker IDer, men disse attributter blir brukt mer sparsomt enn tidligere, mens klassene har tatt over moderne nettsider.
Enkelt eller flere klasser i CSS?
I de fleste tilfeller vil du tilordne en enkelt klasseattributt til et element, men du er faktisk ikke begrenset til bare én klasse, de er du med IDer. Mens et element bare kan ha et enkelt ID-attributt, kan du absolutt gi et element flere klasser, og i noen tilfeller gjør det at siden din blir lettere å stilere og mye mer fleksibel!
Hvis du må tilordne flere klasser til et element, kan du legge til tilleggsklassene og bare skille dem med et mellomrom i attributten din.
For eksempel har dette avsnittet tre klasser:
Dette er teksten til avsnittet
Dette setter følgende tre klasser på avsnittetiketten:
- Pullquote
- Utvalgt
- Venstre
Legg merke til mellomrom mellom hver av disse klassverdiene. Disse mellomrommene er hva som setter dem opp som forskjellige, individuelle klasser. Dette er også grunnen til at klassenavn ikke kan ha mellomrom i dem, fordi det ville bli satt som separate klasser. Hvis du for eksempel brukte "pullquote-featured-left" uten et mellomrom, ville det være en klasseverdi, men eksemplet over, hvor disse tre ordene er adskilt med et mellomrom, setter dem som individuelle verdier. Det er viktig å forstå dette konseptet når du bestemmer hvilke klasser som skal brukes på nettsidene dine.
Når du har klassens verdier i HTML, kan du deretter tildele disse som klasser i CSS og bruke stilene du vil legge til. For eksempel.
.pullquote {…}.featured {…}p.left {…}
I disse eksemplene vil CSS-deklarasjonene og verdiene parene være inne i de krøllete båndene, som er hvordan disse stilene vil bli brukt til den aktuelle velgeren.
Hvis du setter en klasse til et bestemt element (for eksempel,p.left), kan du fortsatt bruke den som en del av en liste over klasser; Vær imidlertid klar over at det bare vil påvirke de elementene som er spesifisert i CSS. Med andre ord, p.left stilen gjelder bare for avsnitt med denne klassen fordi selgeren din faktisk sier at den skal brukes til "avsnitt med en klassevalum av" venstre "". I motsetning til de andre to selektorer i eksemplet spesifiserer ikke et bestemt element, så de vil gjelde for ethvert element som bruker disse klasseværdiene.
Fordeler med flere klasser
Flere klasser kan gjøre det enklere å legge til spesielle effekter på elementer uten å måtte opprette en helt ny stil for det elementet.
For eksempel vil du kanskje ha muligheten til å flyte elementer til venstre eller høyre raskt. Du kan skrive to klasser
venstre og
Ikke sant med bare
float: venstre; og
float: right; i dem. Deretter, når du hadde et element du må flyte til venstre, ville du bare legge til klassen "venstre" til klasselisten.
Det er imidlertid en fin linje å gå her, men. Husk at webstandarder dikterer adskillelse av stil og struktur. Strukturen håndteres via HTML mens stilen er i CSS. Hvis HTML-dokumentet ditt er fylt med elementer som alle har klassenavn som "rød" eller "venstre", som er navn som dikterer hvordan elementene skal se fremfor hva de er, krysser du den linjen mellom struktur og stil. Jeg prøver å begrense mine ikke-semantiske klassenavn så mye som mulig av denne grunn.
Flere klasser, semantikk og JavaScript
En annen fordel ved å bruke flere klasser er at det gir deg mange flere interaktivitetsmuligheter.
Du kan bruke nye klasser til eksisterende elementer ved å bruke JavaScript uten å fjerne noen av de grunnleggende klassene. Du kan også bruke klasser til å definere semantikken til et element. Dette betyr at du kan legge til i tilleggsklasser for å definere hva det elementet betyr semantisk. Slik fungerer Microformats.
Ulemper ved flere klasser
Den største ulempen ved å bruke flere klasser på elementene dine er at det kan gjøre dem litt uhåndterlige å se på og håndtere over tid. Det kan bli vanskelig å avgjøre hvilke stilarter som påvirker et element, og hvis noen skript påvirker det. Mange av rammene som er tilgjengelige i dag, som Bootstrap, gjør stor bruk av elementer med flere klasser. Den 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 tilsidesetter stilen til en annen, selv om du ikke har tenkt på dette. Dette kan da gjøre det vanskelig å finne ut hvorfor stilene dine ikke blir brukt selv når det ser ut som de burde. Du må være oppmerksom på spesifisitet, selv med attributter som er brukt på det ene elementet!
Ved å bruke et verktøy som verktøyene for nettredaktører i Google Chrome, kan du lettere se hvordan klassene dine påvirker stilene dine og unngå dette problemet med motstridende stiler og attributter.
