Anders, september 2018.

Anders är en webbutvecklare och hårdrockare som gillar brädspel, kaffe och öl.

Detta är ett arkiverat inlägg, som importerats hit för referens. Det kan se konstigt ut och innehålla utdaterad information eller inaktuella åsikter.

Organisation av CSS-filer

Jag lovade att skriva litet om filstrukturer vad gäller CSS. Senaste veckorna har jag jobbat fram en struktur som passar mig personligen, och det är den jag skall visa nu. Jag reserverar mig dock för att mina formuleringar inte är de bästa, då detta är det sista jag gör innan jag uppsöker sängen.

Globalt och temaspecifikt

Först av allt vill jag säga att jag gör skillnad på global CSS och temaspecifik CSS, då jag alltid utgår från att mina projekt skall kunna växla mellan flera layouter (färgteman, i den simplaste formen av byten). Min public-katalog (som innehåller allt presentationsmaterial) ser ut såhär vad gäller css:

./css
./img
./themes/SmurfBlue/css
./themes/SmurfBlue/img
./themes/GargamelBlack/css
./themes/GargamelBlack/img

I CSS-katalogerna finns alltid minst en representant av de filer jag skriver om. Har jag globala konventioner för min layout implementeras dessa i ./css istället för i ./themes/*/css. För det allra mesta brukar detta innebära att det som bestäms globalt inte behöver nämnas alls på temanivå, och då brukar jag helt enkelt skippa att över huvud taget ha filen representerad i temakatalogerna.

CSS-filerna och dess funktioner

Det var det. Exempelfiler, som mer eller mindre innehåller basuppsättningen, finns att beskåda bland kodsnuttsarkivet: http://src.madr.se/css/blankFiles/

Namn- och indenteringskonventioner

Mina klasser är alltid skrivna i kamelCase, inledandeVersalVidVarjeNyttOrdUtanMellanrum. Såsom konventionerna är i språket Java har jag dessutom valt att skriva inledande versal på hela namnet. mina selectorer, däremot, har inledande gemen i sina namn.

Klasser döps i så lång mån som möjligt efter dess funktionalitet i presentationen, inte vad de faktiskt implementerar. Namnet div.SektionMenu är bättre beskrivande än div.LeftColumn så menyn kan skifta mellan vertikal, horisontal eller mellan höger och vänster.

Uppenbara klasser, främst de universiella, är undantaget - då de i regel är mycket simpelt implementerade och för att class="TxtAlignRight" är något tjusigare än style="text-align: right;" enligt mig.

Några kortformer förekommer:

Vad gäller indentering: Jag skrev förut i BSD/Allman, med en gigantisk summa rader som följd. Jag skriver numera i BSD/KNF för att slippa undan detta. Efter ett tag vänjer man sig vid att läsa, och då blir det bara trevligt. Men givetvis skall alla välja sin personliga indenteringskonvention.

"Dokumentationskommentarer"

Överst i alla filer har jag litet lull-lull. Det är verkligen ingenting som måste finnas i CSS-sammanhang, men personligen tycker jag att det är god sed. @media screen och författare i synnerlighet borde finnas i alla css-filer som skrivs, i takt med att användning av annan media kommer att öka.

Kika nu igenom mina exempelfiler och kommentera. Jag är tacksam för alla förslag om förbättring jag får. :) Kritisera!

Jag tog mig också friheten att skapa ett andra exempel, där jag använt mig av klasser och selektorer för att börja ge exemplet litet stilar.