Inappropriate Uses

Avatar of Chris Coyier
Chris Coyier on

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.