CSS-kodandet nu, förr och i framtiden

Vi alla utvecklas, speciellt när det gäller att knacka kod. Det räcker oftast med att glo ett halvår tillbaka på sin kod så ser man vad man kunnat göra bättre, vad som inte funkar och hur bra man är just idag.

Min CSS i början av 2000-talet och fram till för något år sedan såg ut exakt som ovan. Ett element och en regel på varje rad. Läsbart är det men det blir otympligt vid större klasser/IDn. Problemet jag har här att vid ett stort dokument så kommer radantalet skjuta i höjden, minst sagt.

Definitionerna var inte bättre dem, rakt upp och ner med få indrag och mer med mantrat “get things done” än att kunna utläsa koden. Troligtvis var det därför man ibland tittade tillbaka och undrade vad sjutton jag höll på med.

Dagens system fungerar bättre, grupperingar med namn och element. Likaså indrag som förbättrar läsbarheten. Mantrat nu är främst läsbarhet och rätt element på rätt plats. Grupperingarna fungerar så att HTML har sina stilar i kronologisk (tänk laddning uppifrån och nedåt) med radbrytningar/kommentarer mellan varje grupp.

Klasserna är mycket baserade på en rad istället. Systemet är att varje rad representerar en viss form eller stil på elementet i fråga. Första raden hanterar storlek på elementet, andra raden hanterar funktionaliteten och tredje är typografin.

Det första ni kanske lägger märke till är att jag oftast använder short-hands, men inte för padding. Det har en anledning – läsbarhet. padding: 4px 1px 3px; är svårare att direkt se vad som pågår än padding-top padding-bottom etc. Det handlar garanterat om vanan man besitter.

Framtiden kommer säkert se helt annorlunda ut. Jag funderar redan idag att gruppera om raderna och sätta reglerna i bokstavsordning för bättre överblick samt att träna in mitt sinne bättre för vissa förkortningar. Shorthands kommer bli extremt viktigt nu när CSS3 gör sitt intåg då en regel kommer ta upp extremt mycket mer plats samt ta fler parameters.

Nog med flumsnack, vad kör du? Läsbart eller kompakt?