Klasser och css – kompromiss av logik!

Webbutveckling - Wibergs Web -Bäst i Skövde

Klasser – vad är det och hur används det?

Tyvärr måste jag bli lite teknisk här för att kunna förklara vad klasser i css är, men jag ska göra mitt bästa för att även den oinvigde ska förstå eller iaf få ett hum om vad det handlar om.

En klass är enkelt beskrivet ett sätt att sätta attribut på flera olika element genom att ange attribut en gång. Om man t.ex. vill ha att vissa attribut som storlek på text, färg på text och radhöjd på text ska vara samma för alla rubriker (andra-nivå-rubriker = h2) så kan man skriva så här:

HTML
<h2 style="font-size:14px;line-height:28px;color:#ff0000;">Rubrik1</h2>
<h2 style="font-size:14px;line-height:28px;color:#ff0000;">Rubrik2</h2>
<h2 style="font-size:14px;line-height:28px;color:#ff0000;">Rubrik3</h2>

Om man gör på ovanstående sätt och har väldigt många rubriker så det blir svårt/jobbigt att ändra då man måste ändra på alla ställen i sin html-kod där denna rubrik finns. W3C är en organisation som tar fram standarder som webbläsare bör följa och införandet av klasser gjorde det möjligt att på ett enkelt ändra dessa attribut på ett och samma ställe.

För att ändra och få samma resultat som ovan med klasser (i css) så kan man göra så här (klassnamnet definieras med en punkt innan i css):

HTML
<h2 class="title">Rubrik1</h2>
<h2 class="title">Rubrik2</h2>
<h2 class="title">Rubrik3</h2>

CSS

.title {font-size:14px;line-height:28px;color:#ff0000;}

Vill man t.ex. ändra textfärgen från röd (#ff0000) till grön (#00ff00) så är det bara att ändra i sin css så att den får genomslag på alla rubriker som har denna klass.
CSS
.title {font-size:14px;line-height:28px;color:#00ff00;}

Det går också att kombinera olika klasser där man utnyttjar attributen från bägge klasserna (eller fler klasser). Vill man t.ex. ha två stycken blå titlar så skulle man kunna göra något sådant här:

HTML
<h2 class="title blue">Rubrik1</h2>
<h2 class="title blue">Rubrik2</h2>
<h2 class="title">Rubrik3</h2>

Jag tror det var här förvirringen började för mig. Rent logiskt borde man kunna skriva:

CSS
.title blue {color:#0000FF;}

för att kunna ange den blå färgen för h2, men detta kommer inte ha någon effekt på färgen i exemplet utan man måste istället skriva:

CSS
.title.blue {color:#0000FF;}

Detta beror egentligen på två saker.

  1. Klasser kan inte ha mellanslag i sina namn i html.
  2. I css betyder mellanslag nästa nivå i det s.k. DOM-trädet. Här finns en bra förklaring på vad DOM-trädet är (engelska)

Denna HTML betyder alltså att rubriken H2 ska inkludera klasserna: title, webdesign och webdev
<h2 class="title webdesign webdev">Rubrik1</h2>

Att kunna ändra allt på ett ställe är givetvis en stor styrka med klasser men ytterligare en styrka är just att det går att kombinera klasser på ett flexibelt sätt för att uppnå olika resultat Den klass som definieras sist i css är den/de attribut som gäller.

CSS
.title {font-size:14px;line-height:28px;color:#ff0000;}
.webdesign {color:#0000ff;}
.webdev {color:#cccccc;}

Denna HTML betyder alltså att rubriken H2 ska inkludera klasserna: webdesign och webdev
<h2 class="webdesign webdev">Rubrik1</h2>

Resultatet av ovanstående HTML är att rubriken blir grå (#cccccc) därför att klassen webdev definierades sist i css. Lägg märke till att klassen title inte finns med här och textstorleken och radhöjden blir det som är satt som standard av webbläsaren du tittar i (vilket varierar).

Klasser är ett förvirrande begrepp

När jag började lära mig koda css (cascade styling sheets) så måste jag erkänna att jag hade väldigt svårt att förstå hur allt hängde ihop. Det pratades bland annat om klasser och jag förstår i ärlighetens namn inte än idag varför man valde att kalla det klasser i html. Det här med mellanslag som betyder olika beroende på om det är html eller css för samma sak kändes också förvirrande. Tilläggas kan att det finns ett begrepp inom objektorientering som också heter klasser – och då är det något helt annat man pratar om som bidrar till ytterligare förvirring. Men bara man förstår grundprincip så är det väldigt kraftfullt och absolut värt att lära sig – om man är det minsta intresserad av att bygga en hemsida.

Även om klasser i css är extremt kraftfullt och logiskt – så är allting med klasser ändå inte logiskt!? Att vara webbutvecklare kräver alltså att man är extremt logisk samtidigt som man måste kompromissa med sin logik för att nå det resultat man önskar!

Författare till detta inlägg (till denna blogg som handlar om webbdesign, webbutveckling och SEO)

Jag heter Gustav Wiberg och driver Skövdes genuina webbyrå Wibergs Web. Kontakta mig genom att klicka här.

Kommentarer är stängda