{"id":3524,"date":"2009-08-24T05:32:03","date_gmt":"2009-08-24T12:32:03","guid":{"rendered":"http:\/\/css-tricks.com\/?p=3524"},"modified":"2009-08-24T08:09:22","modified_gmt":"2009-08-24T15:09:22","slug":"inapproprite-uses","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/inapproprite-uses\/","title":{"rendered":"Inappropriate Uses"},"content":{"rendered":"
\n
Database<\/div>\n
is for<\/em>content<\/div>\n<\/div>\n
\n
HTML<\/div>\n
is for<\/em>describing and displaying content<\/div>\n<\/div>\n
\n
CSS<\/div>\n
is for<\/em>design<\/div>\n<\/div>\n
\n
JavaScript<\/div>\n
is for<\/em>functionality<\/div>\n<\/div>\n

 <\/p>\n

Those are the appropriate uses for these technologies. Inappropriate use is when you cross those lines and create a mismatch.<\/p>\n

<\/p>\n

Inappropriate database use<\/h3>\n

You store the title of a blog post as the value: <\/p>\n

<h1>10 things to not bring with you skydiving<\/h1><\/tt><\/p>\n

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.<\/p>\n

Inappropriate HTML use<\/h3>\n

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<\/em> content.<\/p>\n

Other inappropriate HTML use is stuff like: <\/p>\n

<div class=\"post-seperator\"><\/div><\/tt><\/p>\n

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.<\/p>\n

Another example of inappropriate use, which needs no explanation:<\/p>\n

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

Inappropriate CSS use<\/h3>\n

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.<\/p>\n

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:<\/p>\n

#footer:after { content: \"Copyright 2009 The Bad Idea Police\"; }<\/tt><\/p>\n

Inappropriate JavaScript use<\/h3>\n

What’s kind of funny about JavaScript is that if something can<\/strong> be done in another language, it probably should<\/strong> be done in that other language. <\/p>\n

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.<\/p>\n

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.<\/p>\n

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. <\/p>\n

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<\/strong> 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<\/strong> do it another language, you should<\/strong> do it another language. <\/p>\n

Only in a perfect world<\/h3>\n

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. <\/p>\n

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.<\/p>\n","protected":false},"excerpt":{"rendered":"

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.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":270286,"url":"https:\/\/css-tricks.com\/finger-friendly-numerical-inputs-with-inputmode\/","url_meta":{"origin":3524,"position":0},"title":"Finger-friendly numerical inputs with `inputmode`","date":"April 30, 2018","format":false,"excerpt":"Forms are often a nightmare on mobile. We can make the process as pain-free as possible by reacting to context. Input fields that expect numerical values should have a numerical UI. Bringing up a number keyboard on small screens is easy on most platforms \u2014 just use a . This\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/inputmode.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":300771,"url":"https:\/\/css-tricks.com\/7-uses-for-css-custom-properties\/","url_meta":{"origin":3524,"position":1},"title":"7 Uses for CSS Custom Properties","date":"December 27, 2019","format":false,"excerpt":"I find all seven of these quite clever and useful. I particularly like using custom properties when you can sneak a variation into a place where you'd normally have to re-declare a whole big chunk of code. .some-element { background-color: hsla( var(--h, 120), var(--s, 50), var(--l, 50), var(--a, 1) );\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/custom-properties-code.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":278582,"url":"https:\/\/css-tricks.com\/css-tricks-uses-jetpack\/","url_meta":{"origin":3524,"position":2},"title":"CSS-Tricks Uses Jetpack","date":"November 8, 2018","format":false,"excerpt":"Hey! I made a little page to explain all the ways in which this very site uses the Jetpack WordPress plugin. Here's the gist of it: Our Jetpack subscription gives us VaultPress, which backs up literally everything on this site in real time. That helps me sleep. Jetpack improves our\u2026","rel":"","context":"In "Sponsored"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/jetpack.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":282953,"url":"https:\/\/css-tricks.com\/diana-smiths-top-5-css-properties-she-uses-to-produce-css-art\/","url_meta":{"origin":3524,"position":3},"title":"Diana Smith’s Top 5 CSS Properties She Uses to Produce CSS Art","date":"February 20, 2019","format":false,"excerpt":"Have you seen Diana Smith's CSS drawings? Stunning. These far transcend the CSS drawings that sort of crudely replicate a flat SVG scene, like I might attempt. We were lucky enough for her to post some of her CSS drawing techniques here last year. Well, Diana has also listed the\u2026","rel":"","context":"In "Interview"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/diana-smith-francine.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":288641,"url":"https:\/\/css-tricks.com\/weekly-platform-news-favicon-guidelines-accessibility-testing-web-almanac\/","url_meta":{"origin":3524,"position":4},"title":"Weekly Platform News: Favicon Guidelines, Accessibility Testing, Web Almanac","date":"May 31, 2019","format":false,"excerpt":"In this week's news, Google defines guidelines for favicons, a new a11y testing tool from The Paciello Group, and changes to how the W3C plans to engage the community, plus more.","rel":"","context":"In "Weekly Platform News"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/web-platform-news-0530.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":271139,"url":"https:\/\/css-tricks.com\/responsive-tables-revisited\/","url_meta":{"origin":3524,"position":5},"title":"Responsive tables, revisited","date":"May 16, 2018","format":false,"excerpt":"Lea Verou with some extra super fancy CSS trickery. No way we could miss linking this one up! One of the problems with responsive table solutions, at least the ones where you are using CSS to rejigger things, is that there is duplicated content somewhere. Either in CSS or HTML.\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/responsive-table.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/3524"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=3524"}],"version-history":[{"count":22,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/3524\/revisions"}],"predecessor-version":[{"id":3549,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/3524\/revisions\/3549"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=3524"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=3524"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=3524"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}