Artikelen
Goed gebruik van CSS
Auteur: Admin
Het op een juiste manier maken van een cascading stylesheet. 3 Tips.
Artikel:
1. Hou CSS en HTML gescheiden.
Op deze manier kan de layout van de website ook na 1 jaar heel gemakkelijk worden aangepast. Alle html bestanden kunnen worden behouden, enkel de CSS bestanden dienen nog aangepast te worden. Dit scheelt een hoop werk. Je hoeft in dit geval niet 100 html bestanden aan te passen, enkel een of enkele CSS bestanden. Hou HTML en CSS dus gescheiden, zo hou je het ook voor jezelf overzichtelijk.
Let er echter wel op dat je niet teveel verschillende stylesheets maakt, dit kan negatieve effecten hebben op de prestaties van je website. Overigens heeft Internet Explorer ook een maximum van 32 gelinkte stylesheets.
2. Semantiek
Het is niet alleen belangrijk dat je de juiste elementen in je html bestanden gebruikt. Ook de waarden van class en id dienen juist gekozen te worden. Het zal je css bestand een stuk duidelijker te begrijpen maken, ook als je er een jaar niet naar omgekeken hebt.
Kijk bijvoorbeeld eens naar de volgende regel:
Als je dit werk van een andere persoon zou krijgen, weet je dan direct waar deze regel voor dient? Waarschijnlijk niet. Het zou een afkorting kunnen zijn voor het een of ander, maar er is geen manier waarop je dit direct kan zeggen. Misschien dat je het wel weet op het moment dat je het erneer zet, maar de vraag is of je het een paar jaar laten dan ook nog weet.
Laten we nu eens kijken naar de volgende regel:
Dit lijkt al een stuk duidelijker, namelijk het oranje linkse blok. Echter ook deze website zal op een gegeven moment een nieuw design krijgen. En in dit nieuwe ontwerp zal dit onderdeel niet oranje zijn maar blauw, bovendien zal het rechts gepositioneerd moeten worden. Dan kloppen de waarden van deze class dus niet meer. Je zou dan ook alle html bestanden waarin dit blok voorkomt aan moeten passen, of je laat het zo. Zodra er iets aangepast moet worden zal dit ontwerp dan wel een zoekplaatje zijn.
Het is dus het best om geen kleuren en posities te gebruiken in je classes.
Ook woorden als blok/box zouden vermeden moeten worden, aangezien dit er ook laten niet meer uit hoeft te zien als een blok.
Laten we nu eens kijken hoe het dan wel zou moeten
Hierbij is het duidelijk dat het om de product beschrijving gaat. Het maakt hierbij niet uit hoe vaak je ontwerp veranderd.
3. Maak gebruik van comments
Commentaren in je CSS bestanden kunnen je helpen onthouden waarom je gebruik hebt gemaakt van bepaalde regels. Ook kunnen ze helpen om de structuur van het CSS bestand duidelijk te maken.
Herinneringen
Je kan commentaren gebruiken om berichten voor mede ontwikkelaars of voor jezelf neer te zetten. Om latere verwarringen te voorkomen. Hou deze echter wel simpel.
Bijvoorbeeld
Tijd en auteur
Ook zou de tijd waarop de CSS file het laatste aangepast is erop gezet kunnen worden, samen met de naam van degene die dit gedaan heeft. Op deze manier is duidelijk wie ervoor verantwoordelijk is en of het bestand wel up-to-date is.
Organisatie
Het is handig om verschillen delen aan te geven in het CSS bestand. Bijvoorbeeld alle header stylen bij elkaar.
Ook is dit makkelijk als je een bepaald deel zoekt in het CSS bestand, zodat je dit niet helemaal hoeft te doorzoeken.
Gids
Ook een kleurengids kan gemakkelijk zijn. Als je een bepaalde kleur aan wil passen weet je dan naar welke code je moet zoeken. Ook weet je zo welke kleuren er gebruikt worden in de website.
Een ander voorbeeld is een gids van de verschillen onderdelen
Terug naar de categorie pagina
Terug naar de artikel pagina
Auteur: Admin
Het op een juiste manier maken van een cascading stylesheet. 3 Tips.
Artikel:
1. Hou CSS en HTML gescheiden.
Op deze manier kan de layout van de website ook na 1 jaar heel gemakkelijk worden aangepast. Alle html bestanden kunnen worden behouden, enkel de CSS bestanden dienen nog aangepast te worden. Dit scheelt een hoop werk. Je hoeft in dit geval niet 100 html bestanden aan te passen, enkel een of enkele CSS bestanden. Hou HTML en CSS dus gescheiden, zo hou je het ook voor jezelf overzichtelijk.
Let er echter wel op dat je niet teveel verschillende stylesheets maakt, dit kan negatieve effecten hebben op de prestaties van je website. Overigens heeft Internet Explorer ook een maximum van 32 gelinkte stylesheets.
2. Semantiek
Het is niet alleen belangrijk dat je de juiste elementen in je html bestanden gebruikt. Ook de waarden van class en id dienen juist gekozen te worden. Het zal je css bestand een stuk duidelijker te begrijpen maken, ook als je er een jaar niet naar omgekeken hebt.
Kijk bijvoorbeeld eens naar de volgende regel:
.c11b { color: #f60; }Als je dit werk van een andere persoon zou krijgen, weet je dan direct waar deze regel voor dient? Waarschijnlijk niet. Het zou een afkorting kunnen zijn voor het een of ander, maar er is geen manier waarop je dit direct kan zeggen. Misschien dat je het wel weet op het moment dat je het erneer zet, maar de vraag is of je het een paar jaar laten dan ook nog weet.
Laten we nu eens kijken naar de volgende regel:
.links-oranje { color: #f60; }Dit lijkt al een stuk duidelijker, namelijk het oranje linkse blok. Echter ook deze website zal op een gegeven moment een nieuw design krijgen. En in dit nieuwe ontwerp zal dit onderdeel niet oranje zijn maar blauw, bovendien zal het rechts gepositioneerd moeten worden. Dan kloppen de waarden van deze class dus niet meer. Je zou dan ook alle html bestanden waarin dit blok voorkomt aan moeten passen, of je laat het zo. Zodra er iets aangepast moet worden zal dit ontwerp dan wel een zoekplaatje zijn.
Het is dus het best om geen kleuren en posities te gebruiken in je classes.
Ook woorden als blok/box zouden vermeden moeten worden, aangezien dit er ook laten niet meer uit hoeft te zien als een blok.
Laten we nu eens kijken hoe het dan wel zou moeten
.product-beschrijving { color: #f60; }Hierbij is het duidelijk dat het om de product beschrijving gaat. Het maakt hierbij niet uit hoe vaak je ontwerp veranderd.
3. Maak gebruik van comments
Commentaren in je CSS bestanden kunnen je helpen onthouden waarom je gebruik hebt gemaakt van bepaalde regels. Ook kunnen ze helpen om de structuur van het CSS bestand duidelijk te maken.
Herinneringen
Je kan commentaren gebruiken om berichten voor mede ontwikkelaars of voor jezelf neer te zetten. Om latere verwarringen te voorkomen. Hou deze echter wel simpel.
Bijvoorbeeld
/* Zorg dat plaatjes geen randen hebben */
img { border: 0; }Tijd en auteur
Ook zou de tijd waarop de CSS file het laatste aangepast is erop gezet kunnen worden, samen met de naam van degene die dit gedaan heeft. Op deze manier is duidelijk wie ervoor verantwoordelijk is en of het bestand wel up-to-date is.
/* WebsiteKeuring Style
Updated: Vrijdag 21.12.07 @ 14:15 u
Author: Yoni
----------------------------------------------------*/Organisatie
Het is handig om verschillen delen aan te geven in het CSS bestand. Bijvoorbeeld alle header stylen bij elkaar.
/* HEADER
----------------------------------------------------*/Ook is dit makkelijk als je een bepaald deel zoekt in het CSS bestand, zodat je dit niet helemaal hoeft te doorzoeken.
/* =HEADER
----------------------------------------------------*/Gids
Ook een kleurengids kan gemakkelijk zijn. Als je een bepaalde kleur aan wil passen weet je dan naar welke code je moet zoeken. Ook weet je zo welke kleuren er gebruikt worden in de website.
/* KLEUREN
Body achtergrond: #2F2C22
Basis Tekst: #B3A576
Links: #9C6D25
Donker bruine rand: #222019
Groene kop: #958944
*/Een ander voorbeeld is een gids van de verschillen onderdelen
/* GENERIC
HEADER
FORMS
TABLES
FOOTER
*//* =GENERIC
----------------------------------------------------*/Terug naar de categorie pagina
Terug naar de artikel pagina