Why is it bad practice to use Javascript inline?

Asked

Viewed 1,335 times

18

The title already describes the question: why is it considered a bad practice to use CSS and Javascript inline in our codes?

It’s bad to use it even on smaller projects?

javascript
  • 3

    It’s "so bad," which has a lot of leverage that nobody put in the answers. CSS inline prevents the page from "reassembling" at the time it is loading, JS inline prevents the page from malfunctioning in a bad connection. The ideal is "know what you are doing, to use the right resource at the right time". There are no "good practices", there is "know how to use". In most cases, separate is good. But there are times when inline is much better. Even, if JS/CSS is only for that page, and you can use includes, has no advantage to separate. Everything will be "curly" together, and saves requests.

3 answers

13


The biggest problem of using CSS and Javascript inline is to mix different kinds of things in one place.

HTML is a markup language for defining abstract elements. CSS is made to define visual styles. Javascript brings dynamics to pages. Putting everything mixed up makes maintenance difficult and creates a lot of confusion.

Although there are some HTML tags that act in formatting, the best practice recommended by 100% of professionals is to separate content from formatting.

Having CSS and Javascript separately helps not only reuse, but forces the developer to think better about what he’s doing, that is, to structure the page into "component" types rather than simply repeating the same style and script everywhere.

Also, maintenance is very easy, because when HTML is decoupled from code and style, you can modify the content without changing the formatting and vice versa. The same goes for new content, if they have the same structure as already exists the formatting and the scripts will be easily reusable.

Note: of course there are other points, such as lower use of band, already cited in other ways in the other answers. However, there are cases where this is questionable. My goal in this reply was to highlight the point that is far more critical on the subject, after all it leads to bugs and impossibility of maintenance.

10

  1. It’s easier to keep css and Javascript separate from html.
  2. You can reuse the code for other pages or projects.
  3. The page becomes lighter because the browser stores the css in the cache so when you reload the page, the browser don’t have to read it all over again.

7

Disadvantages:

  1. Failure to re-use the code
  2. As a consequence of item 1, the customer needs to ALWAYS download the code

Logical that you can eliminate the problem 1 using includes in its server side language but problem 2, forces the client’s browser to download the code every request of the main document.

If the code is a file .js separate, the client’s browser decides whether to download again or use the local cache, which improves the user experience and saves your bandwidth.

But if your project is a single page with no new requests, OK, it doesn’t suffer the problems I listed.

  • If it’s a single page, inline has advantages: saves unnecessary requests, and avoids overhead HTTP headers.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.