posted on:April 10, 2008
CSS dos and donts Part 1 CSS Selecting
Css Globe is starting a series of lightweight articles named "CSS do’s and don’ts". This series is aimed at pointing out some of the bad habits when it comes to css and web standards in general. We’ll try to provide answers to some of the most common css questions.
Part 1: CSS Selecting
Selecting an element is the basis of the css styling process. If you can’t target an element you can’t style it, right? This article could help you to fix some of the errors you might have been doing and perhaps to answer some questions about what is the best way to use css selectors.
As you know, there are several types of css selectors. What we’ll focus on is a practical use of some of them.
Classes & Id’s
<p class="signature">...</p> <ul id="nav">...</ul>
Don’t use descriptive class names like "red", "blueDot" or "roundedTop". I wouldn’t go even with class names like "left", "right" or "large". Why? Well, imagine that you coded 2 column site, one column named "left" and the other "right" and at one point you have to switch columns positions. Your client might not like your blue color scheme and wants it changed, you’re stuck with button class="blueSmall"…
Class names should describe the meaning and purpose of the content not it’s appearance. So instead of div id="left" add div class="main" or even class="primary".
Try to use same class name on various elements, in various situations. Names don’t have to be attached to one type of element only. You can use class="first" on first menu item as well as on first paragraph in your content.
When deciding between using class name or id, try to determine if the element you’re about to style is really unique. If so, use id. If it’s not that unique use classes. That keeps you away from tons if ids used only for styling.
<button class="image submit">
Multiple class names on single element can be a good way to optimize your css and avoid complex class names in your markup.
I often use class="image" for image replacement technique. That class definition contains global styling for image replacement. Then I add specifics in a different class where I describe what image to use, define the width etc.
I always use type selectors at the beginning of the stylesheet, to set or reset default styling of certain elements. I personally don’t believe in the power of universal selector (unless used further down in hierarchy). If you’re going to use resets, use proper ones, i.e. Eric Meyer’s reset.
Use these! When you get the hang of it you’ll find out that they’re so easier to work with then coming up with (and using) 100 class names for each section in the document. I often use something like #main p a to add link underline which I removed in the global reset.
#main h2.title span
This type of selector allows you to be very precise in targeting an element.
The principle I use is: I try to determine the lowest container in hierarchy that has non-repeating elements. I add class name to the container and target the elements inside with type selectors similar to example above. If you have a H2 tag that you use for titles, and you have only one span inside it, there’s really no need of adding a class name to that span. You can easily target it with combined selector shown above.
Cross browser and cross platform support
Some of the selectors are not supported by certain user agents, so you shouldn’t rely on them. i.e, you can’t rely on :first-child pseudo element for top rounded corners, when it’s not supported in IE6. The bitter truth is that many of users out there still use IE6 and that’s something e have to live with.
- When choosing use class names, use class names that describe content’s meaning or purpose, not it’s appearance.
- Use few class names and use them on various elements.
- Use type selectors to (re)set default styling. If you wish, use proper reset techniques (mentioned above).
- Use multiple class names on single element to optimize your css.
- Use combined selectors and precisely target your element
- Don’t use descriptive class names like "red", "blueDot" etc.
- Don’t use complicated class names or id’s like "sideIntroSecondaryContentTop". Use descendant selectors instead.
- Don’t use universal selector for resetting entire document.
- Don’t use browser dependent selectors.
- Don’t add unnecessary class names.
Enjoyed the article?
Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.
Comments (18 Comments)
Sorry, the comment form is closed at this time.