CSS Tips I Wish I Knew When I First Started

CSS Tips I Wish I Knew When I First Started

Apr 19th by Andrew Houle  |  stashed in Webdesign

4

I’ve been working with CSS for quite a while now, and even though it’s relatively easy to learn, there are always new tips and tricks to be found. I’m learning new stuff all the time. I wanted to take a moment to put together this helpful list of CSS tips I wish I knew when I first started. Although many of these tips are common knowledge, I think you’ll find them helpful. At the very least I hope you’ll be nodding your head in agreement.

Use Overflow: Hidden; to Clear Floats

It wasn’t until recently that my style sheets were littered with unnecessary clearing floats that looked like the following.

1 2 3 4 5 6

.clear { clear: both; } <div id="columns"> <div id="column1"></div> <div id="column2"></div> <div class="clear"></div> </div>

These clearing floats will work perfectly fine, but they are unnecessary. Instead you can just use overflow: hidden; on the parent div to clear the children elements, like in the following example.

1 2 3 4 5

#columns { overflow: hidden; } <div id="columns"> <div id="column1"></div> <div id="column2"></div> </div>

Group Elements Together

One of the mantras of good coding 101 is to keep your code as simple and concise as possible. This helps its readability and performance. If you have a couple of elements that are doing the same thing, it’s wise to string them together. So instead of…

1 2	h1 { color: #333; font-weight: bold; } h2 { color: #333; font-weight: bold; }

You can group these elements like so…

1	h1, h2 { color: #333; font-weight: bold; }

Comments Are Important

Many of the sites that I create are 1-man projects. The last thing I want to do when I get into the flow of coding a design is to stop my progress to add some comments. However, when I go back to that code a year later I often have no idea what I was trying to accomplish. By adding logical comments throughout I can give myself very readable reminders about my code. And if, someone else gets the pleasure of looking through it they’ll have a better chance of understanding what I was trying to do.

Add Some Base Styles to the Body

This goes back to the code-less principle I discussed earlier. I like to get a nice base of font styles setup right on the body tag rather than redefining font-styles for every element. Here is an example of what I mean…

1 2 3

body { color: #555; font: normal .8em/1.5em helvetica, arial, sans-serif; } <!-- Then I can just set weight, and size by percentage --> h2 { font-size: 150%; font-weight: bold; }

Use Some Kind of CSS Reset

One of the first difficult lessons that CSS noobs run into is the differences between browsers, especially when it comes to padding and margin styles. The best way to combat these inconsistencies is to start with some kind of CSS reset. There are a ton out there. Perhaps the most popular and the one I start with the most is Eric Meyer’s CSS Reset. Sometimes I just put together my own. At the very least you should use a simple global reset like this…

1	* { margin: 0; padding: 0; }

Use CSS Shorthand

This is me preaching about writing as little code as possible again! Why write this much code?

1 2 3 4 5

p { font-family: verdana, helvetica, sans-serif; font-size: .8em; line-height: 1.5em; margin-bottom: 10px; margin-top: 10px; }

When you can shorten it to this

1	p { font: normal .8em/1.5em verdana, helvetica, sans-serif; margin: 10px 0; }

IE Sucks

This well know fact has been covered more than enough, but I must admit that when I first started I wasn’t sure what all the fuss was about. After spending hours trying to make things look ‘ok’ in IE, you quickly come to realize just how much you loathe this piece. The best advice I can give on this subject is to fight through it, eventually you can tame the beast. Use hacks as little as possible, and in really tough situations target IE specific styles with a conditional statement like this.

1 2 3

<!--[if IE]> <link rel="stylesheet" href="ie.css" type="text/css" /> <![endif]-->

Take Advantage of Progressive Enhancements

Just because IE sucks doesn’t mean you can’t use technologies like CSS 3 and HTML 5 to add progressive enhancements to your site. So go ahead and add rounded corners in CSS, and box shadows (in moderation please!). And if you really want to get things looking pretty similar in IE here are 10 Ways to Make Internet Explorer Act Like a Modern Browser. Even so, it’s good to keep in mind that your site doesn’t need to look identical (not that it ever will) across every browser.

Writing Clean Code Makes Me Sleep Better

This tip goes along the same lines as commenting throughout your code. Writing cleaner code helps with readability for yourself, and for those poor folks who may have to read your code down the road. How exactly to clean up your code however, can get a little nit picky. There is plenty of debate about which way is best, for instance should you use hyphens, underscores or camelCase, others debate over whether to alphabetize or prioritize your properties, still others wrestle over whether to put css on one line or multiple lines. For the record, I use hyphens, alphabetize, and single line, and that’s definitely the right way to do it :)

Till I Learn Some New Stuff

That’s it for now, but like I said I’m always learning new things. What sort of tips have you learned that you’d like to share. And feel free to add to the debate about what is the best way to write clean code (I’m sure the opinions are limitless).