NO I’M NOT!

haha well maybe some :/

Some good points taken here, except for the 800 res. I think most designers nowadays build for res. 1024 and =>

Good read. I seem to have passed.

http://twitter.com/richanomix

Not only might you want to put all your CSS in one file, you also can reduce the download times for your users by minfying/compressing this file. Of course, keep the original file as this is the one you will make changes to in the future (and then compress again for production). Yahoo has a good tool for this:

http://developer.yahoo.com/yui/compressor/

so far, all points already in my list. kudos.

I’d have to disagree with 8. If it’s a table then it should be a table. But using a table for layout isn’t semantic and more importantly makes redesign a pain. I understand that the author wasn’t saying use tables over CSS. But I just saying using tables because they are quicker won’t save time in the long run.

I strongly agree with 4 I always have classes such as .fRight, .fLeft, .fNone, .clear, .block, and .unem.

.unem is my favorite. Unem is the opposite of the em element. Since we don’t have an un-em tag I use a class. Basically it just desaturates the text color and sets the font-size to .75em. It’s very useful for legal copy, disclaimers, footnotes, etc.

Nice photos! Good read also.

There is a program I use called IETester, and it emulates IE 5.5, 6, 7 and 8 BETA, instead of having to wait on BrowserShots.

what is it with the photos? am i going to hell if i use a large bg image?

Nice article but I totally disagree with point #4. Having generic single rule styles is defeatist, example follows.

Say you have 3 generic classes .right { float:right } .textCenter { text-align:center } and .bluebg { background:#00f }. Then if you had an element that needed all three effects you’d have a class string of something like “right textCenter bluebg”.

This is bad for 3 reasons:
1) you’re effectively emulating a style attribute – except a little bit shorter
2) you’re increasing the page size unnecessarily
3) you’re creating a maintenance nightmare (just the same as if you had used a style attribute instead)

Agree with Darren above. Personally, I have 5 css files which are merged then minified as part of the build process. This gives us the flexibility of easy to read/separation of concerns without the mess at the end.

Darko

I also want to ask, why did you put “rightright” together? I always thought you could just put “float:right”?

Your underlying assumptions and reasoning are flawed, turning your points into crap.

I would have to agree. My only beef would be with #3 as I’m not a fan of frameworks that I don’t build.

JavaScript frameworks are great… but CSS frameworks I stay away from. I feel i have much better control over a layout if I’m using my knowledge to build it properly from scratch. It’s not about reinventing the wheel… but more about learning and refining my craft.

CSS frameworks have their place (such as a large scale structured grid layout site in which many people will be coding together on it)… but I don’t think they should be used for every site you build.

I love the run away forest fire pictures. Nice touch on a good post. Thanks.

I haven’t done any of these. Nice use of “cardinal sin” Great advice!

@Nick

Looks like that might be some sort of bug with their code plugin. Noticed it too.

Good tips here. I think that choosing between 800 and 1024 would depend on your audience. I tend to build between the two.

at least 70% of this post have been already written down years ago – and a lot better. the rest feels pointless.
i’d excuse this and not write a comment if this was at least labeled “beginner”, but then you’d have to add “misleading”, also.
i think the author tries a bit to hard. that said, he certainly knows how to build websites.

My biggest problem is always the first point made here. I will get done or nearly done with a project only to realize that there are a list of flaws in a different browsers (IE6 or 7 most of the time).

I’ve been back and forth on the CSS frameworks though. Used them in some cases and not in others. I prefer Blueprints when I do.

Great article:
http://www.krishammons.com

Thanks for showing the 960 grid css framework. Will use it for sure for some projects.

nice article. Im guilty.

Mostly a good list, but this article commits what I think is a common CSS mistake in naming classes by not using proper semantics.

First, the author suggests using class=”right”… but what happens if you later decide you want that element on its own line and centered? Having class=”right” is no different better than writing style=”float: right;”

Second, the author uses class=”link_style” in another example. Since this is already on a link, this doesn’t give us any new information… If you want to style all link elements, then you don’t need to give them a class. If you want different styles for different links, then give them a name that logically categorizes them: for example, class=”external_link”

great one. Of course this example shows a lot more than building a clone of twitter and I like it

ups… sorry, delete the previous coment, I posted in wrong article Sorry

I’d recommend using reset CSS. I always like to reset browser defaults from the start. It saves me a lot of trouble when debugging for different browser/platform/OS combinations. I would recommend any of the following.

Eric Meyer’s Reset
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Yahoo! UI Library Reset
http://developer.yahoo.com/yui/reset/

NETTUTS: Create Your Own
http://nettuts.com/html-css-techniques/weekend-quick-tip-create-your-own-resetcss-file/

Most obvious advice ever… thanks.

Another vote for IE tester and yes I passed everything on the list.

I’m not sure why these pictures are still in these great posts even with the rather large amount of complaints against them in the past. It’s a pain when browsing this site on a mobile device.

I’m guilty too, haha…

float: rightright; ? thats invalid.

Great article Glen

Ha. I love the burning images.

Good article. I’ll personally start using Frameworks from now on!

cheers/

i have been ignored all this rules hehe

Thanks for the info

sick article man.

hit the nail on the head with all of these tips…nice and clear, and its a good reference list to make sure i don’t get carried away with some bad habits

well done bro.

Nope, I’m not. This is a pretty basic article, I was semi disappointed. Also, there are some mistakes in the codes above such as the float right class.


.rightright {float:rightright}


Is not valid CSS. Although I do appreciate the time it took to write this article so thanks for that

#3 Why reinvent the wheel? (re: css frameworks)

CSS frameworks are good for prototyping and for pushing out sites with crazily tight deadlines but as far as I’m concerned (and many others are with me) they are far from suitable for most real world sites.

They employ unsemantic, meaningless classes, they bloat your CSS unless you cut out bits you don’t need and worst of all they prevent you from actually learning. A professional web designer shouldn’t have to rely on one of these cookie cutter frameworks (blueprint for example) to build a site – although for prototyping they’re idea. I’m with Ara Abcarians on these frameworks not being recommended, but JS frameworks such as jQuery are very different and highly recommended.

If you’re a professional designer/developer then put that knowledge to use and create your own framework so you’re not building from scratch every single time. But please don’t rely on these horrible frameworks for production work.

What? Not considering CSS frameworks is a mistake? You must be joking.

BTW: “Inline CSS” are not “Inline styles”. There is a difference.

I make some mistakes， but I didnt want to make at all.

Regarding CSS Framorks, I don’t think you need anything else but Eric Meyer’s RESET code. The rest is up to the coder.

