Detta är min preset.css

Om ni vill jobba effektivt så har ni kanske med en grundläggande css-fil som ni utgår från varje gång ni ska koda en hemsida. Jag är säker på att några av er gör det iaf. Jag kodar allt från grunden men jag har även ”mitt” sätt att koda, som jag utvecklat fram genom att bråka med IE6 de första månaderna av mitt designande.

Reset.css

preset.css är en grundfil till css som nollställer alla buggar och skillnader i alla webbläsare. Jag har utgått från Eric Meyers reset.css och gjort min egen. Skillnaden med min är att där finns massa klasser med tomma värden. Detta för att jag ofta använder samma klassnamn och bygger mina sidor med ungefär samma struktur.

Filen blir ju såklart större med mycket mer klasser än denna. Men det är såhär jag brukar börja.

Fast bredd – ej flexibel layout.

Min preset.css passar sig inte till flexibla layouts, utan till layouts med fast bredd. Trots att jag ofta bygger hemsidor med samma struktur så tillåter css-filen att jag gör avvikelser. Mitt grundtänkande är höger- och vänsterkolumn till alla layouts, men bara för att det är höger- och vänsterspaltat så betyder det inte att layouten måste se exakt likadan ut. Du kan exempelvis ha flera kolumner inuti en kolumn, osv.

Förbättringar?

Det finns helt klart förbättringar att göra. Vissa menar att jag direkt ska lägga in hacks för IE6 och andra säger att detta är fult. Det finns även de som inte tycker om att jag kör ”display:inline;” på nästan alla element. Detta gör jag enbart för att IE6 tenderar att trycka på marginalerna med ungefär x*2 pixlar i sidled. Är osäker på siffran men något sådär ungefär. Med display:inline; så undviker du detta jobbiga problem. Nackdelen kan vara att om du flyttar på omkringliggande objekt så påverkas alla andra objekt också.

Men jag argumenterar för att mitt sätt är bra, för jag vet många som kör absolutpositioneringar (position:absolute;), där de självmant måste flytta på varenda objekt om de ändrar margins på ett av dem, för att behålla linjeringar och andra designrelaterade orsaker.

Andra kör positioneringar, jag väljer att floata. Rätt eller fel, vad tycker ni?

• Ladda ner min preset.css

Fler inlägg om Design

• Läsbarhet – en viktig faktor i design
• 5 tips till användarvänligt innehåll
• Bloggdesign
• Designregler i webbdesign
• User Experience – användarens upplevelse
• Anlita rätt webbdesigner