Thoughts on “10 Principles of the CSS Masters In HTML / CSS”
NETTUTS ran an article last week titled 10 Principles of the CSS Masters. The article asked several CSS and industry experts to provide advice on much-discussed CSS topics and share a trick or two. The article brought up some great points and some points I didn't quite agree with. Here are my thoughts.
1. Keep CSS Simple (Avoid CSS Hacks)
CSS is a simple little language and your stylesheet should reflect that. As you start out with CSS, you end up putting too much in your stylesheet. Years later, you realize you didn't need half of what was in there. CSS definitely subscribes to the K.I.S.S. philosophy.
That said, I don't believe you should see CSS hacks as evil, rather a necessary evil. When you use one, however, you must be aware of how your hack could effect other browsers (both past and future). If you're using many CSS hacks, you may have a structure issue.
2. Keep CSS delarations in one line
Amen. I used to do the whole pascal-style CSS thing and after six months I couldn't do it anymore. The horror of scrolling!
3. Use CSS shorthand
Like principle 2, this can save your quite a bit of file size. Using shorthand will eventually become second nature to you and you'll program faster. I mean, which do you like better:
/* sloppy */
.element { margin-top:5px; margin-right:10px; margin-left:10px; margin-bottom:5px; }
/* better */
.element { margin:5px 10px 5px 10px; }
/* mo better */
.element { margin:5px 10px; }
4. Allow block elements to fill space naturally
Agreed. From Jonathan:
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.
After reading this I checked through a bunch of my newer projects and discovered that I was subscribing to his "width or margin/padding" notion.
5. Set a float to clear a float
The "clear:both;" empty DIV should be in any web developer's arsenal. It's the quick and effective cure for your CSS float pains.
6. Use negative margins
I've not been in a position where I needed to use negative margins and I feel that's a good thing. Not to say that this tip isn't valid, but I would think not using negative margins would be a goal of the developer.
7. Use CSS to center layouts
I do this on every website I make. The ole' "margin:0 auto;width:960px;" serves me quite well.
8. Use the right DOCTYPE
I've always thought that the goal was to work your skills up to using the "strict" DOCTYPE and I still believe that. Also, note that using the strict DOCTYPE will help to keep your JavaScript library code working (true dimensions).
9. Center items with CSS
This principle is based on an interesting article about how to center items using CSS. I'm not a big fan of the "text-align:center;" way of doing things, but it works.
10. Utilize text-transform commands
I've falled victim to this numerous times. I've inherited websites from "webmasters" only to find that every H1 tag letter in the code is capitalized. Damn amateurs. Using text-transform to capitalize letters is a must. This type of capitalization is almost always a design element, so why would you want the search engines displaying a whole bunch of capitalized content from your website?
These are a few of my thoughts. What are yours?
Hi david, have you heard about the easy clear of position is everything?
link text
I’ve been using it for same time now, and works 90% of the time, without adding an extra DIV.
Regards,
Nacho.
I’m reading this and have a feeling that you haven’t been doing CSS (or generally webdev) for a long time, have you?
Avoid them, yes. Use them, yes. Keep ’em separated from the basic sheet, yes.
Keep ’em clean and as you wish them to be. Use YUI compressor afterwards.
Agreed
Agreed
There are far more better and effective ways of clearing floated layouts – google it.
CSS is CSS, use all sort of margins you need in every way you need them. Unfortuantely we’re not in a position to say if someone’s solution of using margins is the good one. We’ll talk about it when CSS3 layout-model comes around.
8, 9, 10… No time to read it… Need to go and boycott someone else.
Btw. ever heard of the Blogging rules?
Blogging rule no 1. Keep your rules to yourself.
@Nacho: Great article, but 90% isn’t good enough for my customers’ sites.
@Oskar: I’ll share my opinions on my blog as I please. Keep your arrogance and insults to your blog.
@Oskar: Silence! Not smart man, you just eliminated lots of David’s readers from ever subscribing to your blog because of your lameness. And you should have bothered to read the whole article. Then you would see that, with the title “Thoughts on…” and the last line “These are a few of my thoughts. What are yours?”, he’s giving his opinions on it and trying to get some other opinions and discussion going on in the comments.
I have to agree with you when it comes to negative margins. I’ve used some negative offsets when doing css ‘sprites’ but I can’t imagine a situation where using a negative margin or padding would make sound cross-browser sense.
Just seems like a whole lot of trouble waiting to happen.
I have to disagree with the idea of keeping CSS declarations in one line. Breaking individual declarations up, one rule per line, makes it MUCH easier to visually parse your stylehsheets, see what they’re doing, add rules, remove rules or comment rules it. It also make it much easier to keep track of CSS changes in version control. If all rules in a declaration are on one line, then the entire declaration will be marked as changed when you change a single rule. If each rule is on its own line, then only rules that change will get noticed by your diff tool.
Sorry, that should be “remove rules or comment rules out.”
Well, I don’t frankly agree with rule number 2!
Even if I had to scroll down, I love to write every rule in a single line.
Wow, two fans of one rule per line. I find it unbearable, but to each his own.
I think the fans of one rule per line probably don’t have an Apple mouse that allows for horizontal scrolling, so it is not worth it to even try it differently for an extended period of time. I too would find it frustrating to have to move my mouse to the bottom scroll bar then back up to place my cursor.
Of course a bigger monitor could help…
Three fans of one-rule-per-line.
Unless your styles are very short they’ll wrap, and that’s way, way harder to read. Grouping related rules on one line, perhaps.
@Braxo: You navigate your source code with a mouse? You must use a fairly primitive editor if it can’t navigate sensibly with keys. Heck, even clicking on the line and hitting the “end” key would be more intuitive than twiddling with the hscroll.
+1 for one rule per line.
It’s so much easier to read, whether you have to horizontally scroll or not, it’s about being able to find the rule quickly and I find it’s much easier to scan read and find something if each rule has its own line.
Wow, 1-liners (pun intended) coming from everywhere! I started as a 1 rule per line guy but stylesheets just took forever to scroll.
I stick to single liners when theres only a few rules for each selector, kinda looks cramped for me when everythings kept on a single line. When theres more than 3 or 4, I use new lines for each comment.
Hi,
I tottally agree with you on all your principles but #2.
I think it’s better to do that on an hybrid way: Keeping the vertical way but grouping similar elements, like width and height, padding and margin, background and color, etc.
Using comments to make search faster is nice idea too.
That makes it easier to read and faster to modifie.
Then you can get your CSS through an compressor, so you have an extended and documented version for you to work on, and a compressed version to save size on your website.
Saludos desde Argentina (and sorry about my english… xD)
Facundo
I’m a one liner too! My IDE has code folding for CSS, so this helps me reduce scrolling. I also apply “modular” stylesheets with
@importto help in avoiding these getting too long. Though I have used all declarations on a single line when I’m forced to use internal or embedded stylesheets, but I prefer external stylesheets.I just discovered your blog and love it! I have a lot of catching up to do on your posts. Thanks for your efforts.
Rule #2 FAN! I love to open my stylesheets and understand their rules at one shot. For me it’s very important to visualize the structure of the website:
.container { ... } /* using tabs to align brackets */
.container .interface { ... }
.container .interface .header { ... }
.container .interface .header .logo { ... }
.container .interface .header .title { ... }
.container .interface .header .menu { ... }
It’s easy to see how the more global rules affect the following more specialized.