Im guilty too, but these images are much too much!

I make mistake #1 intentionally. We decided to help IE6 die and not support it anymore.
We put a little explanation for IE6 users why they should upgrade or change.
I think it is a form of duty for webdesigners, to help make the web better. If everyone keeps to spend hours trying to fix IE6 bugs, users will never change, as they don’t see the point to. We have to open their eyes and reveal them the true nature of IE6… ^__^
I made a longer argumentation here (in french sorry…) http://www.binocle.ch/blog/post/pilule_bleue_ou_pilule_rouge/

Good article. Nice tips to follow.
Thanx for sharing

I agree with Ryan and Ara about css-frameworks. Dont use them!

But two other mistakes hit my heart (or brain )
- CSS-Validating (i try it one times, but there where some quite strange tip’s of the validator)
- using to many files

so, thanks for the article

Great list, none of which I’m guilty of (ahem).

I once read a piece by Andy Clarke about the importance of separating presentation from content and one useful thing I took away from it was the naming of selectors..

In your generic classes for example you use the class ‘.left’ to identify something which floats left. Should your design change in the future, you may want your div .left to float right instead. For proper separation it’s therefore often better to name your selectors based on the content (div class=”sub_menu”) and not the styling.

I like how you talk about “mammoth background images” yet the article is populated with large pointless pictures. Hardly mammoth, but definitely pointless.

I’ve debated with myself a few times over on the CSS frameworks point. I’d agree with the other comments, they just seem far too bloated although reset stylesheets do make more sense.

On the generic class point, whilst I’ll agree .left is useful (and I’ll admit to using .clear out of necessity) it doesn’t satisfy my semantics side – we’re forcing style choices on the naming convention. What if in future I want the 100 left floated elements I’ve created to float right instead, sure I could alter the class but isn’t the point that we edit one CSS element then 100 classes in HTML?

I enjoyed this article, it’s always good getting a discussion going on key areas and it’s a great reference point for newer developers.

Do your shopping lists always have ten items on them?

One more thing I’d like to add is that many designs don’t account for resized text. I often resize the text on some designs. They often ‘break’ at larger sizes.

“The reason why we use technologies like CSS is because it should speed up development time” ?

That’s far from the biggest benefit of css.

So why dont we just make an jpg of everything? That should really speed things up.

Nice article indeed. However it’s strange that you speak out against using large background images, that is, wasting bandwidth in general and then fill your post with a bit too many illustrations (of a repetitive nature). One or two photos would’ve been quite enough to get the point across.

I’m not sure I agree with your last point about multiple stylesheets. I think it can be equally (if not more) confusing to have one file which contains everything in no sort of order whatsoever. I work on very large sites with huuuuge stylesheets which are really difficult to pick your way through.

Personally I think one needs to either use one file which is well structured, organised, and possibly include a comment at the top with an index of where things are, or to separate things out into multiple sheets (within reason). I tend to go with structure.css (for structural divs etc), forms.css, typo.css (for typography), navigation.css (i.e: anything that can be clicked!) and perhaps specific files for IE6 / 7.

Essentially I think if you’re using a single file, you must make sure it’s logically laid out and well commented. Using multiple files can make things a lot easier when it comes to making changes

Good Article! I Find i do all the above correct except for one -
Using Too Many Files: Recently for some reason i got into my head that when you use multiple smaller CSS files they would load quicker than one large one? Similar idea to smaller images than one large one? but i guess not

practical tips and observations

Nice article, but a few points:

Not using CSS Frameworks is not a *mistake* by any means, but a matter of project scope and personal preference.

Using *presentational* classes such as “right” and “left” is as much a cardinal sin as using inline CSS.

I don’t understand this affirmation:

“We have to remember, the reason why we use technologies like CSS is because it should speed up development time.”

We use CSS because we don’t want just boxy, rich-text websites, and CSS is the only styling language available. It’s not because it’s “faster” than bad practices and deprecated HTML tags such as FONT and CENTER, or using tables for layout. It’s because it’s the *only* way.

Actually, I don’t get #8 at all. HTML is for the semantic formatting of content, CSS is for the presentational styling of the content, JavaScript is for the dynamic manipulation of the content, server-side languages are for the programmatic manipulation of the content, XML is for the custom definition of content, and so on.

It’s simply not possible to use CSS for any other purpose than what it was designed for. If you are trying to categorize content in a way that doesn’t reflect its nature (ex: tabular data marked up in anything other than a table), it’s not so much a matter of seeing everything as a nail, but of failing to understand what you’re supposed to be doing.

This is a different discussion altogether than, say, trying to use Ruby to develop desktop applications, or Javascript to create a full-fledged dynamic website. In those cases, both tools can do the job, but there are other tools that are better suited for each task and, yes, would “speed up development time”.

But CSS simply can’t ever format content, define hierarchies, manipulate user-submitted data and so on, which is what you seem to imply, albeit accidentally.

It’s like saying “I don’t know if I should get from LA to NY by plane, car or color.” Doesn’t make much sense.

“Utilising Generic Classes”, as you suggest, sounds like an awful suggestion. It defeats the entire point of separating content from design; and offers little advantage over inline CSS for the tasks they complete. Say, if you attach a class “floatright” to everything you wish to float right, when (notice I didn’t say “if”) you decide to change the site design, you would have to dig through the HTML of each page if you wish to change the layout of some or all of these items.

<div id=”block_text”

If you’re still designing for 800px you might want to replace the underscores in your selectors with hyphens, since they break in some older browsers.

Thanks for sharing these tips, some of them will be very useful for me especially #9.

Thanks again!

It’s beautiful tips.

I have not tried CSS frameworks in any of my projects before, but I still prefer to code my CSS from scratch (well almost from scratch, I do keep a list of pre-defined styles as a snippet in Dreamweaver).

These are good points, but for the advanced developer they should all be common sense. Perhaps you could make a more advanced list?

Even if using css is taking longer, you should never use table markup for layout!! It’s not about how easy it is to develop, it’s the semantic meaning of the language. You don’t use h1s for paragraphs do you?!

Also, you can’t advocate separating design from content but at the same time encourage people to use classnames likes ” right”. What if you want to change the position of that element? You have to and edit the HTML to alter the visual style…

nice, thanks!

This stuff is common sense, and if you’re not doing most of this, you probably shouldn’t be publishing anything on the web until you know what you’re doing.

