Css Globe

Delicious | Digg | Stumble | Reddit | Float | Subscribe to RSS Feed

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?

Subscribe to our RSS feed or share it with your friends.

Delicious | Digg | Stumble | Reddit | Float | Subscribe to RSS Feed

Comments

• David Sparks on 10 Apr, 2008 wrote:

  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.

• Boris on 10 Apr, 2008 wrote:

  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)

• cssglobe on 10 Apr, 2008 wrote:

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

• cssglobe on 10 Apr, 2008 wrote:

  @Boris, thanks for your thoughts. I knew Twitter would come in handy :)

• Sarah on 11 Apr, 2008 wrote:

  Useful article. Thanks

• Mcm on 12 Apr, 2008 wrote:

  Thanks for the tips.
  I'd like to know some reasons to avoid universal selector to reset default styles.
  
  Thanks

• SeanJA on 12 Apr, 2008 wrote:

  You avoid using a universal reset because it will slow down the loading of your page as far as I know.

• Damjan Mozetič on 13 Apr, 2008 wrote:

  A nicely written tutorial, which starts right where it should - slectors. Thumbs up!

• AndreiZorrov on 13 Apr, 2008 wrote:

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

• chronic chick on 16 Apr, 2008 wrote:

  THanks for the information, great information

• Adrian | Rubiqube on 18 Apr, 2008 wrote:

  Excellent tips. Looking forward to Part 2.

• maxxu on 20 Apr, 2008 wrote:

  Really good and usefull. Waiting for the second part :-)

• Shane on 22 Apr, 2008 wrote:

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

• Markus Nordin on 6 May, 2008 wrote:

  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.

• Olga on 8 May, 2008 wrote:

  Hi! Tnx for great article. I published translation in russia lang. on my blog for webmasters. You can check it here