Inline CSS, JavaScript Code Is Not Good - Notes

Inline CSS, JavaScript Code Is Not Good

What Is Inline Style And Inline JavaScript?

Let’s begin with explaining what I mean with having CSS and JavaScript inline: it is when you integrate your HTML code directly with either of them, resulting in having presentation and interaction code spread all throughout the page. Like this:

<div style="width: 800px; margin: 1em auto; font: bold 1em/1.2 Verdana, Arial, Helvetica, sans-serif">
    <div style="float: left; width: 400px; padding: 1em 2em; font-size: 0.9em">
        <span id="get-shit" onclick="callSomeFunction()">News</span>
    </div>
</div>

What Is So Bad With It?

Except for not being very pretty code, and hard to get a good overview of it, there are some real disadvantages to this:

HTML file size

Your HTML code will weigh more, i.e. a web page riddled with similar code will have a kb size that is a lot larger than necessary.

Lack of caching

HTML code will never be cached. Contrary to that, external dependencies, such as CSS and JavaScript files, will be cached by the visitor’s web browser after the first visit – this means that instead of loading a lot of superfluous HTML code for every page in your web site the visitor visits, it will quickly retrieve all style and interaction locally from the web browser cache.

Poor accessibility

When it comes to inline JavaScript code, such as in the above example, it’s applied to an element which doesn’t have any built-in fallback interaction handler (i.e., like a link takes you to the URL specified in its href attribute etc). This means that it won’t work when JavaScript, for one reason or the other, isn’t available.

Difficult code maintenance

When it comes to making changes to the code, I’m sure every web developer would agree on that having code in just one centralized location is a lot more preferable than changing exactly the same kind of code snippets spread all over the files in the web site. Maintaining similar code to the above for an entire web site would be hell.

Doesn’t Everyone Have JavaScript Nowadays?

First: no they don’t. Second: some people purposely turn it off (for instance, the NoScript Firefox extension has had 31 million downloads to this date). Third, very often is not up to the end user, but external circumstances that they don’t control, which will, to some extent or another, lead to JavaScript being unavailable. These factors are:

• Antivirus programs and firewalls being a bit too harsh in their JavaScript security judgement.
• Company proxy servers filtering out code (for example, read An important lesson learned about AJAX and accessibility).
• Other company internet access settings preventing proper JavaScript execution.