Några bra csstips att lägga på minnet

När vi använder css vill de flesta av oss utnyttja denna maximalt men hur använder man sig av css på ett bra sätt? Vad bör vi undvika? Vad kan vi förbättra? Hur kan vi göra det enklare för oss? Jag kommer här att lista några bra tips som kan vara värda att lägga på minnet.

1 – Dela stilmallen

En god tumregel till att börja med är att dela stilmallen för bästa resultat. Försök också att hålla en enkel design. Med mindre grafik underlättar du för dig själv. Sidan blir dessutom mer snabbladdad.

2 – planera logiskt

När du planerar din layout tänk logiskt – det vill säga uppifrån och ned – utifrån och in. Börja med din wrapper. Fortsätt sedan med header, sidebar osv.

Undvik ‘divitus'” och ‘classitus’ – tänk ‘semantikus’

Kännetecknande för xhtml är just semantiken (även om den är minst lika viktig även annars). Ett vanligt fel många gör är att modifiera redan vedertagen semantik. Titta på följande exempel:

  1. <div id="header"></div>
  2. <div class="bold">Huvudrubriken</div>
  3. <div id="subheader"></div>
  4. <div class="bold">Underrubrik</div>
  5. <div>content</div>

Det här är semantiskt inkorrekt! Istället bör man använda definitionerna till vad de är till för.
Korrekt semantik

  1. <h1>Huvudrubriken</h1>
  2. <h2>underrubriken</h2>
  3. <p>content</p>

Att använda semantisk html innebär således att använda respektive html element för det som de är gjorda till – inte till att användas för allt. Divar använder man alltså för att dela in sidan i logiska block när det inte finns andra alternativ och där varje blocks id tillåter dig att koppla andra element till dessa. Fundera därför över hur många boxar/divar du behöver. Säkerligen använder du fler än vad du egentligen behöver. Flertalet har dessutom en tendens att lägga all information inuti för ändamålet särskilda divar – det behöver man faktiskt inte göra. Ett vanligt exempel på nästlade block är detta:

  1. <div id="sidebar">
  2. <div id="navcontainer">
  3. <div id="menu">
  4. <ul>
  5. <li>link</li>
  6. </ul>
  7. </div>
  8. </div>
  9. </div>

Varför då krångla till det när du kan koppla din navigering via ett specifikt id som redan finns? Ta en titt på css:n här nedanför så förstår ni vad jag menar.

  1. #sidebar...
  2. #sidebar ul {list-style: none;background: transparent;margin: 5px 0px 10px 0px;padding: 0;}
  3. #sidebar ul li {list-style:none;background: url(images/din_bild.gif) no-repeat 10px .30em; padding:3px 20px 5px 30px;}
  4. #sidebar ul li a {display: block;color:#73AB02;text-decoration: none;margin: 0;padding: 3px 0 5px 5px;border-bottom: 1px solid #eee;}
  5. #sidebar ul li a:hover {background: transparent;color:#ccc;border-bottom: 1px solid #ddd;}

Htmlkoden du lägger in i dokumentet blir sedan denna:

  1. <div id="sidebar">
  2. <ul>
  3. <li>link</li>
  4. </ul>
  5. </div>

Kan det bli enklare?
För det första eliminerar du en massa problem som kan uppstå när man nästlar olika div’s – exempelvis boxmodelhack. För det andra optimerar du såväl din css som din htmlsida med en ren semantisk välskriven kod, sk clean code. För det tredje blir sidorna mycket lättare att arbeta med. Du kan med gott samvete skapa en navigering för din header, sidebar samt main om du känner för det på samma vis som jag har beskrivit här ovanför. Du byter bara ut respektive id. Vill du sedan ha ett annat utseende på navigeringen i header och din mainbox, ja då ändrar du bara i inställningarna för csskoden gällande listorna i header och main. Svårare är det inte.

Ett annat mindre bra sätt att använda ett class-element för länkningen i listattributet är denna:

  1. a.link{color:f0a;text-decoration:none}

Det ger denna output i dokumentet:

  1. <ul>
  2. <li><a class="link" href="#">Link</a></li>
  3. </ul>

Det är väl ganska onödigt när du istället kan lösa det mycket smidigare med din css så här:

  1. #menu a {color:#f0a;text-decoration:none}

Det ger denna output i dokumentet:

  1. <ul id="menu">
  2. <li><a href="#">Link</a></li>
  3. </ul>

Det ger samma resultat men du slipper att peta in extrakoder i html-koden. På detta vis kan du också styra hur dina listor ska skilja sig från varandra – du märker bara upp dem med ett eget unikt id.

Organisera din css

Organisera dina block, id, och classer efter ett logiskt system så hittar du snabbare det du söker efter. Exempel #header – allt som har med header att göra. Du kan även, vilket jag föredrar, organisera upp din css så din struktur för layouten ligger för sig. Därefter kommer presentationen för denna. Sist dina andra element såsom listor osv.

Shorthanddeclaration

Om möjligt – använd short hand declaration. Du minimerar märkningen och optimerar stilmallen.

Positionering

Försök att undvika aboslut positionering i den mån det går.

Hacks

Försök att undvika olika hacks om det inte finns en väldokumenterad bugg. Använd istället conditional comments så långt det är möjligt eller en specifik stilmall för IE.

Lägg till egen kommentarer i stilmallen

Du vet väl att du själv kan lägga till egna kommentarer i stilmallen? Så länge du lägger kommenterna inom dessa tecken / * och * / kan du skriva vad du vill utan att webbläsarna kan “se” det. Ibland är det vara bra att skriva upp färgen på fonten så man minns den om det är någon särskild man tycker om.

Validera dina koder – både html som css

Glöm inte att validera under arbetets gång. Ju oftare du gör det – desto enklare blir det att du hittar några fel.

Liknande poster:

3 Comments Add yours

  1. Lasse Berg says:

    intressant sida du har, återkommer gärna!¨

    mvh: Lasse B

  2. Lena says:

    Ja sovmorgon är inte alls dumt 🙂

  3. Nina says:

    Så sant så Lena. Hahaha. Skrattar åt mig själv när jag tänker på hur ologisk jag varit genom åren när det gäller upplägget av min hemsida.
    Fast jag använt mig av divar och css på ett rätt bra sätt så är det ändå mycket jobb varje gång jag ska göra om etc efterosm jag ibland inte tänkt så logiskt redan från början. Men man lär sig allteftersom man gör om och inser vilket onödigt jobb man drar på sig. Förrut hade jag t.ex left.php, right.php etc på alla undersidor .. tills jag läste här hos dig om hur ma kan göra. Att använda main.php där man lägger in left.php, right.php etc. Och att sen på de sidorna få in hela sitt upplägg på ett bra sätt. Mycket smidigare. 🙂 Men det är ju också rätt kul att man allteftersom pluggar in mer info om webdesign/css och på så sätt lär sig genom att labba … Jag är sån som måste koda grej för grej för hand och verkligen labba innan det fastnar. Heh.
    Din blog blir dagens första med dagens första mugg kaffe. Tycker det är så kul när du skriver om såna här saker då det är så intressant. 🙂 Har unnat mig sovmorgon. 🙂
    Snart dags att bege sig. Önskar dig en trevlig helg.

Leave a Reply

Your email address will not be published. Required fields are marked *