I also think that many things depend on the intended audience. If I want my personal portfolio site to be built up using a large background image and as much CSS3 as my browser of choice can handle, than I will (and am) do that. The percentage of users on dial-up or with tiny resolutions don’t matter in that case. It’s about the audience and the purpose of your site, not just the blind advocationof standards and rules.

Dan:: I don’t think he was advocating tables for design but rather as their intended purpose — tabular data, which doesn’t need to be done in CSS.

Will our site burn down if we make one of these mistakes?

#3: While I can see the benefit of using CSS frameworks I have vowed to never use them unless specifically requested by the client. They’re very bloated and all you know about semantics and naming conventions pretty much disappears when using them. Let’s be serious here, CSS if not hard. It’s a very simple thing to grasp, sure, there’s a bit of a steep learning curve in some cases but all in all it’s not hard to learn, and, if you’re aware of the common browser quirks then it’s quite quick to develop with. I honestly see no point in spending any time learning these CSS frameworks or using them – they would just slow me down!

#4: Again, I can see the benefit of doing something like this. Chances are it will speed up development but elements should be named according to their meaning/content, NOT according to their style! Semantically, it’s suicide to create classes like “.red”, “.bold”, “.hidden” because what happens when you want to change the color of, for example, all the warning messages on your site from red to yellow? Instead of just editing the “.warning” class you’ll have to go through each and every applicable HTML element and change its class from “red” to “yellow”!

Thanks for the list Glen!

Very good illustrations and observations. As of #10 (too many files), well if your project is a big one you’ll need many files and in case of trouble (”Nobody wants to open 12 files”) well Firebug will tell you which one to open

Great post and very interesting solid points! Thanks!

Completely agree with James’ comments especially regarding point four. I’d never use a class called ‘right’ as you may at some point in the future decide that the navigation block actually needs to go on the left and therefore instead of just tweaking the CSS you’d have to go through the HTML and make fundamental changes which flies in the face of separating presentation from content.

It would be a much better idea to group similar presentational elements together for positioning.

e..g

#navigation, #more-info, #links {
float: left;
width: 20em;
}

Then if you need to be more specific or need to style one differently it’s quite easy to make that quick change in one place.

Great Post!
CSS on Fire here!

Regarding #7:
Although I personally don’t use huge background images… I’ve seen instances where they work well. I think its important to emphasize that although these are overall best practices, its ok to consciously bend some rules depending on the situation.

Regarding #2:
An interesting stat regarding my company’s website. Believe it or not LESS THAN 1% of our traffic is using a resolution of 800 x 600 or less.

In our situation, keeping the design narrow would be helping the smallest minority of our users, but in return its actually hindering the sites performance for the other 99%.

So like always, check your data and tailor your website accordingly.

Yeah, I’d be forced to disagree with a couple – primarily the generic classes…if you have to adjust the css AND the markup to reposition an element it kind of defeats the purpose of separating structure from presentation. Adding extra classes could be an absolute nightmare on some sites.

Some nice points in there though…but the images kinda threw for a loop. The jury is still out as to wether or not I’m diggin’ ‘em. Either way, nice work!

Uh, yeah no frameworks for me either, I prefer to know exactly whats going on because it is my code. It also proves to give me more insight into trouble shooting other site problems.

And I will use large background images, if a site can have flash I can have a large background image, I don’t think that the percentage of people with slow connections are really going to be upset with me, seeing as they are probably already frustrated with their outdated connection. They know that the connection is slow, it plauges them everywhere else they visit.

how do *you* account for smaller browsers?

Great points here, cool to hear everyone’s opinions… more than anything though i am diggin’ all the photos in the post.

I think that the point will be helpful to alot of people especially those who haven’t reached guru status in the css world, we all have our own techniques, but these are a good solid foundation for good css practice

I dont use frameworks at all, code everything from scratch. I am proud to say though that the only one there that I am guily of is inline styles.

I dev stuff and test it inline but sometimes forget to move it to my stylesheets… really must stop that!

You left out the tip about not wasting the user’s bandwidth with lots of irrelevant pictures of fire.

As Rafael Madeira (and numerous others) have stated:

- Presentational classes are a “CSS Cardinal Sin” (It goes against everything the concept of Presentational and Structural Separation teaches us)
- CSS Frameworks do as much harm as they do good (I’ve personally never had a design that “fit” perfectly into a framework that I didn’t design specifically for a framework).
- These are great tips for a “fresh” designer that has little real-world experience, but a few of them go against best practices.

Good advice mixed with bad advice.

Great article!

Great info. Thanks.

Good point about using frameworks. I have got to get on board with that.

Haha, I really like those images

Great post. Everyone should know these things. I have to say I didn’t find anything too useful here, but for beginners this stuff is a must. Good work.

who even uses inline CSS anymore. i would really like to know… so i could track them down and kick their asses. ….if they were smaller than me of course

Valid CSS is for pussies.

Our online retail revenue base is 30% ie6. If it weren’t for invalid hacks it wouldn’t be cross browser compatible. All of this while trying to constrain within our SEO consultants guidelines of number of CSS files and load times, et cetera. Underscore has been a good friend.

I disagree with you on #4 and #8 for the same reason you mention in #9. If you use generic classes, that ruins the semantics if you ever decide to redesign. And #8 … well seriously … I mean if you do #8 you’re just back at square one. Not that I say you shouldn’t ever use , but not to emulate a 3 column layout. are for tabular data, like what you put in to a spreadsheet. Also, the framework idea. Why not use templates instead for 3 column layouts etc.? The framework idea could lead to a lot of #10. I really hope you reconsider these points.

One more thing. You know big background images? They really screw up Firefox on Linux. I’m begging you not to do them. Think of me. *sob*

lame using BM photos for a site like this

Awesome, I’ve never heard of blueprints before.

Why do you use “.rightright{float:rightright;}” that is invalid.

Instead it should be “.right{float:right;}”

And whats up with all the doom and gloom images?

Thanks

in #4, why are you repeating “right” ({float:rightright} )?

Nothing too new here.. anyway it’s always good to keep them on our minds..

So thanks for writing.

I’d argue that #4 isn’t such a great thing. What if the markup you’re creating is for multiple different styles? Like output from a CMS? With classes like “right” it no longer make sense if the element is actually on the left in one design and the top in another. I advocate semantic class names like “navigation” or “callout” that represent to content so that the the position or layout isn’t specified by the markup of the document. I always get really annoyed with: .right { float:left; } because the markup was trying to influence my design.

The only exception I’d say would be the “clear” one because some layouts require that extra element to achieve the desired look. Having clear is nice since you can hide the .clear element if it’s not needed for one design or another.

