Article: 5 CSS Tips for Beginners

- BY Eric/Steel Frog, August 19 2008 -

Article: 5 CSS Tips for Beginners

I’ve been writing CSS for several years already, and I can honestly say that I’m still not totally comfortable with it.

CSS by itself is not a complicated pseudo-language, but it does have some intricacies that come with experience. Here are five quick-and-dirty tips to give you a hand and to get you started on the right track.

1. Give your classes proper names

If you’re developping a stylesheet for a client or for some sort of public distribution, I forbid you to call your classes and IDs generic, non-descript names like .t121-2. Use proper names like .sidebar-container or I’ll come to your house and kick your puppy. I mean it. I can’t tell you how much time I’ve wasted deciphering incoherent CSS and I still don’t understand why people still refuse to do this.

2. Spend the extra time to design your Stylesheet

While this isn’t the best solution when it comes to optimizing, it’s usually not an issue unless (until) your websites receives heavy traffic. Design your stylesheets and space everything properly to show parent/child inheretence will save you a lot of time and many headaches when it comes to debugging.

It’s also a good idea to seperate your stylesheet into logical sections. In my case, I’ve divided it into several:

  • Framework (columns, site structure)
  • Left Column content
  • Center Column content
  • Right Column content
  • Footer
  • HTML definitions
  • Generic, all-pupose classes

It then makes it easier to modify or update. Here’s a quick example of a proper inheritence tree:

div#container {}
   div#container p {}
      div#container p a {}
   div#container span {}

3. Design with parents, not with classes

Too often, I see people assigning classes to every little element on their pages. Bad coders, bad! An easier way to deal with styling elements inside containers or block elements is to simply define their wrapper.
For example, I have a paragraph inside a container, say #sidebar-comments which need to have their line-height increase.

Wrong:

p.sidebar-comments-content { line-height: 1.2em; }

Right:

div#sidebar-comments p { line-height: 1.2em; }

By defining the paragraph style as a child of the sidebar-comments divider, you avoid unnecessary markup. Keep in mind that this is only relevant when you want the change the apply to all the defined elements in the container.

4. Use a Reset stylesheet

It’s a well-known fact that browsers render objects differently. Internet Explorer will render an input box differently than Firefox or Opera will. That’s why it’s always a good idea to implement a Reset stylesheet. In a nutshell, it will remove all default browser attributes from elements like padding and margins, forcing you to style them which allows much greater compatiblity between browsers. This doesn’t take care of all compatibility problems, but it sure does help identify them.
I’ve been using Eric Meyer’s for years and would highly recommend it. Don’t forget to make the browser load the reset stylesheet before your design stylesheet though! Keep in mind that some reset sheets are not W3C valid, so get a good one!

5. Debug with colors

Debugging sucks. I know it, you know it. If you can’t quite figure out where your container ends, here’s a nifty trick: pink it. That’s right, pink it.

div.debugger { color: pink; background-color: pink; }

I can guarantee you won’t have a hard time finding it after that.
That’s all for now! Stay tuned for more tips later. Drop me a line if you need any help!

2 Comments

  1. Comment by Kid Tech Guru — August 21, 2008 @ 8:17 AM

    Gravatar

    This is absolutely useful for me!

  2. Comment by Code Remedy — August 21, 2008 @ 6:03 PM

    Gravatar

    Good post. I agree, especially with number two. I just hate reading through obtrusive stylesheets where there is no formatting or order, and it takes me ages to find just some stupid little classes.

    I have already been hired to modify several Web sites not designed by me and the stylesheets were really mess. If they were well structured, I could have saved lots of time.

    Richard


Leave a comment

Ask a question or post a comment! Comments are heavily moderated; anything too off-topic or flame-baiting will result in deletion.

Gravatars are enabled. If you don't have one, get one!

Your E-mail address is required but will not be posted.

You can use the following tags in your post:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>




Categories


Archives


Friends


Popular Posts

Subscribe & Stalk

Subscribe by RSS
Subscribe by E-mail
Follow me on Twitter
Follow me on Reddit


Twitter Feed

Saw the new Alice movie last night. If you haven't watched the original cartoon or read the book, be sure to do that before you go see it.  ]


Status & Notes

Major update upcoming. I will be changing the way I do business. Rather than freelance, I will be developing and selling various design products on the website. More information to come soon.

01.02.2010


Recent Comments

Comment forik said:

“Привет! Вы пишете очень интересно. Я, пожалуй, подпишус[...]”
» Read the rest

Comment Steelfrog said:

“Iamyou - Yep, once the new design goes live, I'll be adding video tutorials for subscribers, but tha[...]”
» Read the rest

Comment Iamyou said:

“A video tutorial of this on youtube would be SOOOOOO helpful I am more of a visual person i can read[...]”
» Read the rest

Comment hoydf said:

“Привет! Вы пишете очень интересно. Я, пожалуй, подпишус[...]”
» Read the rest

Comment hoikf said:

“Nice post. It is interesting and tasteful. Thank you.[...]”
» Read the rest