Comments on: 10 Top Notch CSS Principles of the Experts

By: Web Design Beach

Web Design Beach — Tue, 28 Apr 2009 18:57:55 +0000

Hacks are also bad because i had few problems validating them with W3C validator.

By: Balkhis Sweet Monday Link Love - 4/27/09

Balkhis Sweet Monday Link Love - 4/27/09 — Mon, 27 Apr 2009 13:33:42 +0000

[...] 10 Top Notch CSS Principles of the Experts [...]

By: Used Tires

Used Tires — Sun, 26 Apr 2009 16:53:44 +0000

Awesome tips for sure, To add something about #1.. I am pretty sure that if you utilize the shortcuts, you will probably save some file size space. Although it wont be anything “significant” but any file size decrease is a good thing.

By: Donna

Donna — Sat, 25 Apr 2009 14:26:11 +0000

#8 is NOT practiced by experts. Experts make an effort to make their sites usable by all Those that are sight impaired, older, or just feel more comfortable reading a larger font, need the resizing of fonts. It is not all that much more work, and you make the site more user-friendly. Lazy coders use px, pros use ems or %.

The rest of your article is OK.

By: Television Spy

Television Spy — Sat, 25 Apr 2009 04:28:49 +0000

good tips will look into some of them

By: Brett Shegogue

Brett Shegogue — Fri, 24 Apr 2009 23:37:14 +0000

Good Article! A few things…

#3 – Make sure everyone is aware that there are also IDs. Classes are for styles that will be used more than once within a page. IDs are styles that are used once. Chances are, your “main” styling is going to be an ID not a class

#6 – A few carriage returns will not be that burdensom on load time. I personally find it easier to work with and read CSS that has one property per line. The main thing here is to be consistent.

#9 – this generally deals with IE. You can always include a separate stylesheet for IE browsers

By: Gerhard

Gerhard — Fri, 24 Apr 2009 21:55:47 +0000

#1 NEVER use just 0. If you're using em, px, or pt, use them consistently. Say padding: 0em 1em; or margin: 10px 5px 10px 0px; #2 Use HTML5 semantic classes #4 HTML 4.01 is what you want #6 I disagree. Keep your CSS files READABLE first. There is YUI compressor and a tonne of other solutions, NEVER write your css on one line. You wouldn't write your HTML on one line, would you? #8 Also disagree. em or % is what you want. #9 Yes, indeed, hacks are bad (except for IE6 & IE7 that are just dumb). Having said that, use degradation if the client is willing to compromise (they usually aren't). I would say validate, but at the same time use CSS3 - which won't validate. Valid CSS is not the point, NOT having bad or sloppy CSS is.

By: Robin Cannon

Robin Cannon — Fri, 24 Apr 2009 20:52:16 +0000

pt is what you use for print typography. It doesn’t work that brilliantly in web pages most of the time because different resolutions have different impacts.

An em is “a unit equal to the size of the current font”. Basically what that means is that if the font size is set to 12px, then 1 em = 12px. The reason it’s more useful for web design is because it’s more flexible in terms of resizing.

It’s also easy to set for web design to mirror accurate pixel sizes. The default font size for browsers is 16px. If you set in your body CSS font-size=0.625em or 62.5% then you reset 1em = 10px. Then for other elements you just use whatever size you want. If you want 12px then use 1.2em, etc.

By: PS3

PS3 — Fri, 24 Apr 2009 19:59:28 +0000

Some good tips there!
What is pt or em? Never heard of them. I’ve always used px myself!

By: Robin Cannon

Robin Cannon — Fri, 24 Apr 2009 18:44:13 +0000

I’d argue strongly against point 8. You should be using em instead of px. px are far less flexible for the end user – particularly in those browsers where they can’t change the size of fixed px fonts. em provides far more flexibility and doesn’t have any impact on defining your font sizes.