I agree that you need to see your site with a variety
of browsers. In addition, its good to have someone
get the word out. Like your fire photos too.
thanks from tony

Just going to throw my support behind the few others that have already pointed out, not all of your suggestions here are considered sound or inline with best practices.

3. There are plenty of reasons not to use CSS frameworks; perhaps the biggest reason not to do so is the extra overhead it causes by unnecessarily writing CSS for unused HTML.

4. Generic presentation classes are a horrible practice. What good is separating structure from presentation if you only do it half-way?

8. What exactly can you do with CSS that shouldn’t be done with CSS? Tables are not an alternative to CSS; the former is a method for defining structure and the latter is a method to specify how that structure should be presented. If your goal was to point out the silliness in some people refusing to use tables even when the data is tabular, then that belongs in an article discussing bad HTML practices.

CSS Frameworks aren’t that great. By the time I pick one out, I could have done it myself by then.

Also, I believe in splitting up CSS depeding whats being marked up: layout elements (div, etc), typography elements, navigation struture, and forms. For large sites, it keeps things organized in my opinion. Thats just me.

Great article, love the pics!

Nope not me,…. well maybe some, you be the judge of that…

http://www.puredezigner.com

#1 is the biggest pain! Not only do you have to test for compatibility in each browser (IE, FF, Chrome, etc.), but different versions for each browser! CSS my look fine in FF 3.0, but messed up in FF 2.0. Test, test, test people. Great post. Dugg. Bookmarked.

What about not setting a background-color? Too many sites just assume the browser default is white

the hell is float rightright?

dude, way to marginalize semantics – on #4, you should use classes that succinctly describe the content of the element they apply to, and on #8 you should never use tables for anything other then tabular data. what you’re saying boils down to, “do it the right way, until it gets hard, and then do it the wrong way so it’ll be easy.” Which is totally wrong – you need to always do it the right way, because otherwise, what’s the difference between you and your client’s nephew who took an HTML class in highschool and can use FrontPage to whip up a new site for a fraction of your quote?

@honour chick
Inline CSS is a necessary evil for e-mail. I had to convert a couple PSDs into HTML e-mails for a client’s campaign and its campaigning software strips style tags and everything outside the body tags. Different e-mail clients treat CSS differently, so unfortunately you do have to resort to the harder-to-code inline CSS.

God, I hate people who feel the need to write, “These tips are fine…for *beginners*.” How obnoxious.

All great tips, never used CSS frameworks before, maybe I’ll sit down one day and take a look into it.

Validating XHTML/CSS and cross-browser testing are key, and I’m starting to use generic classes more and more.

Keep these articles coming!

Ah, the words of the elitist web designer.

Go do some math. A small CSS file from scratch is often way smaller than a framework. Using the framework can be as bad as using a mammoth background image.
Likewise, pulling everything into one file, when not everything issued on the current page is a waste of bandwidth.

Also, exactly which browser are you referring to when you say it parses 12 files much less efficiently than 1. Have you done benchmark tests to prove this? Can you cite your data? Do you even know the algorithms browsers use to “parse” CSS?

Finally, the network efficiency of 12 files vs. one depends a lot on the actual TCP/IP routing, packet size, etc. 12 parallel requests for 1400 bytes might be faster than 1 request for 12 *1400. So long as your CSS file is smaller than the smallest packet size on the specific route between host and client, there is likely no loss there.

In a nice little, idealistic, academic world, your points all make sense. But you gotta know when to break the rules, and you gotta actually know what browsers and network do before you start spouting off as if your answers are the only answers.

Your use of Burning Man images for commercial purposes (you sell ads on this page) is a violation of your license.

not one, I’m really strict when it comes to developing a site. Though I use generic class and Ids in a different way. I’d never use a right or left, simply because that describes the position of the element. A well named class should describe the content of the element, so that when I want to re design the site, I don’t have to worry about changing all my right classes to left just because I want to put my left column on the right side of the window.

Nice article, and nice tips. Validating it’s important, and you’re one of the few I have read that mentions it.

@JustChris

Exactly, for maximum compatibility in emails use inline css and nested tables. It absolutely blows but it’s what you have to do thanks to clients like Outlook 07.

no support for background-image, background-position, background-repeat, width, height just to name a few…

Not a day goes by that I don’t want to punch everyone at MS in the face.

no, no I’m making one, not using frameworks. I’ve never tried them, but I don’t like frameworks. Maybe I should give them a try. I might like them. (I don’t really thing not using them is a mistake, but since you mention it as a mistake, then I’m making one jaja)

Several of your points seems very flawed and – to me at least – it feels like you only do small or medium projects.

1-2 CSS files? Come on, that’s just plain wrong. Talk about a maintenance nightmare. I don’t mind opening a few ekstra files, if that gives me a better oversight. That and making sure comments is added perfectly. If you throw in a table of contents when you’re at it — that’s all for the better.

When you compress your JavaScript and CSS files before deploying, all of your mentioned benefits is achieved without comprimising an open and friendly dev environment.

- and please don’t get me started on CSS frameworks. They are excellent for newcomers and as a basis to start a learning process, but in practice they are completely useless. I mean, is CSS really such a demanding and time-consuming process, that you have to use a framework? Really? If you answer yes to this question, I highly suggest that you start dusting off your abilities – and stop using these so-called “frameworks”.

It feels like you assume too much

As some have said before, using classes name fright and fleft are not semantic. I don’t see how it is a mistake not using these. It is not worse than using inline styling.

Also, on the point about large background images. You mentioned that large backgrounds would keep the user waiting? I was under the impression that css background images load separately from the content and therefore would not keep the user from reading the content. The site just wouldn’t look “right” at first.

@reader(above) Dood, chill down man. Do you feel better now that you’ve insulted the author and half the posters? Weak.

This list didn’t told me anything new. Anything “advanced”? What’s with the pictures? @_@’

I don’t agree with using the CSS frameworks. They are great in some instances (such as news pages, yahoo, things with lots of separate areas), but for you general site it’s easier, and more satisfying to create your own.

Cross browsers is always a chore, however there is light at the end of the IE6 tunnel – many ‘big sites’ (facebook being one) now put little messages up telling people to upgrade. Again though, Google Analytics will tell you what people are looking at your site with, if you have an abundance of people from the past looking at your site, make sure it works!

I was hoping for something more … useful? Like gzip, camel case or not, backgrounds against borders etc … Sorry, but most of the people learn those things within their starting period.

Why am I even posting this?

