Groeperen van CSS rules

Het schrijven van style sheets is een intensieve bezigheid. Tijdens het schrijven doen webdesigners vaak waarin ze uitmunten: met de regelmaat van de klok van gedacht veranderen

U heeft uiteraard al eens een blik geworpen op de style sheets die bij Phpfusion's themes kant en klaar worden meegeleverd. (Elk thema heeft er eentje)

Het is een hele uitdaging om zelf zaken aan het bronbestand te wijzigen. Al snel begint U hier en daar code te wijzigen en binnen de kortste keren bent U de weg kwijt in het grote duistere CSS bos. Net zoals in het sprookje kunt U kruimels achterlaten om Uw weg terug te vinden.

Key sections

Het is een goed idee Uw CSS bestand in te delen in Key Sections ('Sleutelposten')

Typische sleutelposten kunnen zijn :

• Header
• Structure
• Nav
• Search
• Headings
• Lists
• Forms
• Links
• Misc

Dat is al een fikse structuurverbetering. Onder de NAV (navigatie) sleutelpost zou U dus bijvoorbeeld kunnen plaatsen:

/*Nav */

#navleft {

float: left;

width: 182px;

border-top: 1px solid #911;

}

en


#navright{

float: right;

width: 182px;

border-top: 1px solid #666;

}

Dat maakt Uw style 'werkbaar', nu moet U ze ook nog 'opvraagbaar' maken. Een tip om snel te kunnen zoeken [FIND] in Uw stylesheet: voeg een karakter toe dat niet wordt gebruikt bij CSS of class/id syntaxen.

Zo kunt U apart gedefinieerde CSS lijsttags vlug terug vinden:

Voeg een '=' teken toe aan je definitie. Zo krijgt U dus bijvoorbeeld:

/* MISC: =Lists */

.main-body ul li {

margin: 0.5em 1.5em 0.5em 1.5em;

padding: 0px;

list-style-type: disc;

}

#listitem {

font-size: 11px;

}

#listdef{

text-indent: 2em;

}

Zo houdt U Uw kunstwerk onder controle en uptodate! Dus in plaats van met Uw geliefde Editor te zoeken naar [List] zoekt U naar [=List] of zelfs [Misc: =Lists]

U vindt in geen tijd de juiste locatie in de CSS file

Naar top