Wanneer ik een website bezoek heb ik nogal vaak te neiging om de broncode ervan te bekijken. Natuurlijk niet bij alle sites, maar toch die van collega’s, of sites die ik inspirerend vind. Broncode van goede sites bekijken heeft ertoe bijgedragen dat ik nu zo handig overweg kan met XHTML en CSS. Maar ook het bekijken van slechtere voorbeelden kan verhelderend zijn.

De afgelopen weken en maanden heb ik mijn eigen manier van werken onder de loep genomen en het verder verfijnd. Zo heb ik op het werkvloer een aantal HTML en CSS templates gemaakt die kunnen dienen als startpunt voor nieuwe websites. Daarnaast heb ik bij Marlon ook nog een stijlgids geschreven met daarin mijn methodiek uitgelegd alsook een referentie voor veelgebruikte XHTML elementen. Alvast hier enkele tips en conclusies.

Wees consistent bij naamgeving

Dit is niet alleen belangrijk bij XHTML en CSS productie, maar ook bij het programmeren en scripten. Wees consistent bij het benoemen van elementen, functies, variabelen, … Vaak zie ik in de broncode van websites dat de maker sommige elementen een Engelstalige id of classe geeft, en andere dan weer in het Nederlands benoemd. Het is wel zo dat je sommige elementen moeilijk naar het Nederlands kan vertalen, maar daarom ben ik ook van mening dat je alles in het Engels moet plaatsen. Dus zowel bij XHTML en CSS als bij programmeren.

Dat is iets dat vooral nog voorkomt bij studenten, stagiairs en programmeurs van de oude stempel. Maar je vergroot de leesbaarheid van je bronbestanden enorm door deze tip te hanteren. En zoals Vincent altijd zegt: “Je weet nooit wie je broncode nog moet gebruiken”.

Probeer ook een zekere consistentie te hanteren bij de casing van een id of classe. Zelf schrijf ik alles met kleine letters en scheid ik meerdere woorden aan de hand van een koppelteken (-). Kleine letters omdat XHTML ook in lowercasing staat. Een visuele scheiding tussen verschillende woorden vergroot de leesbaarheid en dus opteer ik voor dat koppelteken (of hyphen).

Bijvoorbeeld:

  class="sidebar-news"

De underscore is af te raden, omdat het niet ondersteund wordt door de W3C specificatie, alsook niet in sommige browsers.

Structuur leidt tot productiviteit

Door mijn CSS files goed te structureren , weet ik voortaan perfect waar elk deel van de site zich bevindt. Door de verschillende stijlen onder te verdelen in groepen naargelang functie of plaats in de site is het voortaan een simpel denkwerkje om te achterhalen waar ik moet zoeken om een bepaalde stijl te wijzigen. Hiervoor baseer ik me op het modulair CSS principe, maar verfijnd naar mijn eigen visie en manier van werken.

Wat ook zeker helpt bij het verhogen van je productiviteit is voor jezelf een bepaalde volgorde bepalen voor de verschillende CSS properties. Zo doe ik het:

• float of position
• display
• overflow
• margin
• padding
• width
• height
• specifieke eigenschappen
• font
• text
• color
• border
• background

Specifieke eigenschappen kunnen zijn: list-type, cursor, vertical-align, … Text eigenschappen zijn dan weer: line-height, letter-spacing, decoration, …

Door op deze manier te werken kan ik sneller bepaalde properties terugvinden die in een grote stijlclasse zijn opgesomd. Het vergroot voor mij alleszins ook de leesbaarheid. Maar het is belangrijk dat je voor jezelf eens op een rijtje zet welke volgorde jij prefereert. Misschien ben je wel het chaotische type en hou je wel van wat zoekwerk.

Shorthand properties

Sommige CSS elementen kunnen gespecifieerd worden op 1 enkele regel. Persoonlijk vind ik dit een handige shortcut en wordt alles wat leesbaarder. Toch zijn er ook ontwikkelaars die dit tegenspreken en de normale manier van werken beter vinden. Aan u de keuze… Alvast hier een voorbeeld:

  .someclass {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 0px;
    margin-right: 20px;
  }

Kan aan de hand van een shorthand property omgetoverd worden tot:

.someclass {
  margin: 10px 20px 10px 0;
}

De volgore van de properties is: top, right, bottom, left (TRouBLe). Dit kan mij dan uiteindelijk brengen tot:

  .someclass { margin: 10px 20px 10px 0; }

Dit laatste doe ik wel enkel wanneer er slechts 1 CSS eigenschap wordt gedefinieerd.

De meest gebruikte shorthand properties zijn: font, background, list-style, margin, padding en border.

En ten slotte: wanneer een hexadecimale kleur is samengesteld uit 3 paar hexadecimale getallen , dan kan je deze inkorten tot 3 getallen.
Vb: #000000 wordt #000 en #667733 wordt #673

Tot zover deze korte toelichting over mijn structureren van CSS files. Ik heb hier zeker niet willen bewijzen dat mijn manier van werken de beste is, maar ik heb wel willen aantonen dat het belangrijk is na te denken over hoe je iets aanpakt. U bent alleszins vriendelijk uitgenodigd om mijn CSS bestand(en) te bekijken. Reacties zijn zoals altijd meer dan welkom.

Gerelateerde artikels

• Handige Firefox extensies voor webontwikkelaars
• Webstandaarden zijn mijn vak