Het zijn er maar 11 hoor

Uit mijn ervaring als CSS (bijna) expert kan ik voor jullie een paar tips geven die handig kunnen zijn als je ze onthoud.

De bedoeling is niet dat je op de manier van de tips moet gaan werken, neen, het is voor mij een leidraad doorheen het proces van stylesheets op te stellen, ook al maak je maar van enkele gebruik, handig zullen ze wel zijn.

De 11 Tips voor CSS’ers

  1. Margin en padding
    Om verschillen te vermijden tussen verschillende browsers en hun standaard instellingen van marges en paddings is het handig om in het begin van je CSS te bepalen dat alle marges en paddings 0 (nul) zijn. Dit kan je verwezenlijken door gebruik te maken van een jokerteken:

    * {
    margin: 0;
    padding: 0;
    }

    Het jokerteken wil zeggen: alle selectors
  2. Font-size
    Daar elke browser een andere standaard instelling heeft voor het weergeven van lettergrootte is het handig om met em te werken, deze geeft je bezoekers de mogelijkheid hun weergave van letters aan te passen voor elke browser. Nu is het wel zo dat em relatief is. Er is geen vaste waarde, deze verschilt van browser tot browser.
  3. Met em werken
    Om een nauwkeurige werking ermee te kunnen verkrijgen kan je zelf bepalen hoe groot 1 em zou moeten zijn door de font-size aan te passen voor de gehele body:

    html, body {
    font-size: 62.5%;
    }

    Met deze manier van werken is 1em = 10px
    Meer uitleg hierover kan je lezen in: Tekst vormgeven met em
  4. Browser veilig ontwerpen
    Als je een website ontwerpt/maakt zorg er dan voor dat je in de volgende browsers je layout zeker test in:
    • Internet Explorer 6
    • Opera 8
    • FireFox 1.5

    Waarom maar 3?
    Als je ontwerp “werkt” in deze selectie, kan je er voor elfennegentig % vanuit gaan dat hij in alle browsers correct wordt weergegeven. Gewoon om het feit dat andere browsers van dezelfde bron uit gemaakt zijn.
    Mocht je natuurlijk het geluk hebben nog ergens een mac te hebben staan, test het dan ook in Safari.

  5. Multi-kolommen
    Als je een ontwerp maakt die meer als 2 kolommen zal zijn (3 of meer) zit dan niet te klooien met absolute of relative gepositioneerde elementen, als je niet echt vertrouwd bent met een hele resem hacks of filters zal je op een moment vast komen te zitten.
    Maak het je zelf gemakkelijker door float:left; toe te passen op de 3 of meer kolommen. Heel weinig code een eenvoudig in omgang.
  6. Floats clearen
    Natuurlijk heb je soms float: left; en float:right; in combinatie met elkaar, verzeker je ervan dat je na de 2 elementen die je float, respectievelijk links en rechts, je deze ook cleart om zo navolgende elementen in je code ook terug op hun normale plaats te krijgen.
    De eenvoudigste manier zonder al te veel gehack is een <hr /> element te plaatsen na je floats en in CSS te bepalen:

    hr {
    display: none;
    clear: both;
    }
  7. Organisatie & shorthand
    Organizeer je CSS in een logische volgorde in welke je eenvoudig ook je XHTML structuur in herkend. Zorg ervoor dat als je je CSS nog eens moet aanpassen je het gezochte ook gemakkelijk terug vind door logische benamingen te kiezen voor je class en id.
    Als je bijvoorbeeld een fragment tekst wenst rood weer te geven via een class, geef dan geen naam als boven of rechts, maar gewoonweg rood.
    Zoals Johannes aanduide is het beter je benamingen te kiezen aan de hand van hun bedoeling, dus tekst die bijvoorbeeld een fout moet weergeven kan je beter error noemen
    Shrijf je CSS zo kort mogelijk door middel van de shorthand techniek.
  8. Links stylen
    Als je je links (anchors) wenst te stylen, ik zeg wenst het is geen verplichting je links een ander uitzicht te geven, en je gaat voor goud door alle states te stylen doe het dan in de juiste volgorde want anders werkt het niet.
    De volgorde is heel eenvoudig en is niet door mij bedacht: LoVe HAte:
    • a:link
    • a:visited
    • a:hover
    • a:active

  9. Elementen, class en id
    Hou rekening bij het organizeren van je CSS dat je eerst je XHTML elementen declareerd, daarna pas je class en/of id
  10. Hacks en filters
    Hacks en/of filters moeten je laatste uitweg zijn om layout problemen tussen verschillende browsers weg te werken. Sommigen beweren dat je aparte stylesheets moet aanmaken voor elk type browser, AUB begin daar niet mee. Het is mogelijk om alles in één bestand te verwerken waarbij ik niet wil gezegd hebben dat je bijvoorbeeld je kleuren, letters en layout CSS kunt splitsen in verschillende files. Eens je CSS voldoende beheerst zal je merken dat het ook zonder hacks en/of filters kan.
  11. Commentaar
    Zoals elke goede programeur of scripter kan je het best je CSS voorzien van korte stukken commentaar. deze fragmenten van beschrijving plaats je tussen de zogezegde comment-tekens:

    /*dit is een commentaar */
    #foo {
    color:#963; /* dit is een kleur */
    }
    /*dit is nog een commentaar */