Under denna veckan har jag funderat på hur jag strukturerar min CSS, efter att ha läst inlägget HTML/CSS coding style av Harry Roberts. Det fick mig att fundera på hur min egen struktur ser ut.

Översikt

Eftersom jag inte haft någon ordentlig struktur i bakhuvudet, började jag gå igenom mina gamla CSS-filer för att se hur jag bygger upp saker och ting. Av någon anledning skriver jag min kod på ungefär följande sätt:

• background
• Position (top, left, osv)
• display
• padding
• margin
• font, color, text
• border
• Visuell CSS3 som t.ex. border-radius, box-shadow

Att designa går bra mycket fortare om jag har ett tydligt kodmönster, eftersom jag inte behöver ägna tid åt att skumma igenom koden när någonting behöver förändras. Dessutom blir koden enklare för någon annan att läsa om den följer ett tydligt mönster.

Vendor-prefixed CSS

.class{
-webkit-border-radius: 3px;
   -moz-border-radius: 3px;
        border-radius: 3px;
}

Att linjera upp koden är något jag börjat med på senare tid. Det går snabbare att skumma igenom allt, och om något behöver ändras, kan man snabbt markera flera rader samtidigt i Sublime Text 2. Dessutom tycker jag faktiskt att det ser snyggare ut.

—

Det var allt för den här veckan. Nästan 100 dagar har gått sen jag började skriva livet som designer. Jag upplever att det är intressant att sätta sig ner och reflektera en stund över det jag tänkt på under veckan. Stay Creative!