Posted by Archa
Posted on 08-28-2008 under CSS/HTML Markup, Development

There is an excellent article on Nettuts titled 10 principles of the CSS Masters. It covers everything from using CSS shorthand to the utilization of text transform.

The first principle dealt with keeping your CSS simple. This is more dealing with hacks and making things work in all browsers. Yeah that’s right, I’m talking to you IE 6. Anyways, the articles states As web browsers evolve, it’s much harder to keep up with the changes. This is true, and I think as designers we are all guilty of this. I spent countless hours hacking and fixing code so it will work in all browsers. I think it’s a good practice to keep your site’s simple and to know the problems before hand in laying out design, because in the end time is money.

Now the second principle ( Keep CSS declarations in one line - Jonathan Snook ) is one I do not follow. I know, I know I’m a rebel. No seriously, I think it’s a preference thing. The article quotes Johnathan.

The second one may look prettier but it sure doesn’t help me find anything. When looking for something in a style sheet, the most important thing is the ruleset (that’s the part before the { and } ). I’m looking for an element, an id or a class. Having everything on one line makes scanning the document much quicker as you simply see more on a page. Once I’ve found the ruleset I was looking for, find the property I want is usually straightforward enough as there are rarely that many.

I don’t think it’s a matter of looking prettier, but more of visibility. Having all your declarations in one line, for me at least, makes everything run together and hard to find. Using single line declaration does make your file smaller because it removes unneeded spaces and characters, but I’m also not writing 20 thousand lines of declarations in my CSS files. Like I said before I think it’s more of preference of what you’re accustom  to. If you find it easier to work with single line, then go for it. If you like having your declarations on multiple lines  because it makes your life easier, then more power to you.

The third principle is a good one. It’s the use of CSS shorthand. An example of using CSS shorthand would be if you want to use this:

background-image: url (img.png);
background-color: #000;
background-position: top left;
background-repeat: no-repeat;

All of those properties can be wrapped up into something like this:

background: url (image.png) #000 top left no-repeat;

Now that looks a lot nicer and keeps things simple. Simple is good.

The fourth principle deals with allowing block elements to fill space naturally. Everyone who deals with CSS on a daily basis knows that IE and Firefox handles padding and margin differently when it comes to block elements.  Following this rule will help you with future headaches.

My rule of thumb is, if I set a width, I don’t set margin or padding. Likewise, if I’m setting a margin or padding, I don’t set a width. Dealing with the box model can be such a pain, especially if you’re dealing with percentages. Therefore, I set the width on the containers and then set margin and padding on the elements within them. Everything usually turns out swimmingly.

There’s still 6 more principles for you to go through and I hope this article is useful to you. Take what you will and Godspeed.