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
- layout.css
Importerar de andra filerna, samt positionerar de element som är kräver absolut/relativ positionering. - classes.css
Innehåller atomära klasser som har specifika, bestämda egenskaper och beteenden. - selectors.css
Märkesspecifika attribut, samt kompletterande attribut som inte kan definieras av klasserna, t ex unika bakgrundsbilder eller dimensioner. - dimensions.css
Hela layoutens dimension. Avgör om sidans bredd/höjd skall vara statisk eller dynamisk. - fixes.css
För fulhack och kompletterande CSS för att jämna ut tolkningskiljaktigheter mellan webbläsare. - mail.css
Enbart föt HTML-mail. Rätt valfri, om man säger så.
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:
- txt = text
- flt = float
- col = column
- nav = navigation
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.