chrillemeter
voigtan
Roosweb
LP_MAXIPlanera ditt CSS dokument
Inledning
I denna artikel kommer jag att förklara hur du kan organisera och planera ditt CSS dokument på bästa möjliga sätt (relativ tolkning). Webben blir mer och mer komplex, trots att vi ständigt försöker simplifiera våra koder och designer. I och med detta så krävs det en mer effektiv och förmodligen en mer ”komplex” CSS kod för att hemsidan vi bygger skall fungera på ett så bra sätt som möjligt. Det är därför viktigt för oss att vi kan planera och organisera vår CSS kod för att få en sida som är lätt att underhålla.
Jag förväntar mig i denna artikel att du som läsare har grundläggande kunskaper om CSS, även om det vi går igenom är ganska så grundläggande. Det är ju inte CSS koden som är svår, det är hur man använder den.
Kommentera din CSS kod
Att kommentera en kod ses som något självklart i varje projekt som tänker ”ett steg längre”. Den hjälper dig och andra att förstå koden och dess syfte samt underlättar felsökningen i koden. Det blir ju mycket lättare att hitta det man letar efter.
Men vad klassas som en meningsfull kommentar? Nedan nämner jag exempel på sådana kommentarer som anses vara viktiga i webbranchen, enligt mina egna undersökningar samt olika informationskällor.
- Senast uppdaterad:
Denna information hjälper utvecklaren att snabbt när dokumentet uppdaterades senast. Exempel:
/* -------------------------------------------------------------------
ASPKOLL.SE
Uppdaterad: 2009-01-01
Av: Shadi Domat
Uppdateringar: Avdelningen ’Medlemmar’ lades till
-------------------------------------------------------------------*/
- Referenser:
Kommenteringen kan även användas som en snabb referens till huvudkoden (standard CSS dokument). Om du t.ex. har i ditt huvuddokument angett värden som kan vara viktiga att känna till i detta dokument, så kan du nämna de snabbt i kommentaren: Exempel:
/* -------------------------------------------------------------------
FÄRGER I MAIN.CSS
Bakgrunden: #000 (svart)
Textfärg: #fff (vit)
Länkfärg: #990000 (vinröd)
osv…
------------------------------------------------------------------- */
- Organisation:
Denna punkt är inte svår att förstå. Kommenteringen kan användas till att helt enkelt definiera vilken avdelning det är koden är till för. Exempel:
/* -------------------------------------------------------------------
Medlemmar
------------------------------------------------------------------- */
/* -------------------------------------------------------------------
Forumet
-------------------------------------------------------------------*/
- Påminnelser samt övrig information:
Du kan även lämna information och påminnelser till dig själv eller andra som skall använda koden som kommentarer. Exempel:
/* -------------------------------------------------------------------
Kom ihåg att bredden på DIV:en blir 6 pixlar mindre i
Internet Explorer 6. Så det där bör vi göra något åt nästa
gång vi uppdaterar koden
------------------------------------------------------------------- */
Definiera generella regler och huvudklasser högst upp i dokumentet
Börja med att sätta inställningarna för de generella HTML elementen högst upp i dokumentet, till exempel:
body {
background: #fff;
color: #000;
font-size: 12px;
}
h1 {
color: #000;
font-size: 20px;
}
img {
border: 1px solid #000;
}
Efter detta listar du upp alla klasser som du ska använda dig av under denna avdelning eller sida, till exempel:
.redText {
color: #ff3300;
font-weight: bold;
}
.hideDiv {
display: none;
}Sätt CSS koden i samma ordning som XHTML koden
Ordningen av XHTML koden borde vara utgångspunkten för ordningen av din CSS kod. Genom att ha detta i åtanke när du kodar så kommer du att lättare kunna bilda en uppfattning om din CSS kod i koppling till in XHTML kod vid snabba överblick samt när du ska leta efter hur ett visst element är inställt i CSS koden.
Lär dig när du ska använda element, ID samt klasser
Det är viktigt att känna till skillnaderna mellan element, ID och klasser. Varför? Jo, för att genom dessa kunskaper så kan du (1) dels skapa en mer effektiv kod samt (2) reducera storleken på din CSS fil. Nedan förklaras skillnaderna mellan dessa tre användningssätt.
- Element – Dessa är XHTML element så som paragrafer (<p>), rubriker (<h1>) samt andra element som du använder dig av i dokumentet. Exempel på kod:
p {
margin: 0px;
font-size: 12px;
} - ID – Alla ID skall vara unika, d.v.s. att varje element eller objekt som har ett ID, skall ha ett unikt sådant; inget annat element eller objekt skall ha samma ID. Exempel på kod:
#mainDiv {
width: 800px;
height: 500px:
}
Men när ska man använda de? Jo, det är på det här viset. Det finns inga klara regler på vad som är ”rätt eller fel”, men det finns ändå en allmän övertygelse på webben om att ID endast skall användas på stora strukturella element eller sektioner, som t.ex. den DIV som innehåller hela menyn.
ID används också väldigt ofta nu för tiden när man jobbar med JavaScript, men detta har kommit att ändras i och med att det går nu för tiden att arbeta med klasser och JavaScript lika lätt. Detta tack vare de nya JavaScript ramverken som kommer i olika skepnader hela tiden. - Klasser – Klasser kan användas på alla HTML element och behöver inte vara unika för dessa. D.v.s. att man kan använda samma klassnamn på flera element; två paragrafer kan ha samma klassnamn. Exempel på kod:
.redText {
color: #ff3300;
}
”Nästla” dina element
Som du kanske förstår så kan det bli många olika namn på ID och klasser när man arbetar med en större sida, detta vill man undvika. Nedan visar jag exempel på CSS och XHTML kod som man kan stöta på.
<div id=”Menu”>
<ul class=”MenuUL”>
<li class=”Item1”>Text</li>
</ul>
</div>[code]
Och CSS koden för den blir:
[code]#Menu { width: 500px; }
.MenuUL { margin: 2px; }
.Item1 { color: #000; }
Koden ovan är innehåller inga tekniska fel, så på det sättet är den korrekt, men den orsakar ändå lite problem för oss. För det första så blir det väldigt många namn att hålla reda på och för det andra så blir det väldigt mycket mer kod om vi skall exempelvis ha flera st. <li> i menyn. Inte sant? Så hur löser man det bäst? Låt oss använda samma XHTML kod igen, men lite modifikation:
<div id=”Menu”>
<ul>
<li>Text</li>
</ul>
</div>[code]
Och CSS koden för den blir:
[code]#Menu { width: 500px; }
#Menu ul { margin: 2px; }
#Menu ul li { color: #000; }
Ser du skillnaden? Gör man som ovan så blir livet mycket enklare (relativ tolkning = smaksak). Nu kan vi lägga till hur många <li> som helst i menyn utan att behöva lägga till nya klassnamn för var och en. Det vi gjorde helt enkelt är att vi använde oss av CSS härliga förmåga att ”hitta” de olika elementen som vi har kodat i vårt ID ”Menu”. Först sa vi att den skall sätta marginalen på det <ul> som ligger inuti ”Menu” och sedan sa vi åt den att ändra textfärgen på varje <li> som ligger i <ul> som i sin tur ligger i ”Menu”. Smidigt va?
Ge logiska namn till dina klasser och ID
Du ska ge logiska namn åt dina klasser och ID. Döp inte din klass efter exempelvis dess position, t.ex. ”.divenUppTillHoger”, för med tanke på att positionen på denna DIV kan ändras så blir det missvisande om du sedan bestämmer dig för att placera den längst ned till vänster. Ett bättre namn kan exempelvis vara: ”.logoType” eller något annat relevant.
Använd hellre bindestreck (-) än understreck (_) när du döper dina klasser och ID. Varför? Ja du, egentligen klarar de flesta nya webbläsare av båda, men vissa gamla webbläsare kan ha problem med att tolka understrecket. Så om du vill vara ”100%” säker på att alla webbläsare klarar av din CSS kod, så bör du använda bindestrecket. Exempel: ”#main-div-header”.
Glöm inte att ”ärva”
Ett ”fel” eller ”misstag” som många gör (även jag som skriver om detta) är just att man glömmer egenskapen inherit. Denna egenskap underlättar ditt kodande på ett sådant vis att du inte behöver skriva samma kod om igen flera gånger för exempelvis element som är nästlade i varandra. Komplicerat? Det låter som det, men det är det inte.
Vissa XHTML element ärver egenskaper från dess ”förälder” automatiskt, andra gör inte det. Du kan titta på XHTML koden nedan för att se exempel på hur du kan ärva egenskaper:
<div>
<h1>Rubrik</h1>
<p>Texten</p>
</div>
Och CSS koden:
div {
float: left;
color: #000;
}
div h1 { float: inherit; }
div p { margin: 2px; }Vad hände nu? Jo, det är så att vissa egenskaper ärvs vidare av underelement, såsom textfärg, textstorlek och typsnitt, medan andra ärvs inte vidare, som t.ex. positionering samt bakgrundsfärg.
I det här fallet så kommer rubriken och paragrafen att ärva textfärgen av DIV, men de kommer inte att ärva placeringen ”float”. Nu vill vi att rubriken alltid ska ha samma värde i ”float” som den DIV den ligger i, då använde vi oss av värdet inherit istället för att ännu en gång skriva ”float: left;”. Så om vi nu skulle ändra ”float” till right för DIV så skulle den ändras för rubriken också. Hänger du med?
Kortfattat: layoutrelaterade egenskaper ärvs inte vidare, medan textrelaterade egenskaper ärvs.
Gruppera elementen
Ibland vill man ha exakt samma egenskaper för flera olika dokument, då kan man gruppera de istället för att skapa onödigt mycket repeterande kod. Se exempel:
h1, h2, h3 { color: #000; }I detta fall kommer alla dessa tre typer av rubriker få färgen svart.
Sammanfattning och summering
Jag har i denna artikel förklarat hur man kan förbättra och effektivisera både CSS koden samt det egna arbetet genom några enkla och ganska så grundläggande trick. Det är i och för sig mer tips än trick.
Det är viktigt att veta att all kodning är personlig, vi alla jobbar på olika sätt. Men någonstans måste vi alla mötas tillsammans för att kunna förstå av varandra och första varandras koder och arbetssätt. Ju mer vi skapar generella standarder i kodandet, desto mer kommer vi att kunna dela information med varandra på ett bra och förståeligt sätt.
Till denna artikel har jag använt följande artikel som källa:
http://www.webcredible.co.uk/user-friendly-resources/css/planning-stylesheet.shtml
Jag har översatt artikeln och byggt den efter egna behov, men ett stort tack till WebCredible!
Med reservation för stavfel.
Kommentera gärna!
Vänliga hälsningar
Shadi Domat
Skapades: 2009-11-01 20:46:25
Skribent: Shadi
Lästs 1413 gånger
Betyg: 0 (artikeln har endast 1 röster, det krävs minst 5 för ett betyg)
Kommentarer
Ingen har kommenterat denna artikel än.