Posts Tagged ‘css’

5 Tips To Better CSS

Saturday, August 15th, 2009

1. Keep all your CSS on one line.

When you create a standalone cascading style sheet, keep all of your styles on their own single line. For example:

.myStyle { color: #fff; border: 1px solid #000; }

This method keeps things nice and tidy and it’s a lot easier to find what you’re looking for when you have a large stylesheet.

2. Comments are your friend.

I admit it, I’m guilty of not doing this consistently. However, confessions aside, commenting any work is important and that includes your style sheet. It cannot only save you a lot of headaches, it also saves headaches for anyone who has to do revisions on a project that you’ve completed. That way, your co-workers aren’t putting tacks in your chair while you’re at lunch.

3. Try a CSS reset.

A fresh start can be good for anyone. And your stylesheet can benefit from it as well. I have found that, by using a css reset, it eliminates a lot of those pesky bugs that you get between browsers. Not all of them, but quite a few. My favorite is Eric’s Reset Reloaded. You’ll need to adjust some of the styles for browser compatibility but the basics are still great for this one.

4. What’s in name?

Use consistent, proper naming techniques for your styles. Like comments, this makes it much easier to update your style sheet and HTML. Naming convention is great for remembering which useable styles do what. For example:

h1.red20Title: { font-size: 20px; color: #ff0000; font-weight: bold};

A style with this naming convention will help you remember what the style is for when referring to it in your HTML.

5. Try Firebug.

Even though you can only use Firebug in Firefox, it is an invaluable tool for checking errors in styles. Firebug allows you to inspect elements of the page with the click of a mouse button and Firebug tells you what styles are associated with each element. Firebug also allows you to arbitrarily change styles and HTML to see the effect that these changes would have on the appearance of the page. Firebug is every developer’s best friend.

No  matter how you decide to do your CSS, having a consistent method is a key to having a well-styled website.