Yes, what some people here have been saying is true: few designers design for 800×600 screen resolutions BUT, at least in my case, 10% of my visitors use that screen resolution and I do think it’s a lot. It’s easier for me to make a elastic or fluid layout (so far I’m stuck with a 800 px width one) rather than tell them that they are retarded, because they are not.

Here’s a good read about not using underscore in id and classes.

https://developer.mozilla.org/en/Underscores_in_class_and_ID_Names

Awesome article!!

So many points in this article are a total load of crap! I don’t know where to begin.

CSS Frameworks encourage bad practice, they are bloated and are full of presentational as well as just totally meaningless class names. The add a high level of complexity to building web pages that you really don’t need.

You should never use presentation class names like left and right, they are no different to using class=”blue”. Class names and ids should relate to structure and content of the document and not a visual representation.

I will agree with point 10, too many css files become a nightmare to maintain.

Point 2 – account for smaller browsers really depends on your audience. It’s a little pretentious to just make the claim all sites should account for an 800×600 resolution.

Big backgrounds are fine, again this is something that really depends on the audience, yes web designers / developers should make an effort to reduce bandwidth, but to outright say large backgrounds a wrong is completley obnoxious.

Yes inline css is bad, but your example is also stupid, we know its a link already you dont need to give a link a class name called “link_style” thats just as bad as which i’ve also seen people do. It is good practice to minimize class names and use the hooks you already have available to you, structure your document properly and don’t litter it with bull**** class names.

nice things to remember thanks

Yet ANOTHER POINTLESS INTERNET LIST full of obvious and ubiqutious information. Anyone over 13 that would actually find this list informative or helpful has no business building websites.

While I understand your point about using generic classes, often times it’s not a good idea to unless they are symantic. Using .rightright is not a good idea, however using .cutline or .preview or .minor would be acceptable.

Are these really CSS mistakes or general design mistakes?

It’s a shame.

Look at your own source page. There’s a table to display ads. Your markup is full of class=”someclass”.

Top CSS mistake of all time: Reading articles like these, which are full or either DUH or FAIL.

Useless article

Great. Yet another article from someone telling everyone how to make their web pages. Seems like I see this sort of thing about 50 times a week at as many websites. KMA

I disagree with point number 3. There is no need to make your site accessible to “all” to make it effectual. One must merely consider the intended audience and research whether or not designing for 800 x 600 is really worth the burden. Most people nowadays have screen resolutions at or above 1024 x 768, so designing for smaller screens would make for an unpleasant experience for these individuals, unless you make multiple layouts, which then puts the burden on you, the developer. The individuals whose screen resolutions are lower than 1024 x 768 are most likely going to be older, or working from public institutions. Do they weigh heavily on your market? If so, then I would consider using a fluid layout and not fixed. That way, no matter the end users resolution, they can have a pleasant viewing experience.

The author states that “a large chunk of the visitors to the site were using smaller browsers causing an image to partially block some ads.” In this situation, I would consider a redesign. You do not want to stymie your site by designing down as more and more people are going to continue to move away from 800 x 600. It would be more effective to either switch to a more dynamic layout, or reposition the ad space altogether.

