The more we rely upon CSS, the larger and more complex stylesheet files become. Planning and organising your stylesheet is essential to creating a lean, manageable website. There are many ways of organising CSS code but the following are best practice…
Commenting your stylesheet makes it much easier to find the information or the commands you’re looking for.
Meaningful comments include:
/* WEBCREDIBLE
Updated: Thu 1 Jan 2008
Author: John Doe
Updates: Add new section 'Forum'
––––––––––––––––––––––––––––––––––––––––––––––––*/ /* COLORS
Body Background: #ffffff
Main Text: #000000
Link: #F0F0F0
etc ...
*/ /* =HEADER
––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =FOOTER
––––––––––––––––––––––––––––––––––––––––––––––––*/
/* The width is overwritten for IE 6 in: cssIE.css */
div {width: 150px;} Set the styles of generic HTML elements, for example:
body
{
background: #fff;
font: arial, sans-serif 75%;
}
h1 {
font-size: 1.2em;
color: #000;
}
h2 {
font-size: 1em;
color: #f0f0f0;
}
img {border: 0;
}
Then, list the classes that will be most commonly used across the site, for example:
.hide
{
position: absolute;
left: -9000px;
}
.required {
background: url(#) no-repeat 100% 0;
}
.fl
{
float: left;
}
.fr
{
float: right;
}
The order of the HTML should be used to determine the order of the CSS sections. CSS files can sometimes be large and commands difficult to find. Having some correlation between the HTML and CSS file makes it easier to locate how an element is being styled.
Using the correct selector type means your CSS file can be significantly reduced in size:
<body>), paragraphs, (<p>) and headings, (<h1>,<h2> etc.) should be used to define general rulesToo many ids or classes can overload the HTML and the CSS files unnecessarily. Try and define as many rules as possible by referencing elements and/or ids by nesting the selectors.
Imagine the following HTML code:
<ul id="nav">
<li><a href="#">Item 1</a></li>
</ul>
Because each of the list items has a common parent, descendant selectors can simplify the CSS markup as follow:
#nav { properties listed here }
#nav li { properties listed here }
#nav li a { properties listed here }
Don’t name classes and ids based on their color or position as these may change in time. Try and give them a name that’s likely to remain relevant over time. Also, use hyphens ahead of underscores as certain old browsers have a hard time understanding the latter.
Use a common naming system for your classes and ids. It will save a lot of time and confusion when developing, debugging and updating documents.
By nesting CSS selectors (i.e. using more than one CSS selector in one command) we can apply styles by navigating the HTML document tree. For example, to apply a colour of red to all paragraphs within a div, we can use the following rule:
div p {color: red;}
Some CSS commands inherit from their parents whereas others don’t. The use of nesting means you don’t have to declare the same properties over and over again.
Generally speaking, text-related CSS commands (e.g. font-size, color) are inherited by descendant elements, whereas layout-related commands (e.g. float, width) aren’t inherited .
You can avoid specifying the same set of properties several times by grouping the selectors that share the same CSS declarations together. For example:
h1, h2, h3
{
color: black;
padding: .2em;
}
This article was written by Brigitte Simard. Brigitte’s crazy about accessibility and CSS - so crazy that she works for Webcredible, an industry leading user experience consultancy, helping to make the Internet a better place for everyone. She spends much of her time working on the world’s most accessible CMS and is very good at CSS training.
 |
 |
Suggestions? |
Get Connected
|
Contact Us You can contact us at: |
|||||
