Grow your CSS skills. Land your dream job.

Inappropriate Uses

Published by Chris Coyier

Database
is forcontent
HTML
is fordescribing and displaying content
CSS
is fordesign
JavaScript
is forfunctionality

 

Those are the appropriate uses for these technologies. Inappropriate use is when you cross those lines and create a mismatch.

Inappropriate database use

You store the title of a blog post as the value:

<h1>10 things to not bring with you skydiving</h1>

It is inappropriate to store the HTML tag with the title. it's inflexible later on and has nothing to do with the content itself. What if it was designed this way on purpose so that, when output, all titles could have different HTML tags? Then use a different database field to store the tag, or better yet, a use that separate field to save a symbolic representation of the importance of that title.

Inappropriate HTML use

People often say "HTML is for content", which is only partially true. Yes, content ends up as HTML, but the markup as written by a HTML coder should contain very little actually content. It should contain the structural elements that describe the content, and inside all of that structure, descriptive tags wrapping code that dynamically gets content.

Other inappropriate HTML use is stuff like:

<div class="post-seperator"></div>

Chances are, that's there for purely visual reasons. Ideally another way to accomplish the same thing visually without needing the extra div should be implemented.

Another example of inappropriate use, which needs no explanation:

<p style="border: 1px solid red; padding: 10px;">Warning: you should never do this.</p>

Inappropriate CSS use

It's harder to misuse CSS than it is other languages. It's easy to write bad CSS, but that's just bad CSS not misuse of technology. Take for example using something like RGBa, which allows you to adjust the alpha (opacity) of colors as you declare them. Then you set the background of a box to use a very light tint of black, with black lettering over it. Well not all browsers support RGBa, the box would go full black with black letters and be unreadable. A huge mistake for sure, but not a misuse of the technology.

It is possible to misuse it though, and one example is that CSS allows you to actually append content to HTML. There is a couple of interesting uses for this, but can be potentially misused. For example:

#footer:after { content: "Copyright 2009 The Bad Idea Police"; }

Inappropriate JavaScript use

What's kind of funny about JavaScript is that if something can be done in another language, it probably should be done in that other language.

For example, CSS is fully capable of handling "hover" events for design changes, yet JavaScript is misused handle hovers instead sometimes. For example, swapping out an image on hover. Definitely CSS sprites territory there.

Another typical example is form validation. You can add awesome validation to a form with JavaScript, which is very responsive and useful to a user. But you better be validating that form with a server-side language too, or you could be in trouble with security.

It says above JavaScript is for functionality. This is true. When you need your page to "do something" and be interactive after it's completed loading, that typically JavaScript territory. But that's not all it does. JavaScript is very powerful. It can add/adjust/remove CSS. It can add/remove/adjust HTML. (Both of those things through the DOM). It can talk to your computer and get answers. Through AJAX techniques, it can talk to the server and get answers.

The potential for misuse of JavaScript is very high, but the boundaries are a bit blurry. For example, in the misuse of HTML example above, we were trying to get rid of an empty div we were using for a purely design-related reason. What we could do instead is append that div to the page with JavaScript. Solves the problem for the HTML, but now JavaScript is handling your HTML. Feels weird like crossing boundaries, but I'd say this is an acceptable use of JavaScript. Then let's say while you were appending this div, you knew it needed to be red too, so you used JavaScript to append CSS to it and make it red. Not that is misuse of JavaScript, because you could have used regular CSS to do that. Feels strange, but that's what I mean about if you can do it another language, you should do it another language.

Only in a perfect world

All this isn't just me talking, this is just a regurgitation/amalgamation of what people talk about in our industry today. But it's not just babble, these standards have evolved because it's the right thing to do in building websites that are easier to maintain, more accessible, and more semantic.

However, I'm the first to admit that rules get broken sometimes. We are all just regular human beings, we only know what we know, and we only have so many hours in a day. If you have to break a rule sometimes to get the job done, fine. That fact that you even know you are breaking a rule is pretty great, and you are learning and getting better every day.

