Comments on: CSS Code Readability Tips

By: Kia

Kia — Sun, 23 Aug 2009 03:13:19 +0000

Thanks so much, your tips were very helpful!

By: photoshop masking

photoshop masking — Tue, 09 Jun 2009 05:23:17 +0000

Great tips. Thanks a lot.

By: Carl - Web Site Design Instructor

Carl - Web Site Design Instructor — Thu, 07 May 2009 09:56:10 +0000

Cool, I thought I was the only one to indent CSS styles also ;)

By: Andy Gongea

Andy Gongea — Sat, 28 Feb 2009 00:21:01 +0000

Regarding the wrapper – your suggestion is a good tip indeed. I used to create a wrapper because in some designs I can use it as placeholder for different graphic elements and as a …. wrapper for the content.

Anyway – I didn’t think of this approach. Thanks and Cheers.

By: Andy Gongea

Andy Gongea — Sat, 28 Feb 2009 00:19:02 +0000

Maybe you don’t see it, but it is font and not font-size. Last time when I checked it was valid.

By: Keloran

Keloran — Sat, 28 Feb 2009 00:02:42 +0000

You might want to also write valid css

font-size: 62.5%/1.1em is invalid

By: Keloran

Keloran — Fri, 27 Feb 2009 23:58:32 +0000

Why did you create a

wrapper div, kinda pointless

heres a good tip for you, use the html and body tags

html { text-size: 62.5%; }
body { width: 960px; margin: 0 auto; }

By: Soh Tanaka

Soh Tanaka — Wed, 25 Feb 2009 15:53:49 +0000

Great article :-)

I do have to say that perhaps this is a personal preference but I can’t stand working with #3 and #5 :-p

#3 – Write 1 CSS Rule per Line : this only works for me when its a couple properties… if i get into a fat propertied selector, I have to break it up in its own line so I can easily scan its values.

#5 – Indent your CSS Rules : I’ve seen other people go for this style but for me its messier and difficult to read :-(

Thanks!

By: Keegan

Keegan — Wed, 25 Feb 2009 15:45:02 +0000

Not bad … I also like to alphabetize my css so I know if something is or isn’t in a long list of attributes.

By: Chris Eppstein

Chris Eppstein — Wed, 25 Feb 2009 15:34:41 +0000

It looks like you would really enjoy working with Sass. If you haven’t seen it yet, check it out. http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html

The compass framework makes it really easy to manage your sass files and use frameworks like blueprint without adding non-semantic class names all over your markup. http://compass-style.org/