Keep CSS clean
I have spent the last few days working with the CSS in an existing web application. It isn’t pretty. My biggest pet peeve with it is all the special cases that exist. If you find yourself doing a lot of the following you are in for a world of hurt when it comes time to redesign your site.
.homepage h3 {
some style
}
.about h3 {
}
div.box h3 {
}
My advice is to create a style guide and stick to it throughout the entire site. That way, when you use h3 you will know exactly what it is going to look like and it will stay consistent throughout the entire web site.
Another side benefit of doing this is your CSS file will be greatly reduced in size and will be understandable. This will also save on download times for those visiting your site.
I somewhat disagree. If you do semantic markup with heading levels you do have to use different renderings based on the context.
However it might also be wrong to use headings for things like navigation. Reserve the h1-h6 for the body/content.
Greetings
Bernd
I definitely agree with reserving the use of h1-h6 tags solely for describing elements of content.
As for using different renderings based on content, I would have to say that the more consistent you can have things across your site, the better things are going to look. The more I can style an h3 tag once and keep it the same, the easier it is for my users to recognize what they are looking at. This applies to all the different elements on the page.
There may be exceptions to this rule, but I would suggest thinking real hard before you add custom renderings for something and ask yourself why need it.
The more consistent your site is, the easier it is for your users to, well, use.
Yes agreed. Consistent elements across multiple plages is a good thing, and CSS is the first place you can see if you violate that.