03. HTML

Formatering av koder

2009-12-02 12:21 #0 av: johan-ahlback

När man skriver koder så är det mycket att tänka på. Men de flesta glömmer hur koderna ser ut och hur det är att läsa dem. Indentering hjälper om man felsöker eller letar efter en speciell rad.

Jag tycker att snyggt skriven kod är poesi. Men hur skulle poesi se ut om det inte fanns radbrytningar eller skiljetecken? Plötsligt skulle det vara svårläst och svårtolkat. Det är samma sak med koder. Visserligen så renderas de rätt, men det är svårt om inte omöjligt för en människa att läsa i ett dokument där koden inte är indenterad.

Med indentering menas att man tabbar in texten en bit.

Här är ett exempel på icke indenterad kod. Och det ser ganska överdrivet ut men jag har faktiskt sett värre. Håller du med om att det är svårt att läsa ut koden?

dåligt indenterad text

Så här borde det se ut. Och som du kan se är koden lättare att läsa ut.

bra indentering

Så hur ska man indentera? Alla hittar sitt eget sätt. Men jag har vissa regler som jag tycker att alla borde ha i tankarna. Men det kräver att man har lite koll på taggarna så jag kör en liten crash course.

Det finns två olika typer av element i html. Block element och inline element. Om du skriver html kod så använder du dessa hela tiden även fast du inte tänker på det. Alla taggarna är indelade i de två typerna. Det är lätt att se vilken typ ett element är.

Block element:
ett block element har en "inbyggd" padding och margin. Även om de i vissa fal är satta på 0px. Det blir också en automatisk radbrytning efter ett block.
Exempel på taggar: div, h1-6, p.

Inline element:
har ingen automatisk radbrytning eller padding/margin. Används direkt i text.
Exempel på taggar: a, b, em, span.

Så hur ska man indentera dessa element? Det är enkelt. Om du kollar på bilderna ovan så kan du lista ut ganska mycket.

Ett block element ska skrivas på två rader. En rad för start taggen och en för slut taggen. Innehållet ska tabbas in ett steg. Om man har ett block element i ett annat så ska man tabba fler steg.

Om vi till exempel skapar en meny så kan det se ut så här:

bra indentering meny

Där har jag en div tagg som ska innehålla menyn. Sen har jag ul (unordered list) som är ett block element. Därför tabbar jag även in li (list item). Men här gör jag ett undantag. Li är block fast jag behandlar det som ett inline då de inte innehåller så mycket information. Skulle jag ha mer text i dem skulle jag placerat start och slut taggarna på varsin rad och indenterat texten också.

Inline element behöver man inte bry sig om så mycket då de oftast ligger mitt i en text.

Det blir ingen skillnad i utseendet på sidan. Men för de som behöver eller vill kolla på koden har mycket lättare att läsa den. Så börja tänk på indentering.

Snyggt skrivna koder är poesi.

 

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2009-12-02 16:23 #1 av: Stephanie

Bra artikel! Glad

Anmäl
2009-12-02 16:24 #2 av: Janne64

Bra att du tar upp detta men saknar även kommentering av sin kod som skulle kunna passa in för att göra det mer lättläst.

Anmäl
2009-12-02 22:55 #3 av: johan-ahlback

#1 tack!

#2 kommatering är inte lika viktig som att indentera. och problemet brukar inte vara att det saknas utan att det är för mycket.

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2009-12-04 14:15 #4 av: Dagashi

Amen brother!
Jag håller med till 100%, Jag mår dåligt ibland när jag läser "Ful" kod.

Anmäl
2009-12-04 14:44 #5 av: johan-ahlback

#4 som skolans underbara system? ironiskt att vi får lära oss att alltid ha snygga koder. sen är hik's hemsida och ladok nästan det fulaste jag sett i kodväg Flört

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2009-12-04 15:06 #6 av: Dagashi

#5 Hehe, ja det är ju lite hykleri. Men men, hoppas att de fixar det till nästa version ^^

Anmäl