Hoe structureer je een CSS style sheet

Inleiding

Wanneer je geen gebruik maakt van een vaste structuur bij CSS files, kan er nog wel eens een zootje ontstaan. Hoe kan je toch de structuur bewaren en nieuwe wijzingen overzichtelijk verwerken?

Stappen

Een aantal zaken zijn belangrijk bij het bewaren van de structuur. Dat zijn:

  • CSS masterfile: een master style sheet waarin met @import "reset.css" andere css files worden geopend. Deze files kunnen zijn:
reset.css—handles the mass reset. 
type.css—handles the typography. 
grid.css—handles the layout grid. 
widgets.css—handles widgets like tabs, drop-down menus, and “read more” buttons. 
base.css—includes all the other stylesheets, so that we only need to call base.css from our (X)HTML documents to use the entire framework. 
  • Inhoudsopgave: Om aan te geven hoe de DIV structuur in elkaar zit
  • Beschrijving kleuren en typografie: door het opsommen van de belangrijkste kleuren, kan consistentie bewaard blijven.
  • Structuuur: een duidelijke structuur is belangrijk. Sub-objecten van dezelfde ID kunnen prima inspringen. Hetzelfde geldt voor nieuwe wijzigingen, die je ook nog extra kan benadrukken met /*.

Links

  • http://www.smashingmagazine.com/2008/05/02/improving-code-readability-with-css-styleguides/
  • http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch/
  • http://www.alistapart.com/articles/frameworksfordesigners