Indledning

I alt for mange tilfælde ser jeg, når jeg surfer rundt på nettet, at folk tit bruger inline styles når der er specielle elementer der lige skal styles hurtigt, og de ikke lige har en class der passer til elementet, og fordi dette element kun bliver vist ét sted på siden, så er der vel ingen grund til at begynde på andet end inline styling, eller hvad?

Så jeg er kommet frem til at folk måske ikke er klar over at man kan bruge flere classes, ja faktisk alle de classes du vil på dine tags, så her er en lille guide der viser dig hvor simpelt det i virkeligheden er!

1. Vi starter ud med at lave to divs som vi vil bruge som eksempler når vi skal til at style.

Dette er vores første div
Dette er vores anden div div

 

2. Hvad vi gerne vil lave her er en basic box, som giver højde, bredde og en kant omkring, som skal virke på begge vores bokse

.box{
width: 250px;
height: 150px;
border:1px #000000 solid;
}

 

Vi vil selvfølgelig lige ligge vores classes på vores divs således

Dette er vores første div
Dette er vores anden div

 

3. For at disse bokse nu skal skille sig ud, så vil vi give dem forskellige baggrundsfarver, lad os vælge rød og grøn. (Ikke verdens pæneste farver, men dette er en guide, så jeg må godt )

.red{
background-color:red;
}
.green{
background-color:green;
}

 

Så vi laver to nye classes, som i øvrigt kan bruges på alle andre elementer der skal have netop disse baggrundsfarver. Det smarte her er at i stedet for at lave lange css classes, så lav dem små, og lav flere af dem, for på den måde behøver du ikke gentage dig selv.
Lad os sige jeg havde en boks jeg ville floate til højre, den skulle have en border og en baggrundsfarve. Så for at passe den ind i designet, behøver jeg i virkeligheden kun at sætte min baggrundsfarve én gang, og så genbruge denne class. Det samme med floats, hvor jeg ville lave to classes

.left{ float: left; }
.right{ float: right; }

 

4. Nu vil vi så forbinde vores classes, og få det endelige resultat. Det er meget simpelt, for at tilføje flere classes, adskiller du dem bare med mellemrum således

Her er vores første div
Her er vores anden div

 

Og der har vi så 2 bokse med samme standard størrelser, men med forskellige baggrunde.

Konklusion

Denne guide skulle gerne hjælpe dig til at kode mere sikkert, og have en pænere struktur i din kode, og generelt gøre det meget nemmere for dig selv.
At gentage sig selv i sine koder er aldrig en god idé, lad os sige du har et design hvor din primære farve er rød, og du meget gerne vil ændre det til blå. Hvis du så har 100 classes som passer til forskellige elementer på din side, som alle sammen indeholder denne røde farve, så skal du til at rette i dem alle sammen, hvorimod hvis du kombinerer dine classes og opbygger dine elementer med flere af dem, har du meget nemmere ved i fremtiden at skifte dit design ud med et nyt, lave ændringer og hvad du nu ellers måtte finde på.

Tilbage til oversigten | Du skal også være velkommen til at kommentere denne tutorial i Gæstebogen