I also recommend taking a look at the 960 grid system (http://960.gs) as they have chosen a happy medium. This is to say that I recommend the technique and not necessarily the framework itself. I have learned from experience, that using a CSS framework can pigeonhole you.

As far as the other points go, I can generally agree.

12 CSS files is not overkill when you are building applications with different CSS files for features, layout, type, colors, etc. The trick is to have these separate files joined and compressed into 1 file for the live site. I use cakePHP for that.

Although it is a good list, pretty standard stuff. would like to see a more advanced css mistake list, and I also disagree with css frameworks, if you know your stuff, writing from scratch is quick and easy.

I’ve got a question: A lot of you guys are saying using “.floatleft {float: left;} is wrong, but what would I do when I have an image floating to the left on every post I make, and there’s 3 – 5 posts on one page. I want every main image in each post floating to the left?

I’ve been using simply .floatleft but should I make it .floatleft-post-img? I feel like that method would make me end up having way to many extra classes down the road for other things I need floating left and right.

Adding my voice to the choir (Ryan, Ara, et al) on the CSS frameworks suggestion. Those frameworks mentioned in the article and their ilk (Blueprint, YUI, etc) are most certainly *not* the ideal for many (I’d say most) sites. I can see where they might work, such as for those working on tight deadlines and/or working in teams.

But if you want optimized, semantic, and well-structured code that suits the specifics of your project (rather than the everything and the kitchen sink, bloated, overly generic approach of the big frameworks), you should definitely build your own framework and just reuse that. Of course as with all things in web design, use the tool that works best for your particular needs at the time.

Everything else here = yeah, of course, those are definitely the basics you should be aware of when working with CSS. A good article for the would-be up-and-comers

I disagree with #4. You shouldn’t use such names as class=”right” etc. What if later in the future you decide on a redesign and your sidebar is on the left? It just adds an extra step where you’ll have to go through your markup rather than separate styles completely from presentation.

It’s ugly in the HTML as well. This I feel is the equivalent of using inline styles.

pretty simple, call the class .main so that you can access it like img.main

each post should have a class on it also like .post… so to target the main image would be .post img.main

code would be .post img.main{float:left}

in future if the design changes and you want the image to go right, you just change the css, no need to change the actual html

thats why you never use presentational mark up.

here endeth the lesson

Nice article, but your readers seem to be hating on it a lot.

First off, let me say this: maybe as one of the top tutorial blogs out there, NETTUTS has a bit more responsibility than others. Kinda like the whole celebrity thing as it relates to free speech. So they should be telling people what is “right”.

With that said, that’s why I tend to litter my own posts with “I/Me/I think/IMO/etc”.

People, get over it. If you’re a purist; you shouldn’t need a tutorial. If you think this one is wrong, write your own. Say something constructive and move on.

As far as all the talk against CSS frameworks. They have their place. Complex magazine-type layouts can be done in a fraction of the time. Are they overkill for a 3 column layout with a header and footer? Definitely. But don’t just rule things out.

Now, on to the purists and their talk on semantics. I think this is a moot point seeing that different browsers don’t even know what the hell is going on. Who gives a rat’s behind about .fRight if it gets the job done? It’s not the Mona Lisa, it’s a stupid website. The point is to get something up and running. I can’t believe people sit here and bitch about semantics and in the same breath apply tons of IE hacks, that by definition should be no used. It’s a noble idea, but I think we should leave semantics (and other CSS preaching) to the next generation. Browsers right now, suck so much it’s hard enough to get stuff to look right. Why do they have default styles? Why is a browser reset even needed?

I will, wholeheartedly disagree with #2 though. In this day and age, you can’t make such a generalization. It’s about your intended audience.

And get off the dudes back about the .rightright thing. It’s a bug in the syntax highlighter. If you view plain text, it works out just fine.

haha, I’m proud to say this.
I’m 16, I’ve been doing XHTML/CSS for 2 years and I have not made any of these errors x3

I reccomend reading the CSS mastery book, it is truly amazing, also a book I’m reading now, “designing with web standards, second edition” also a very good book

There is load of good sense in this article, and I thought point 8 was going in a good way until I read:
“why we use technologies like CSS is because it should speed up development time”

The point of css is not to speed up development, it’s to separate content and style/layout… a side effect is that development is easier usually, but I think the main goal should be to ease the job of non graphical renderer (printer, screen reader, bots…), improving the accessibility of the website and its ability to be processed by machine (indexation, etc.).

Also another for the list, having Classtitis, or Divitis (don’t really know the right spelling :p) that one can be a bad one too.

heh heh Fire! uhuhuh

Mmmm that’s the government methodology in a nutshell.

http://parks.tas.gov.au

Those pictures make CSS seem much more intense! Great advice too!

excellent point Mortimer

Whatever it is highlighted is very basic, but very sensitive. The poeple who is going to learn and start to work with css, definitely need to read this article.

The only thing I like is CSS Frameworks is the reset. other class name is useless for me.

only stupid will use 3,000px X 5,000px image size for a single colored background

In regards to the point about inline CSS, having the CSS code implemented in your HTML page is not only bad practice for maintenance, it can also harm your SEO as the spiders would pickup the unnecessary coding.

Overall, nice article.

Yay, glad that so many other people pointed out the fact that #4 is not semantic at all. With classes like those, you might as well be writing inline styles (#9). It raised a major eyebrow when I read that one.

@Zeke Franco
Funny that you mentioned tables as non-semantic and then go on to agree with non-sementic classes. :p

@Baz L: Well put!

I basicly agree with alot your coments but try to keep in mind that there are still newbies out there – and newly educated/or students who might find alot of this usefull. So what if most of this has been writting down a ton of times. This is basic understanding and healthy tips – use them or dont.

Frameworks: I just recently started using them – well not the whole framework actually just the idea of a grid system. When sites has to be strict and clean i usually base my design on a 960gs PS template. But if the site on the other hand can be wilder and looser its pure design from scratch.

Kim

xQlusive: indeed.. however, polls say than people above 65 prefer 800×600 in their OS, so it depends on the target. According to w3schools stats it’s still 8% of all surfers that’s using 800×600 (and I believe some part of that is < 65). So, it’s worth remembering, depending on who you’re making a site for.

I strongly disagree with #4.

Using things like class=”right” and class=”left” is virtually the equivalent of <b> and <font>.

My favorite on this article is number 8. I think too many know-it-all web developers think that CSS should be used for everything on the web page. I used to be this way until I learned HTML by the books for college and discovered tags that I never knew existed that save me hours of time

Why would you write this for bold text:
Bold Text

When you can simply write:
Bold Text

Not that this is one of the tags I didn’t know about, but these tags were made for our convenience and like your article says, CSS is suppose to save us time, not add on to the amount of work!
I also agree with using tables when CSS just becomes a hassle. I helped a friend of mine develop a small site not too long ago and we spent about 2 hours trying to make a 3 column layout in CSS work for the website. Finally, I coded it all in tables in 5 minutes and it worked great in all browsers.
The amount of code that it takes to create and load a table is not going to kill a browser, and this is usually the week argument people have against it. I developed server side applications that are thousands of lines long, creating a table that’s about 30 rows of code at the most is not over-indulging, people!

@Arno – Thank you for that link, I didn’t know that until now. On my next redesign I’ll use hyphens instead of underscores.

@Cheb Junior – Thanks, for some reason I never think about making “subclasses” like that.

I’m a big fan of 99% of the articles on this sit but this one seems extremely lacking. All of these points are highly debatable and calling the article “Are You Making These 10 Mistakes” makes it sound like the 10 commandments and we should all be ashamed for performing them.

For starters, try not accusing your audience with “you’re doing these X things wrong, you should be doing them my way.” Maybe a “these are tips and tricks that help me” or “helpful hints”. These are all items that, in certain scenarios can be great, but more often than not just add needless complication and headaches for no reward (validation, CSS frameworks). Don’t take my word for it, there’s some small time web designer NETTUTS interviewed a few weeks ago who calls CSS frameworks garbage too…crap…what was his name….oh right, Jeffrey Zeldman.

Also, LOL at the “don’t use mammoth images” followed by a completely unnecessary 600×900 picture. Priceless.

@Edward Boot, You’re argument for using tables instead of CSS has to be the worst ever – Who cares if it takes longer with CSS? – do it the right way or don’t bother at all! What you’ve accomplished on the server-side, no matter how many lines long has no bearing on what is right or wrong when it comes to front-end. I have no idea what you’re on about with the “bold” tags either. The ‘b’ and ’strong’ tags are meant to portray semantic meaning, their appearance is totally moot – that should be dealt with in CSS.

@Baz L, So you’re saying “to hell with semantics and industry standards …as long as it works!”, how lazy are you!?

I find Glen’s articles always attract the most controversy… interesting…

Articles about coding practices always generate flamming and endless debates

I like to use YUI Reset/Fonts/Grid these days. Sure you can’t build all your site with it (deep nesting bugs for exemples) but I think it’s speed up the start and helps having a solid base whithout dealing with basic stuffs.

But for sure you can easily avoid it and do it from scratch.

It’s like the debate about naming class “left” “right” etc : xhtml/css being what it is at the moment it takes more time to not use it *a bit*, and you will not go to hell for that

“Why reinvent the wheel?”

– Because sometimes you end up with a round one…

css frameworks? sounds pervy!

Edward Boot:

I have no idea what point you’re making about bold text, but the author never said to use tables for presentation when CSS becomes a “hassle” but to use tables when they are called for — tabular data. Too many people frightened off by the mere word “table” will attempt to use CSS for everything, even when it is not the right tool for the job.

If it took you too long to make a simple website using CSS, maybe you don’t understand the language so well, and would benefit from a good beginners book? And I’m not saying that in a patronizing way.

I’m personally finding that a lot of the people in web design who blindly pride themselves on “learning it all on their own” would also benefit from a good beginners book that lays things out simply and clearly because they don’t grasp things as well as they think they do.

OH! And speaking of tables, all this talk about CSS tables is really exciting. Andy Clarke — who is amazing and needs to be read by everybody — briefly reviewed Rachel Andrew’s book ‘Everything You Know About CSS Is Wrong!’ which delves heavily into the topic.

Check out the post over at A Beautiful Web: http://forabeautifulweb.com/blog/about/are_css_tables_ready_for_prime_time/

Nice List. But I really don’t agree with point 8. Using a table to structure data other than tabular data is semantically incorrect. CSS is not made to make live easier (neither are tables) but to add style to HTML documents.

A very good related resource
CSS Implementations of the Rich and Famous: http://perishablepress.com/press/2008/10/26/css-implementations-of-the-rich-and-famous/

I agree with this list. I cant stand inline CSS it’s just wrong.

Great article. Excellent use of nontraditional images too.

i’m quite guilty in some points, but for the css framework i prefer to work from scratch i can better handle them

Am happy to report that I’m not making any of these mistakes! Phew.

Perfect tips

Framework for a reset? Heres your reset:

* { margin: 0; padding: 0 }

Go from there..

@James. Funny thing is that you quote me, but I can’t find anywhere on the page (much less my comment) where I said those exact words. You need to learn to cite your sources better.

My point on semantics dealt specifically with fRight and fLeft. I think that too much emphasis is spent on semantics. When you multitask and jump for project to project, language to language, and everyone is expecting stuff yesterday, a fRight tag is gonna be the least of your worries dude. There are much bigger fish to fry.

Don’t get me wrong. I’m not advocating crappy code. However, as I point out, if the browsers can’t get it right, why are developers bending over backwards for semantics?

I agree with most of it, but I find CSS frameworks to be overrated. Might as well avoid it as much as possible. JS frameworks are highly recommended because of its ease of use and reliability. Then again, hand-coding from scratch takes you to the essence of the language, the raw material that is “programming”. Same for CSS, maybe even highly recommended. Its not about reinventing the wheel, but working around the wheel. How can you improve it, how to master your skill in that field.

This is actually my first time hearing about CSS frameworks, but the CSS Reset from YUI or other sites are the most helpful. Starting from zero let’s you code with less worry if they have different browser renderings. Of course browsers still read some HTML/CSS tags and properties very differently, but setting it to 0 makes it much better to design/redesign and manipulate them.

Just a reminder to those who haven’t use reset. My advise is to add it BEFORE you do any CSS work, or even before typing anything to the HTML.

For this article, I say learn from the comments here, many of them are correct. But try to learn more from others’ opinions.
For ease of trying to figure out, here’s a list:

Point 2 – get the required resolution first, because 800×600 is starting to disappear. Yes, it’s correct to test it on other resolutions, but what are the requirements. If its for web applications w/c will be used by private companies. They have a required set resolution size.

Point 3 – NO TO CSS FRAMEWORKS, well maybe a tad bit for practice use. But, anything within designing has always been done from ground up. Every painter or artist have tried to do their work from a blank canvas. CSS is very easy, my only recommendation, as the same with everybody, is using the RESET CSS framework, its a short CSS file w/c sets all the tags’ design to 0 (”a” will always have the underline, but who cares).

Point 4 – having classes that only changes a few properties are not recommended. When I’m designing, I have a template.css where I throw in my mostly used designs for that particular website/web application. I did that only once (mine was text12bBold, which holds a 12px #428bc9 Bold font, I had for green, gray, and other px sizes), was helpful somewhat. Except, when I started doing JS, i relied on getting the class to do unobtrusive scripts. Not very helpful if you have 5 classes in one tag. My recommendation is limiting the tag to 3 classes. This is my structure ( general class[when multiple tags have the same style, minimizes repeated CSS properties], specific class[specifies a design for that tag and so I don't touch the id], optional class [for JS-controlling styles or other uses, you can omit this]). By the way, DON’T USE THE PROPERTIES AS CLASSNAMES! You use comments to explain the CSS, not the class

Point 6 – it’s not mandatory, but recommended. Not all errors pinpoint the root cause. I’d rather make Point 5 mandatory, check all tags if they have their proper ending tags.
I asked my brother, who is my mentor, lots of questions when I was beginning web development. Most of the time he said, “Google it before asking me.” 95% of the time he was right. The remaining 5 were very specific questions. But the point here is: Google it first.

Point 7 – same as Point 2, but now, you enter to convince them why is it wrong to do BIG-ASS BGs. A repeating small image is highly recommended, but if required, you can’t do anything. But if you can convince them, they might reconsider. As long as you know what you are doing and what are you trying to say to them, they’ll rethink it. But there are some case that requires a big bg set to the top center and loading like two turtles having sex. Not very slow, but you’ll see it’s not very appealing to the eye. The two turtles are more interesting to watch than a huge Britney Spears wallpaper trying to load. You see what I’m trying to say?

Point 10 – Do you use “import url();” ? it’s like an external CSS, but being called by another external CSS. For example, you have a template.css and a reset.css. You want them to appear in your page with a page-specific css file you have. A good way is to call them all inside the page. But, if you can call just one but have all css files running, you can use “import url();” For me, lesser lines of code are better than a 1000-lined page. And you’ll have more space for comments if you’re doing a project with a team.

I also want to add one more thing: Please use comments.

Comments are under-rated by many beginners and some pros. Why comment your CSS? For retracing your steps and for the team to understand what the heck are you doing. Also used for debugging if ever comes to that. And, if you want to reuse that line of code, it’s easier to find the comment pertaining that certain CSS class property.
Also, if you’re a contractor/temporary worker, you can use them for your progress report. ctrl-c + ctrl-v = THE WORLD IS YOURS!.

I strongly disagree with #3. I don’t know of any company that would want their site to be design from a pre-made layout and design. That’s pretty tacky.

I still think we should let IE die or get better. We shouldn’t support it. Eventually, users will get tired of seeing tons of ugly sites and will use Firefox or Safari instead… but until we stop supporting it, we will continue to hack our CSS for a few more years.

great read!

Javier Centeno, it’s not about supporting IE, it’s about supporting the people who use it.

About the underscores, I have just one thing too say, Long live camel case.

@Sherlock As long as the classes name does what it says in a general way, then I think it’s semantic. For example, .unem mean unemphasize, which is general and semantic. It would be ‘bad’ if instead I had a .gray class and a .pixel12 class.

Anyway, using unsemantic HTML affects SEO as well as accessibility and potentially usability. Using class names like fLeft, unem, and clear do not which is why I think it’s okay to use them.

i would like to say great article Glen. i would, also, like to say that there are some people who have posted here who have said some pretty crappy stuff. pretty uncalled for if you ask me. i rarely post comments to articles and was inspired here.

keep up the good work Glen.

#7 Using Mammoth Background Images.
Images on this page are not mammoth but just too much

@Buzu: That’s what I’m saying, we need to persuade people to use better browsers. We would still be watching VHS videos if DVDs weren’t so much better. But because we continue to support IE, users don’t see the difference and continue to use it. Look at IE for the Mac, it pretty much died because of lack of support. Do users miss it?? It don’t think so.

LOL very good explanation and with burning image inside, really cool!!

I agree with most of the previous comments but I have to add one more mistake:

#11 – not using the Firebug ‘inspect’ feature.

haha, love the images in this post!

I agree, 1024 is very standard width for web layouts these days. Every major site now utilizes that width.

With this and browser compatibility is it also worth noting that designers need not always accommodate 100% of the population. Not only is that impossible, but it’s also a waste of time and supporting old technology only slows the development and full acceptance of the new, much better browsers…

Héhé love to see the web actors around take the user experience seriously. Keep it up guys !!

Very good article!

Javier, I completely agree with you, but there are better ways to do it. What you suggest is more like a good way to loose clients rather than to persuade people to change their preferred browser. BTW IE for mac died because the agreement between MS and Apple ended, but your point is that no one misses it, and you’re right.

like the article but not the image.

@James: Maybe he was talking about tabular data. So, instead of using CSS to display tabular data, use tables because that’s the purpose of it. Using tables for page layouts is indeed very nasty but not for displaying tabular data. Isn’t that right, Lubes?

Buzu, I know what I’m suggesting is a drastic change but think about it, if we as web designers/developers united on this, we would force IE to implement css better (and now!). Clients would not be affected, they would actually benefit from it. How?? Less time we spend fixing IE bugs = saving $$ for our clients.

We charge for our time, whether it is designing the front end, developing the back end, or hacking our CSS so IE can see it properly. We need to spend our time doing things that matter most such as usability and design. I think it’s absurd that IE forces thousands of developers to spend time working around IE bugs. It’s a waste of our time, which costs money to our clients. We need to stop doing that. But the fact is, we need to do it as a group, otherwise things won’t change for the good.

nice. I fond only Virtual PC can give a true indication of IE6. All these standalone browsers are no good.

Good info. .. Thanks!

No on frameworks – I’ve used them, and I’ve hated them. As it is, for most layouts I generally fly through the coding. After all – not every design needs to be intricate. Sometimes, a nice two-column layout with a header and a footer is all that a client needs – and wants. I’ve played with CSS frameworks, and frankly I find that I enjoy implementing it myself much better.

Another no on resolutions – while it is true that a header image should never be larger than 250 pixels to account for smaller resolutions, the general rule of thumb, as I have come to learn, is to design for 1024, as another commenter has pointed out. Of course mammoth resolutions should not be designed for, as office equipment rarely accommodate this and I doubt that users pay the fortune that we do for massive monitors, but I haven’t used a computer that utilized a 600 x 800 resolution since 1995 – over 10 years ago.

You do, however, get kudos for the points about validation. Even I have been “bad” with forgetting to validate my code. And as far as mammoth images go, it also depends on the image, the site, and the compression level of the image. I’ve seen some sites with large background images that load fine on a slower connection because the rest of the site was written in text. Now, if it is an image-heavy site with a large background image, I would have to protest against this sort of debauchery

asa kasindiran..heu..

It is an useful post for website developers. Hey, Glen. I am pretty impressed. You have done a wonderful job.

Hey Glen, you have incorporated great pictures in your post. This has really increased the visual appeal of this post. It is also a good one for website developers. I am sure, similarly like this work, you will rock us with your future projects. All the best.

Good info

Thanks

this is wonderful tutorial i will put acopy of this lesson on
my site here
http://www.as7ap4you.com

Honestly, I think these lists need to stop. Instead of just rehashing the same old CSS to-do or not-to-do lists, how about something a little more useful? Practical? Everyone does their CSS a little bit differently… who cares how they go about doing their styles and stuff as long as it gets the job done?

And to all of you who say that we should let IE die.. get over yourselves. Ooh, you’re some young hot-shot web developers, but you always run into problems with IE. Well guess what? Most people still use IE. Deal with it. I’m never going to force some grandmom to download some new program that does the same thing the old one does.

On the same note, people should stop flipping out about how people code their websites. I for one never learned tables, so I don’t really know what the deal is there. But if someone is comfortable making websites with tables, and can make them efficiently that way, who cares? When that same grandmom is visiting a website, she’s not going to look at the source and get pissed about the fact that the code ‘isn’t semantic’. Just make the website look good and usable. That’s all that matters.

Glen, Your selection of images is really excellent. Keep up the good work.

Good article, but I believe frameworks are useless. A thorough knowledge of CSS and browser compatibility will lead to better layouts and quicker rendering of code. Frameworks introduce extraneous elements (eg. many websites never utilize the h5 tag).

Hi, Glen. Your post is really an impressive one. The pictures you have used in this post are also great. Keep up the good work man. All the best.

nice pictures

Dear Glen,

Thank you for this nice list of images…
But I think there’s a bit too much text in between.

Here is another “do it my way css” article..
You know if you going to preach then validate this page.

Great article. It is only in the last point [using only one or two CSS files] that my opinion varies slightly. I typically have four CSS files: reset, layout, type, graphics. Each is separated for modularity.

Also it makes it easy to copy parts from old projects and reuse them on new projects.

What tool are you using for your syntax displaying? It’s very slick.

The photos distract from the article. One or two was okay, but then it just got old.

But those are some way good tips. Thanks!

CSS frameworks are anti-semantic. And it will make your css bloated with unnecessary excess codes. Worst is, if you look at Blueprint code, they suck at inheritance. Too much inheritance would somehow slow your rendering time. Bad idea!

I do not entirely disagree with generic classes but should only be used if possible for main layouts. All contents should stay away from it. The reason?, separation of content from presentation.

Hey Glen, great work. I am impressed. I must say your selection of pictures is excellent. Keep it up.

about ietester or multple ie’s: The behavior is not exactly like a real ie6, so I prefer virtual machines, one with ie6 and one with ie7.

css frameworks are ok but you really have to understand them so hard as you start to think its your own.

This is great! Thanks so much. Hope it will continue.

you can get interesting post about web usability and technology on my Web Usability Blog.

Very interesting and very true at times… but most of the time it wont cause what you showed in those pictures, but some of the time it does.

Nice article

Very nice article.