kaxigt.com

Jag skriver om webben för webben

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

Postad: 7 juli 2007 | CSS-guider | 3 Comments
Lästid: 3 minuter

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.

Denna post innehåller kod-snippar som du kan använda. Det är alltid bra att ta en backup av din stilmall och funktionsfil innan.

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. Det är semantiskt inkorrekt! Istället bör man använda definitionerna till vad de är till för.

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.

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.

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

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:

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

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

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

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 absolut 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.

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.