Comments on: 10 Tips for Writing Better CSS

By: Christopher Becker

Christopher Becker — Wed, 19 Oct 2011 15:49:51 +0000

Nice article, but I think that sorting your css alphabetically is not correct, what I find works best is to sort the css out in groups, everything that has something do with the header will be together, footer the same and so on…

So you know all the code that belongs together is together, and commenting makes it easier to follow.

By: phong long

phong long — Thu, 29 Apr 2010 00:25:24 +0000

Nice article! The one section I’d have a difference in opinion in is with ordering rules alphabetically. What I’ve found very useful is to instead order group rules visually by type and how they will affect their eventual rendering on a page.

for example, i would group and order the .classname rules as:

.classname {
position: relative;
z-index: 101;

padding: 0;
margin: 48px;
border: 1px solid #dedede;

color: #000;
font-size: 18px;
line-height: 24px;
}

this way, all the positional rules are visually distinct from the layout rules and the typography rules. This order also helps as a reminder of what’s involved in determining the overall rendered size and position of the element.

By: ambrooks

ambrooks — Fri, 23 Apr 2010 19:43:27 +0000

I use the same rules when grouping my styles.
although I usually have each group on a new line.

#selector {
display;float;width;height;margin;padding;
font;color;text-align;
background;border;}

#alt-selector {if;only;one;group;}

By: Peter Hobbs

Peter Hobbs — Sun, 24 Jan 2010 05:54:07 +0000

NICE – thank you

By: Kimberly Roberts Design

Kimberly Roberts Design — Fri, 22 Jan 2010 11:46:26 +0000

Great article! I haven’t used a “start sheet” before, but what a great idea. I’m not so sure I can use the example from Eric Meyers, but I will definitely be making one of my own for future projects.

By: Tedel

Tedel — Tue, 19 Jan 2010 19:57:20 +0000

mm… I add one: Use more z-index and less float. It works.

By: Patrik Krupar

Patrik Krupar — Tue, 19 Jan 2010 11:43:13 +0000

I can’t agree with your multiple rules = multiple lines. I know from my experience, the biggest the file is the hardier is it to read it. To split it into more files is no good idea because of to many HTTP requests.

Anyway great post, thank you!

By: grek

grek — Mon, 11 Jan 2010 16:00:57 +0000

Agree!

By: Jeremy

Jeremy — Tue, 05 Jan 2010 18:10:06 +0000

agreed. keep hacks with original whenever possible. if I throw something into an IE-only css file, then the orig css file gets a comment that there is a hack applied and in what file.

if the hacks are the only things keeping you from validating, then understanding that is better than validating if it costs $100s to workaround. I promise 99%± validation to clients, on the understanding that with as anal as I am about my markup, they should be fine if I spare them a few $100s to have it ‘almost’ validate—unless validation is in their spec up front. in that case, I promise to work as efficiently as possible, but but they’re on hourly rates to fix validation/bug issues that could be solved by a simple fix otherwise.

By: Magentoua

Magentoua — Tue, 15 Dec 2009 13:44:50 +0000

Im not agree with lots of advices but still they are good for a beginner.