September 19, 2008 by Alexei M
The more we rely upon CSS within web design, the larger and more complex our stylesheet files (.css) become. Planning and organising your stylesheet can be compared to planning a well-written, sematically correct poem. It is this fundamental practice that is key to creating a lean, manageable website. There are many ways of organising CSS code but the following are what I believe to be ‘best practice’…
Comment your stylesheet (using /* */) for example – /* this is a comment */
By getting used to doing this, you not only create quick reference points for both yourself and others who may be accessing the same css file, but you also create a well-plnned and easily navigatable document!
References - You can also use comments as quick references for the main style guides applied throughout the website:
/* Colours
Body: #ffffff
Main Text: #000000
Link Colours: #666666
etc etc…
*/
Organisation – Comments can be used to identify the different sections of your stylesheet.
/****************Header*****************/
/****************Footer*****************/
/****************Navigation*****************/
OTHER USEFUL POINTS:
Define Main Rules & General Classes at the Top of the Stylesheet.
Order the CSS in the same order as the HTML.
Know when to use elements, IDs and Classes.
- Elements – Elements such as body, (
<body>), paragraphs, (<p>) and headings, (<h1>,<h2><h3>etc.) should be used to define general rules. - IDs - These are unique identifiers and can only be used once within your HTML document. IDs should be used to style major structural sections of a web page such as the header, footer or navigation.
- Classes – These can be used on any type of HTML element.
Name Classes and IDs logically. – This will SAVE TIME later!!
Group Selectors with Common CSS declarations. - This is known as ‘shorthand CSS’
Related posts:
