Are You Making These 10 CSS Mistakes?

Nov 11th in Web Roundups by Glen Stansberry

Working with CSS can seem like a constant battle. Browsers are always changing they way they read the code (*cough* Internet Explorer *cough*), and it seems that there are lots of tiny little CSS "gotchas". While it's an incredibly powerful language, it can easily be used incorrectly, which will doom your development to a lifetime of imperfections.

PG

Author: Glen Stansberry

Glen Stansberry is a web developer and blogger. You can read more tips on web development at his blog Web Jackalope or follow him on Twitter.

1. Ignoring Browser Compatibility

This is probably the number one problem with web development, as you have to have layouts that look the same, no matter what browser the site visitor is using to navigate the page. This fact may sometimes seem like the bane of your existence: there are fundamental differences in the way Internet Explorer renders a page, versus Firefox. While it's not as bad as they used to be, there's still quite a difference between browsers.

It's easy for web developers to layout the page in their favorite browser and not worry about how it looks in other major browsers, as you most likely won't see the differences. (I'm a major offender of this. I'll sometimes design the site in Firefox and forget about checking in IE until after it's done!) While there are some tried and true methods to help safeguard your layouts for different browser rendering, the best way to ensure everything looks constant is to just use Browsershots. Browsershots gives an accurate snapshot of what your site looks like across many different platforms and browsers, allowing you to make sure nothing looks funky in a browser.


Photo by lazlo-photo.

2. Not Accounting for Smaller Browser Resolutions

While a good number of us web developers have large computer monitors--and are quite proud of the fact--a good portion of the visitors to your site might not. You can check your analytics programs to see your visitor's browser resolutions and how widely they range (Google Analytics does this wonderfully). However, there is a world of difference in the way a design looks in an 1024x768 resolution as opposed to a 800x600 resolution. It can make a beautiful design almost useless.

I recently came across this realization as I was tweaking the design for Trendfo. A large chunk of the visitors to the site were using smaller browsers causing an image to partially block some ads, giving me less clicks and ultimately less revenue from the site.

Accounting for smaller browsers means that all of your visitors are happy and finding the information they need.


Photo by Petteri Sulonen.

3. Not Considering Frameworks

If you're developing a CSS layout from scratch, you might want to ask yourself why. Just as nothing is new under the sun, the same is true with CSS. There are plenty of CSS frameworks out there like Blueprint framework and the 960 CSS Framework. These are created to help you make bulletproof layouts, without having to start something from scratch. These layouts have cross-browser compatibility and have been rigorously tested. Really, unless you're doing something totally radical that needs pantloads of custom code, just use a CSS framework.

Why reinvent the wheel?


Photo by nestor_galina.

4. Not Utilizing Generic Classes

It can be quite easy to not think about the future when we're developing websites. Often times we'll name our CSS classes something different each time we develop a site, as opposed to making a simple CSS class that we can reuse repeatedly throughout our design, without having to dig up what we used before. This will ensure that our site design remains constant throughout the changes of a design.

You might use a generic class like:

(Editor's note: the double 'rights' are the result of a bug in our code viewer, correct code is of course .right{float:right}.)

.right{float:right}

To keep things floating in the right direction when you want them to. So you could style DIV ID like:

I usually use at least three generic classes when I'm building a site design:

	.clear{clear:both}
	.right{float:right}
	.left{float:left}

Photo by cnynfreelancer.

5. Not Validating the HTML

I bet you didn't know that validating your HTML could also affect your CSS, did you? Well, it can. First and foremost, you can't validate your CSS until you have valid HTML. Secondly, there are many instances that your HTML could be causing your problems, instead of your CSS. Often times we think that our CSS altering the layout when in fact it's a bit of malformed HTML that's making the layout funky. An unclosed DIV here, a mislabeled CSS class... it could be anything. Make sure that your HTML checks out before you even try to diagnose a CSS problem.


Photo by Focal Intent.

6. Not Validating the CSS

I used to constantly bother a friend for help with CSS problems as I tried to wrangle my designs. He'd patiently ask me every time "Does the CSS validate? If not, what are the errors?" It wasn't long before I learned to validate the CSS before I'd ask Thomas for help later on, and usually validating fixed the problem for me.

If you have valid CSS code, you're much more likely to have a CSS that is much more compatible across browsers and is less likely to break.

7. Using Mammoth Background Images

Often times new designers will use oversized background images in their layouts. For example, using a 3,000px X 5,000px background image to account for any possible browser size. Instead of using a really big image, they could be using a really tiny repeating image with a touch of CSS magic. The difference is huge: Instead of loading a 200kb image, you could load an image only a few bytes in size and have the CSS repeat it across the background.

If you have a background image that is very large, you're losing two ways:

  1. It means using unnecessary bandwidth
  2. You're making the visitor wait longer for the image to load

Sometimes large background images are unavoidable, especially with the recent trend of designing illustrative web layouts. However, using repeating images or solid colors in the background is a much better practice.


Photo by Petteri Sulonen.

8. Using CSS For Everything

When people first learn about a technology, they become excited about it and want to use it everywhere, even when it can actually go against what will work best for the project.

As web developers we can sometimes get caught up in wanting the technology to do something advanced and specific, when in fact we can use a different technology much easier. For example, sometimes it's much easier to use a table to organize data than it is to make complicated CSS-based layout with floating DIV's and the like. We have to remember, the reason why we use technologies like CSS is because it should speed up development time. When it starts to slow us down, then maybe we're going a little overboard.


Photo by Timm Williams.

9. Using Inline CSS

This is a cardinal sin for web developers, and it happens more than you'd like to know. If you're building a design, you'll almost always want to keep your CSS and HTML separate. This ensures that when (notice I didn't say "if") you decide to change the site design, you won't have to dig through the HTML of each layout and find the rogue CSS attached to an inline element.

Instead of using this:

link

You should move the style business to an external style sheet like this:

link

Inline CSS should almost always be avoided. It's easy to use and great for testing, but other than that you probably wouldn't want it in your production code.


Photo by nestor_galina.

10. Using Too Many Files

Have you ever seen a design with 12 different CSS files attached to it? It's a nightmare for anyone trying to make changes to your layout. Not only that, it slows down the time processing each file, as the browser has to make a request for every single one. It's better to use a simple CSS schema that uses 1 or 2 files. The time spent parsing 12 files versus a single file is quite significant. Not only that, you'll save the next guy who has to make changes on your layout a lot of hassle.

Nobody wants to open 12 files to make a simple, site-wide change!


Photo by lightmatter.

  • Subscribe to the NETTUTS RSS Feed for more daily web development tutorials and articles.

Glen Stansberry is a web developer and blogger who's struggled more times than he'd wish to admit with CSS. You can read more tips on web development at his blog Web Jackalope.

Liked this post? Vote for it on Digg below. Thanks!


Related Posts

Check out some more great tutorials and articles that you might like

Enjoy this Post?

Your vote will help us grow this site and provide even more awesomeness

Plus Members

Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.

Join Now

User Comments

( ADD YOURS )
  1. PG

    Braden Keith November 11th

    NO I’M NOT!

    haha well maybe some :/

    ( Reply )
  2. PG

    xQlusive November 11th

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

    ( Reply )
  3. PG

    Richard N. November 11th

    Good read. I seem to have passed.

    http://twitter.com/richanomix

    ( Reply )
  4. PG

    Darren November 11th

    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/

    ( Reply )
  5. PG

    abdusfauzi November 11th

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

    ( Reply )
  6. PG

    Zeke Franco November 11th

    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.

    ( Reply )
  7. PG

    Jhay November 11th

    Nice photos! Good read also.

    ( Reply )
  8. PG

    Nick November 11th

    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.

    ( Reply )
  9. PG

    Rafyta November 11th

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

    ( Reply )
  10. PG

    Darko November 11th

    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

    ( Reply )
  11. PG

    Nick November 11th

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

    ( Reply )
  12. PG

    Jacob November 11th

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

    ( Reply )
  13. PG

    Greg November 11th

    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.

    ( Reply )
  14. PG

    Ara Abcarians November 11th

    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.

    ( Reply )
  15. PG

    Brian McCarrie November 11th

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

    ( Reply )
  16. PG

    Nathan November 11th

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

    ( Reply )
  17. PG

    Shaun November 11th

    @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.

    ( Reply )
  18. PG

    cssguy November 11th

    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.

    ( Reply )
  19. PG

    Kris November 11th

    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

    ( Reply )
  20. PG

    Mahbub November 11th

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

    ( Reply )
  21. PG

    insic November 11th

    nice article. Im guilty.

    ( Reply )
  22. PG

    Josh November 11th

    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”

    ( Reply )
  23. PG

    Ignas November 11th

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

    ( Reply )
  24. PG

    Ignas November 11th

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

    ( Reply )
  25. PG

    Furley November 11th

    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/

    ( Reply )
  26. PG

    Matt November 11th

    Most obvious advice ever… thanks.

    ( Reply )
  27. PG

    sean November 11th

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

    ( Reply )
  28. PG

    Doc November 11th

    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.

    ( Reply )
  29. PG

    Harry M November 11th

    I’m guilty too, haha…

    ( Reply )
  30. PG

    David November 11th

    float: rightright; ? thats invalid.

    ( Reply )
  31. PG

    Guy Harwood November 11th

    Great article Glen

    ( Reply )
  32. PG

    Greg Althoff November 11th

    Ha. I love the burning images.

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

    cheers/

    ( Reply )
  33. PG

    lankapo November 12th

    i have been ignored all this rules hehe

    Thanks for the info

    ( Reply )
  34. PG

    hendo November 12th

    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.

    ( Reply )
  35. PG

    Drew Douglass November 12th

    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 :)

    ( Reply )
  36. PG

    Ryan November 12th

    #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.

    ( Reply )
  37. PG

    Karel Fučík November 12th

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

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

    ( Reply )
  38. PG

    bob November 12th

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

    ( Reply )
  39. PG

    Andy Gongea November 12th

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

    ( Reply )
  40. PG

    Reader November 12th

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

    ( Reply )
  41. PG

    binocle November 12th

    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/

    ( Reply )
  42. PG

    Swapnil Sarwe November 12th

    Good article. Nice tips to follow.
    Thanx for sharing

    ( Reply )
  43. PG

    Volly November 12th

    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

    ( Reply )
  44. PG

    Ian Yates November 12th

    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.

    ( Reply )
  45. PG

    Gary Tompkins November 12th

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

    ( Reply )
  46. PG

    Michael Lomas November 12th

    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.

    ( Reply )
  47. PG

    Shane November 12th

    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.

    ( Reply )
  48. PG

    Patrik November 12th

    “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.

    ( Reply )
  49. PG

    Guest November 12th

    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.

    ( Reply )
  50. PG

    Hudson November 12th

    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

    ( Reply )
  51. PG

    Dave November 12th

    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

    ( Reply )
  52. PG

    salman November 12th

    practical tips and observations

    ( Reply )
  53. PG

    Rafael Madeira November 12th

    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.

    ( Reply )
  54. PG

    Paul November 12th

    “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.

    ( Reply )
  55. PG

    Eric November 12th

    <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.

    ( Reply )
  56. PG

    pankaj November 12th

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

    Thanks again!

    ( Reply )
  57. PG

    Pedro Rogério November 12th

    It’s beautiful tips.

    ( Reply )
  58. PG

    zy November 12th

    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).

    ( Reply )
  59. PG

    Mark Nutter November 12th

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

    ( Reply )
  60. PG

    Dan November 12th

    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…

    ( Reply )
  61. PG

    agustin ruiz November 12th

    nice, thanks!

    ( Reply )
  62. PG

    Lubes November 12th

    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.

    ( Reply )
  63. PG

    Austin November 12th

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

    ( Reply )
  64. PG

    James November 12th

    #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! :)

    ( Reply )
  65. PG

    opl November 12th

    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 ;)

    ( Reply )
  66. PG

    Ryan Coughlin November 12th

    Great post and very interesting solid points! Thanks!

    ( Reply )
  67. PG

    Dave Woods November 12th

    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.

    ( Reply )
  68. PG

    Rodrigo Teixeira November 12th

    Great Post!
    CSS on Fire here!

    ( Reply )
  69. PG

    Bob Ricca November 12th

    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. :)

    ( Reply )
  70. PG

    Matt Radel November 12th

    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!

    ( Reply )
  71. PG

    Dan November 12th

    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.

    ( Reply )
  72. PG

    NCB November 12th

    how do *you* account for smaller browsers?

    ( Reply )
  73. PG

    Aaron Irizarry November 12th

    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

    ( Reply )
  74. PG

    neron-fx November 12th

    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! :)

    ( Reply )
  75. PG

    Peddar Zaskq November 12th

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

    ( Reply )
  76. PG

    MK Owens November 12th

    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.

    ( Reply )
  77. PG

    Joe November 12th

    Good advice mixed with bad advice.

    ( Reply )
  78. PG

    aQuib November 12th

    Great article!

    ( Reply )
  79. PG

    frank November 12th

    Great info. Thanks.

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

    ( Reply )
  80. PG

    Kai November 12th

    Haha, I really like those images :)

    ( Reply )
  81. PG

    Ben November 12th

    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.

    ( Reply )
  82. PG

    honour chick November 12th

    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 :)

    ( Reply )
  83. PG

    Deep November 12th

    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.

    ( Reply )
  84. PG

    nuth November 12th

    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.

    ( Reply )
  85. PG

    Roshan November 12th

    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*

    ( Reply )
  86. PG

    burner November 12th

    lame using BM photos for a site like this

    ( Reply )
  87. PG

    Francisco S. November 12th

    Awesome, I’ve never heard of blueprints before.

    ( Reply )
  88. PG

    Scott November 12th

    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?

    ( Reply )
  89. PG

    Haris November 12th

    Thanks

    ( Reply )
  90. PG

    Jay November 12th

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

    ( Reply )
  91. PG

    Fabio Varesano November 12th

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

    So thanks for writing.

    ( Reply )
  92. PG

    Jeffrey Sambells November 12th

    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.

    ( Reply )
  93. PG

    ntopics November 12th

    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

    ( Reply )
  94. PG

    Court Ewing November 12th

    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.

    ( Reply )
  95. PG

    Kevin Quillen November 12th

    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.

    ( Reply )
  96. PG

    PureDezigner November 12th

    Great article, love the pics!

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

    http://www.puredezigner.com

    ( Reply )
  97. PG

    Ken November 12th

    #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.

    ( Reply )
  98. PG

    jd November 12th

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

    ( Reply )
  99. PG

    gentlerobot November 12th

    the hell is float rightright?

    ( Reply )
  100. PG

    matt November 12th

    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?

    ( Reply )
  101. PG

    JustChris November 12th

    @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.

    ( Reply )
  102. PG

    BobH November 12th

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

    ( Reply )
  103. PG

    Rob November 12th

    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!

    ( Reply )
  104. PG

    Max November 12th

    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.

    ( Reply )
  105. PG

    Troy Dalmasso November 12th

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

    ( Reply )
  106. PG

    Buzu November 12th

    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.

    ( Reply )
  107. PG

    Vince November 12th

    @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.

    ( Reply )
  108. PG

    Buzu November 12th

    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)

    ( Reply )
  109. PG

    Rasmus November 12th

    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 :)

    ( Reply )
  110. PG

    Tim November 12th

    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.

    ( Reply )
  111. PG

    jason November 12th

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

    ( Reply )
  112. PG

    Mocoso November 12th

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

    ( Reply )
  113. PG

    Phil November 12th

    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!

    ( Reply )
  114. PG

    yhv November 12th

    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?

    ( Reply )
  115. PG

    Calítoe.:. November 12th

    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.

    ( Reply )
  116. PG

    Arno November 12th

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

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

    ( Reply )
  117. PG

    Craigsnedeker November 12th

    Awesome article!!

    ( Reply )
  118. PG

    Mel November 12th

    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.

    ( Reply )
  119. PG

    Moksha November 12th

    nice things to remember thanks

    ( Reply )
  120. PG

    xyz November 12th

    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.

    ( Reply )
  121. PG

    jive November 12th

    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.

    ( Reply )
    1. PG

      Nic April 10th

      Hm, I understand what you’re saying Jive- but I’m not sure it applies here. .right is a semantic description of it’s function. When applied with other class names it starts to make more sense; “right panel” or “right sidebar”.

      ( Reply )
  122. PG

    Rob Mason November 12th

    Are these really CSS mistakes or general design mistakes?

    ( Reply )
  123. PG

    john nocrapish November 12th

    It’s a shame.

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

    ( Reply )
  124. PG

    Angry Designer Fag November 12th

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

    ( Reply )
  125. PG

    Radek November 12th

    Useless article

    ( Reply )
  126. PG

    rock November 12th

    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

    ( Reply )
  127. PG

    Jordan November 12th

    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.

    ( Reply )
  128. PG

    AEN November 12th

    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.

    ( Reply )
  129. PG

    Darren November 12th

    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.

    ( Reply )
  130. PG

    Nick November 12th

    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.

    ( Reply )
  131. PG

    David November 12th

    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 ;)

    ( Reply )
  132. PG

    Drumsin November 12th

    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.

    ( Reply )
  133. PG

    Cheb Junior November 12th

    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

    ( Reply )
  134. PG

    Baz L November 12th

    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.

    ( Reply )
  135. PG

    Sean November 12th

    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 :D

    ( Reply )
  136. PG

    Mortimer November 12th

    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.).

    ( Reply )
  137. PG

    Sean November 12th

    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.

    ( Reply )
  138. PG

    Beavis November 12th

    heh heh Fire! uhuhuh

    ( Reply )
  139. PG

    Slinky Bill November 12th

    Mmmm that’s the government methodology in a nutshell.

    http://parks.tas.gov.au

    ( Reply )
  140. PG

    Abethebabe November 12th

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

    ( Reply )
  141. PG

    Mel November 12th

    excellent point Mortimer

    ( Reply )
  142. PG

    B. Mohamed Arif November 12th

    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.

    ( Reply )
  143. PG

    Fesh November 12th

    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

    ( Reply )
  144. PG

    James November 12th

    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.

    ( Reply )
  145. PG

    Sherlock November 12th

    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

    ( Reply )
  146. PG

    Kim Dolleris November 12th

    @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.

    :D Kim

    ( Reply )
  147. PG

    h-a-r-v November 12th

    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.

    ( Reply )
  148. PG

    uxu November 13th

    I strongly disagree with #4.

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

    ( Reply )
  149. PG

    Edward Boot November 13th

    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!

    ( Reply )
  150. PG

    Nick November 13th

    @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.

    ( Reply )
  151. PG

    Nick Brown November 13th

    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.

    ( Reply )
  152. PG

    James November 13th

    @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…

    ( Reply )
  153. PG

    LC November 13th

    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 :)

    ( Reply )
  154. PG

    JamesS November 13th

    “Why reinvent the wheel?”

    – Because sometimes you end up with a round one…

    ( Reply )
  155. PG

    lol November 13th

    css frameworks? sounds pervy!

    ( Reply )
  156. PG

    Lubes November 13th

    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.

    ( Reply )
  157. PG

    Lubes November 13th

    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/

    ( Reply )
  158. PG

    Max Kueng November 13th

    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.

    ( Reply )
  159. PG

    Azizur Rahman November 13th

    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/

    ( Reply )
  160. PG

    Midla November 13th

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

    ( Reply )
  161. PG

    Jon November 13th

    Great article. Excellent use of nontraditional images too.

    ( Reply )
  162. PG

    weblizzer November 13th

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

    ( Reply )
  163. PG

    derek allard November 13th

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

    ( Reply )
  164. PG

    Jauhari November 13th

    Perfect tips ;)

    ( Reply )
  165. PG

    Kevin Quillen November 13th

    Framework for a reset? Heres your reset:

    * { margin: 0; padding: 0 }

    Go from there..

    ( Reply )
  166. PG

    Baz L November 13th

    @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?

    ( Reply )
  167. PG

    balbonits November 13th

    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!.

    ( Reply )
  168. PG

    Aaron November 13th

    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.

    ( Reply )
  169. PG

    Javier Centeno November 13th

    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.

    ( Reply )
  170. PG

    kenroy george November 13th

    great read!

    ( Reply )
  171. PG

    Buzu November 13th

    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.

    ( Reply )
  172. PG

    Zeke Franco November 14th

    @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.

    ( Reply )
  173. PG

    dave November 14th

    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.

    ( Reply )
  174. PG

    gri3fon November 14th

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

    ( Reply )
  175. PG

    Javier Centeno November 14th

    @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.

    ( Reply )
  176. PG

    Takumi86 November 14th

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

    ( Reply )
  177. PG

    Pete November 14th

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

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

    ( Reply )
  178. PG

    Alek November 14th

    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…

    ( Reply )
  179. PG

    Freelancer November 14th

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

    ( Reply )
  180. PG

    Jaakko November 15th

    Very good article!

    ( Reply )
  181. PG

    Buzu November 15th

    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.

    ( Reply )
  182. PG

    ncus November 15th

    like the article but not the image.

    ( Reply )
  183. PG

    Timothy Diokno November 15th

    @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?

    ( Reply )
  184. PG

    Javier Centeno November 17th

    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.

    ( Reply )
  185. PG

    BM November 18th

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

    ( Reply )
  186. PG

    Aaron Payne November 19th

    Good info. .. Thanks!

    ( Reply )
  187. PG

    Kim H November 19th

    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 :)

    ( Reply )
  188. PG

    tsauri28 November 20th

    asa kasindiran..heu..

    ( Reply )
  189. PG

    Nandini November 20th

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

    ( Reply )
  190. PG

    Tungsten Jewelry November 22nd

    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.

    ( Reply )
  191. PG

    MMF November 23rd

    Good info

    Thanks

    ( Reply )
  192. PG

    kareem November 23rd

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

    ( Reply )
  193. PG

    greg November 23rd

    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.

    ( Reply )
  194. PG

    Nandini@HIPs Consultant November 23rd

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

    ( Reply )
  195. PG

    Joe November 27th

    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).

    ( Reply )
  196. PG

    Nandini November 28th

    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.

    ( Reply )
  197. PG

    N a m e December 1st

    nice pictures

    ( Reply )
  198. PG

    Lars December 2nd

    Dear Glen,

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

    ( Reply )
  199. PG

    cman December 2nd

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

    ( Reply )
  200. PG

    Dan Black December 2nd

    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.

    ( Reply )
  201. PG

    Dan Black December 2nd

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

    ( Reply )
  202. PG

    Daniel Miessler December 2nd

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

    ( Reply )
  203. PG

    Joel December 2nd

    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!

    ( Reply )
  204. PG

    homer December 2nd

    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.

    ( Reply )
  205. PG

    Juni December 2nd

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

    ( Reply )
  206. PG

    artd December 12th

    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.

    ( Reply )
  207. PG

    sam February 22nd

    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.

    ( Reply )
  208. PG

    Jono April 1st

    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.

    ( Reply )
  209. PG

    david.milewski May 31st

    Nice article ;)

    ( Reply )
  210. PG

    Shubhodeep Ghosh November 1st

    Very nice article. :)

    ( Reply )
  1. Arrow
    Gravatar

    Your Name
    November 1st