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.

Multiple classes

<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.

Type Selectors

a color:#ff0;

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.

Descendant Selectors

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.

Combinations

#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.

Summary

Do

  • 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

  • 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.

DeliciousStumbleUpon RedditSubscribe

Comments (18 Comments)

  1. David Sparks
    April 10, 2008

    My only critique to this is that you said you use the decedent selectors to add the underline which you remove in the reset.css. I use Erics reset and it doesn't remove my underline. Since the majority of people still find the blue underlined text the most easily recognizable as a link, seems counter productive to remove the underline in the reset and reapply it somewhere else. I of course don't know the reason why you needed to do this though. Just chiming in. enjoyed the article.
  2. Boris
    April 10, 2008

    You are absolutely correct about using too description style names. They can cause some big problems down the road. Combinations is one of the best styling. I mostly use it rather then assigning classes or ids to objects. A very nice way to limit decoration on a page and just let CSS do all the work. I'm looking forward to more in this series. (thanks to twitter i saw you posted this article hehe)
  3. cssglobe
    April 10, 2008

    @David: I said global reset not Meyer's reset. I don't use Meyer's reset I use my own, not as advanced. In my (global) reset I remove underlined links cause I find it easier to apply it for one section only then to remove it for various sections (top or left nav etc.) ,Just a habit I have.
  4. cssglobe
    April 10, 2008

    @Boris, thanks for your thoughts. I knew Twitter would come in handy :)
  5. Sarah
    April 11, 2008

    Useful article. Thanks
  6. Mcm
    April 12, 2008

    Thanks for the tips. I'd like to know some reasons to avoid universal selector to reset default styles. Thanks
  7. SeanJA
    April 12, 2008

    You avoid using a universal reset because it will slow down the loading of your page as far as I know.
  8. Damjan Mozetič
    April 13, 2008

    A nicely written tutorial, which starts right where it should - slectors. Thumbs up!
  9. AndreiZorrov
    April 13, 2008

    --->Don't use descriptive class names like "red", "blueDot" etc. 8) hitting his head on the wall until it is realized
  10. chronic chick
    April 16, 2008

    THanks for the information, great information
  11. Adrian | Rubiqube
    April 18, 2008

    Excellent tips. Looking forward to Part 2.
  12. maxxu
    April 20, 2008

    Really good and usefull. Waiting for the second part :-)
  13. Shane
    April 22, 2008

    "Don't use descriptive class names like "red", "blueDot" etc." was the first of of your Don'ts. I think your Do: "When choosing use class names, use class names that describe content's meaning or purpose, not it's appearance" says it much better. Basically, the class names should be descriptive, but not of the design or visual aspects, but of the markup's semantic purpose.
  14. Markus Nordin
    May 6, 2008

    A very good example for using multiple classes is defining a "left" and "right" class for floating. Also, IE has a few hickups when using multiple selectors, but http://code.google.com/p/ie7-js/ will fix them.
  15. Olga
    May 8, 2008

    Hi! Tnx for great article. I published translation in russia lang. on my blog for webmasters. You can check it <a href="http://www.getincss.ru/2008/04/29/css-absolyutnye-da-i-net-chast-1-selektory/">here</a>
  16. Jitendra Vyas
    June 25, 2008

    "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." I want to know how can i use same class name on different type of elements. and i want to see your Global reset css.
  17. Bloggerschool
    August 22, 2008

    Hi! Tnx for great article. t got importent information about CSS
  18. iGuide
    January 16, 2009

    What about combined class selectors, i.e. .apple.grape (NOT .apple .grape) do these work properly?

Sorry, the comment form is closed at this time.