Comments

  1. Some good guides there. It is frustrating if you come to a project that somebody else has worked on and they have HTML in the database. I’ve seen entire pages stored a database field before today – I hope I never see it again!

    • There’s a bit of a gray area when it comes to content & markup in the database… Just take WordPress as an example: your post has many paragraphs, lists, links, etc. The only reasonable way to handle free-form content like this is to store the markup in the database.

      Just make sure it is actually free-form content.

    • Permalink to comment#

      Of course you can and may use markup inside the database, but if you do so, you need to take in mind that you lose felxibility over what’s in that.

      For instance, if you wanted to change all s in a 5 paragraph entry in the database to s, it wouldn’t be as easy as simply changing your markup, you’ll have to make a query and whatnot.

      So yeah, it’s possible, but you should only do it in VERY long texts, and ones that wouldn’t change or have a markup that will not change.

    • Well,

      I agree with Andrew, and it goes along with the last paragraph of this article.

      There are cases in wich is necessary to break the rules, for whatever reason. It´s up to the designer/programmer decide what to do in each case.

      Cheers!
      Alexandre
      .

    • Well, i agree with Andrew, but only in cases of content. I have used WordPress so many times and i like the style that it store the markup. The WP store a valid markup, and if you want to change something, you only show style paragraphs, lists, blockquotes, images and more. No CSS style is stored in database (just some standards, in case of images).

      But this idea agree with Dave Sparks too. He talked that the markup don’t need to be stored, but only markups that define the end layout of application. The content will be the same, always!

  2. Permalink to comment#

    this is a great article! A really nice addition would be the corresponding appropriate use. I understand these are generalized examples so a generalized appropriate use would be nice.

    for example i am new to HTML and i have done the dumb DIV as a separator thing. What would be a better way? Put the border on the div above or below? In other words user your existing block elements to style the page?

    Thanks again, I really enjoy your site.

    • Permalink to comment#

      You would style the opposing divs. So you would give them both margins to increase the space between.

      You could also use however it’s not something I’d use.

  3. What’s wrong with this one, just to make sure? :)

    Warning: you should never do this.

    • Inline CSS should be avoided just like inline-javascript (see here) because you’re mixing up two languages that should be kept seperate and you lose a lot of flexibility when using inline-CSS because you will have to use “Search and Replace” when you want to change multiple occurrences of some code.

    • Oh it was the “inline” part you were referring too. I see, and I agree with you. But in some cases it can be a lot faster and easier to just do inline like if you need a quick landingpage for a time limited promotion and then throw it away after use.

    • Yep, I don’t think inline styling should be used at all. Even if it’s for a short-term splash page, at least put it in the head of your page.

      Only time where I see it necessary to use inline styles is for HTML email design.

    • Permalink to comment#

      Oh, I dunno. It’s just as much a find-and-replace endeavour to change out the CSS in the head as it is to swap it out inline. In both cases it is purpose-built only for that page, and in both cases it has higher inheritance than the base CSS.

      In my opinion, if you’re going to be a stickler about never using “inline” styling, I say just add it to your base CSS file and forget about putting it in the head.

      Me, I’m with Klaus… in principle, I agree with not using inline styling; but in practice if I’m building a one-off landing page, it’s sometimes just as easy to just throw in the style you need.

    • Irony:
      That fancy little article intro uses inline styles.

      Having said that, I still agree with the article. Sites should be built flexibly, but it doesn’t mean these rules always have to adhered to. Example being the very top of this article. That CSS won’t need to be reused throughout the site, and is specific to this use. Therefore, inline styles make a good fit.

    • Ha, I’m glad someone pointed that out. But yes, excellent example of gray area.

      The theory here was that I wanted it to come across like that in RSS, and inline styles where the only way!

    • Agreed in principle, but some things are truly just one-off unique styles…

      In order to separate style & content, you have to be able to classify or identify the parts of your content.

      It makes little sense to go through the trouble of coming up with a unique class name for something that’s just this one thing that’s really just a stylistic element that shows up in only one place…

      If you can classify it (“this is a warning message”) or identify it (“this is the nuke button description”), then of course it should be its own CSS rule.

    • Personally, i try to avoid inline-styling completly because

      a) Inline styles can’t be cached the way it would be possible with an external CSS-file
      b) I often found myself trying to change anything layout-specific and having to adjust the html-files as well as the CSS-Files because inline-styling was used.
      c) There’s also a conveniant way using external CSS by creating kind of a “single-definiton” CSS-File where you place all “not-so-often-needed”-elements – with the possibility to comment on the rules.

    • Meg
      Permalink to comment#

      Well then inline CSS shouldn’t be taught in tutorials, or in books, which it is, because if it’s so wrong to use then people like me who are learning it on their own don’t know this. If it’s so bad to use, then it should be disabled somehow. If the code works, then people are going to use it for convenience reasons! Frustrating.

  4. Helen
    Permalink to comment#

    One day, one of these Dreamweaver-WYSIWYG-websites, where HTML, CSS and Scripting merge to become one endless cryptic string that starts with “body onclick”, will ask itself: Who am I? Let’s rule the world.

  5. Good article – maintaining separation of concerns is essential to any large project. Had a requirement once to expose some data via a web service – but the raw data contained markup. Their answer: parse the query results….

  6. Mike
    Permalink to comment#

    Great list of usages! Most of them are fairly common sense, but I see the misusage all the time.

    On a side note, and for sure not to be a spelling or grammar !z — the article title is misspelled. Inapproprite vs. Inappropriate.

  7. Interesting article, Chris. Just wondered, you say

    There is a couple of interesting uses for this

    when talking about using content with CSS, just wondered what those might be?

  8. Justin Ryan
    Permalink to comment#

    There is also the argument that CSS hover is a function not a design, which would put it in the inappropriate category.

    This use is pretty widely accepted, but if you’re going to be strict about “appropriateness,” it’s worth a thought.

    • Permalink to comment#

      Further to this, :hover is only cross-browser compatible on anchor tags (unless my knowledge is out of date), and there’s no provision for keeping the state changed on mouse-out.

      I like and use CSS for most of my hovers (using sprites), but when a hover needs to persist, there’s JavaScript waiting for me.

      But mainly, yeah, it’s a function not a design.

      Oh the lovely gray areas we live in and move through when it comes to web dev. ;-)

  9. Permalink to comment#

    Hi.
    Hey You missed the Inappropriate use of PHP ;D.
    IMO, CMS’s shlould not contain or generate content mixed with HTML. HTML/CSS should be part of the template system.

    As for CSS, i’ have a question, what’s a valid solution to avoid the use of:

    I’m using the 960GS and that empty DIVS seems to me mandatory.

    • Brussells
      Permalink to comment#

      Agreed on ‘Inappropriate use of PHP’. Recently read the article on PHP positioning and now don’t know which I should be learning (v. green learner here).

      aker, what is it that I should be seeing? I see a gray box but no text. Or is it just me?

      From what I’ve learn’t, inline css can be argued if you have a one page, one instance requirement to alter the tag in question.

  10. Permalink to comment#

    Excellent post! I think that an inappropriate use of PHP is echoing content that is not dynamically generated.

    • I must agree with you there. I get fed-up with helping people out with their wordpress theme just to find every other word in the template has been inserted by PHP echos.

    • Ah, but if they are using a theme that was created for the masses, it makes sense to dynamically retrieve and display the blog title, for instance. If it were a custom theme just for that blog, then you could and should hard-code much more HTML.

  11. Hmmmm….. Some interesting stuff is going on in there. I didn’t even realise before today that you could add content using CSS, that is one lesson learnt that I shall forget ASAP… before I end up using it.

  12. Braxo
    Permalink to comment#

    I actually think Javascript should be used for hovering effects that most people use CSS for.

    Because CSS is for design and Javascript is for functionality/behavior, I see hover effects as behavior therefor I place it in there.

    • There’s nothing to stop one from using CSS to manage the look of the item displayed on hover, and JS to manage its behavior. An interesting concept discussed months ago spoke of improving user experience by delaying the display of drop down menu options on rollover, and keeping them visible for a longer period of time after rollout. This experience can only be achieved by combining JS with CSS.

    • Marc
      Permalink to comment#

      In that case, I won’t ever see your hovers. That’s OK if they are just there to be pretty, but not OK if they are there to convey the significance of an element (eg, an anchor) or reveal some content. It depends how the hover is used.

  13. Thanks for the post. This always needs to be said!

  14. dakoon
    Permalink to comment#

    I think that javascript can be used for both design and functionality as long as you are smart about it. As with The thinkgeek background example the other day. Jquery could have easily generated the html to make that happen. Then when the Javascript was off it would have a basic background. I think Javascript when wielded correctly can serve many many purposes.

    • Permalink to comment#

      I think the point is to use the best tech for the job. Making a visual element dependent on javascript just to save a few lines of HTML seems imprudent. If it can be handled with HTML and CSS, those technologies should be used.

    • dakoon
      Permalink to comment#

      But in the case of that example, HTML and CSS created unsemantic markup. By utilizing javascript to create that HTML we are helping the page function better. Personally, as long as the HTML created serves no other purpose but to “pretty up” the site. And the site functions perfectly without that element. I say “no harm no foul”.

  15. Great article Chris. Really good points for web devs to remember.

    I wouldn’t have thought of including the database in this discussion, but it totally makes sense. The only time when storing HTML in a database would be a good decision is when you are using a technology like Textile or Markdown, and storing a cached version of the converted text in the db for fast access.

  16. Very interesting read. Thanks Chris for the thoughts. Tweet ya later

  17. Kevin
    Permalink to comment#

    Great article! Just a tip though, you may want to ask someone else to proof-read for next time =)

  18. Helen
    Permalink to comment#

    Nowadays, CSS is design and not behavior because it is CSS-2 we are talking about, and not CSS 5. Just think of all the new webkit-CSS3-magic:

    div { -webkit-global-warming(stop, 0); -webkit-tax-declaration(fill out, send); }

    CSS is style because it is static, and that’s because it is just the beginning. There has to be an evolution, and if the future is not functionality, there would only be few thing remaining like h2 { smell: strawberry; }, variables or internal calculations (multiplicate colors like in PS).

  19. I finished reading this article and went to http://net.tutsplus.com (this is my usual routine). When I got to that site I read the new article titled, “Supercharge your Css with PHP under the hood”. While some of the ideas discussed in this article seem reasonable, however, most of it seemed like what this article listed as inappropriate. just thought I would point out a great example of when to not use another language when one does it more efficiently is already in place.
    Enjoy, lol

  20. Hi Chris, it’s always good to take a step back, and make sure you are doing things the in most effective way. I think the HTML as a handler of content is very important, as you suggested, could be stored elsewhere.

    Looking forward to more JQuery work.

  21. Permalink to comment#

    Interesting and very true. Thanks for the post.

  22. Permalink to comment#

    You’ve challenged me again Chris

  23. Hey All,

    I recently read this post:

    http://jeffcroft.com/blog/2009/may/20/applying-oop-concepts-css/

    Thought it would be a good topic to look at after reading this post. Chris how about a post on the number of classes to use on a single element? What do you think…

  24. Permalink to comment#

    Hey I have a question:

    As for mixing html formatting and database storage: how do you guys store the subheaders of your post? As in: how do you not store your headers in this post (‘Inappropriate Database Use’, etc) if you don’t store it in your database as:

    <h3>Title</h3>

    Is there some technique for this that I’m not aware of? It’d be great to know!

    Thanks

  25. I follow your Tweets and RSS feeds, Chris, and I appreciate all the good work you do. I’ve learned a lot from you.

    One small thing about this particular article… While I agree that inline styles should be avoided whenever possible, I respectfully disagree that they should NEVER be used. In some situations, where content is dynamically generated, wouldn’t you agree that inline styles make sense? (One trivial but familiar example: setting the font-size of tags in blog tag clouds based on frequency of use.) My $0.02.

  26. Separation of elements is wonderful. I personally try to avoid using too much JavaScript. Not only does it bog down websites (as does Flash), some users don’t have it enabled so I try to rely on server-side coding with html/css for the majority of the work. Nice discussion though.

  27. What about PHP? Isn’t it a good practice to use it only for the logic?

  28. Permalink to comment#

    Inline CSS is used for HTML emails, particularly if you have an entire university of Lotus Notes or Outlook users. Everything has its use, even bad practice, because most times it only reflects a transitional learning phase. Once upon a time we had long HTML coded pages and short CSS, now its simply the other way around. Its nothing to get annal about. Best practice is to teach people that its best to separate all your files (i.e. put your javascript in a js file and link it in your HTMl document), with HTML being the umbrella that holds it all together.
    Better still is to teach everyone to use server side programming languages to enable the best functionality.

  29. Good rules to remember, though I am consciously / Happily breaking the DB rule a tad bit over at my site, stashing post-specific style code in custom fields and entry sections…

  30. Permalink to comment#

    A perfect example of this: I’ve got a project at work where they want to increase the search engine rank of one of their pages so instead of working with the HTML structure and the CSS someone had the bright idea to use Light Boxes with text to “add more content and keywords” to the page for search engines to crawl. It’s a hilariously bad idea but I wouldn’t expect anything less from a non-technical person. I advised against it and offered up a few other solutions that will work better but they still want to test the Light Box idea.

    Great post though… I hate when I see stuff like this, its frustrating, and it happens all too often. I cringe whenever I see that someone has broken any of these rules. The worst is when you get a database full of a ton of bad data and having to figure out how to cleanse everything and make it usable.

  31. I really agree with this posting! I hate it when people embed HTML tags in database title fields. There are exceptions, but a title field should never have HTML. Remember you can always use a simple carriage return in the database, then use a simple regular expression to replace \n with

  32. Good points, Chris. I never really thought about it all in that way before, but yeah… everything has its purpose, and just because we can use something to do something else doesn’t mean it’s best practice. Thanks for the article!

  33. Good advice, i guess this is something that any designer/developer has to keep reminding themselves about.

  34. Permalink to comment#

    Hi Chris – great topic. Just wonder what you think of the idea of CSS transforms? Seems to mix behavioral attributes with the standard presentational attributes. At first I thought this made sense, but after thinking about it not sure. Yet another gray area.

    • I’m all for it. The things that you “transform” are design-related things, and thus ultimately belong in the CSS. I agree it can be a little gray though… if the transform does affect functionality in some significant way.

  35. Excellent post!

  36. Bryce Bertola
    Permalink to comment#

    What if you wanted to use the CSS :before pseudo class to inject a wrapper on all images located inside the content?

    The purpose would be to create a frame for each image and the frame would be a fluid width and height.

    I thought this code might work, is it even possible?


    #content-canvas img:before {
    }

  37. Bryce Bertola
    Permalink to comment#

    I’ll try the code again… fat fingered that one….


    #content-canvas img:before {
    content: ''
    }
    #content-canvas img:after {
    content: ''
    }

    and then you would style the .image-frame-topleft, .image-frame-right, and .image-frame-bottom to fit your needs.

    Would this be possible?

    • I assume you had some HTML inside those content tags? I’m not sure you can drop in HTML like that. If you can I think you’d need to encode the characters in that special weird way the the CSS content values need to be. But if you can, I’d say that’s fine. It’s another pure-design thing that belongs in CSS…

    • Bryce Bertola
      Permalink to comment#

      I’m not able to find anything about inserting the code directly, but in theory you could store the code in a separate file and use the uri include; content: uri(mysite.com/beforeimg.txt);

      Unfortunately, there is no support for IE 7 or lower, and only partial support in other browsers. maybe not worth the time to investigate

  38. Sander
    Permalink to comment#

    Perfect example of inapropriate use:
    ajax cross domain requests, trough css. because css is not subject to the same cross domain rules…

    its dirty i tell you! dirty!

    http://nb.io/hacks/csshttprequest

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".