CSS and Javascript in HTML - Best Practices

There are a number ways to incorporate Javascript and CSS into a project.

CSS

Let's start with CSS:

1) Inline

This is where your CSS is included directly in your HTML. Here's an example to style the text in green:

<h1 style="color:green">Green Hello World</h1>

This method of styling should be avoided.

2) Internal style sheet

This where your CSS in included in the HTML page between <style> elements. The styling is placed in the head section.

<html>
  <head>
     <style>
        h1 {
           color: green;
        }
     </style>
  </head>
</html>

This method of styling is not ideal.

3) External style sheet

This is where you store styles in a separate file and link to the file in the head section. In this case, I have a separate file called style.css which contains my CSS, and I'm linking to it from the header.

<head>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>

This is the recommended method of styling.

Javascript

Just like with CSS, it's possible to add Javascript in a number of ways.

1) Inline

Just like with CSS, you can add Javascript inline.

<p onclick="console.log('Hello World')">Say Hi!</p>

This displays Say Hi! in a paragraph, and when a user clicks on it, it logs Hello World to the terminal.

While this sort of scripting is not unusual, it is not recommended for a number of reasons: It's difficult to maintain, there should be a separation of concerns, it's more difficult to get performance improvements using optimization, minification and caching.

Frontend Javascript libraries and frameworks such as React and Angular will often use this style. 

2) Internal scripts

Like CSS, this is where you put your code between <script> tags in the HTML document. In this case, there's an <h2> element with the text Hello, click me!

Inside the script tags, I select the element, then add an event listener that logs Hello World to the console when it's clicked.

<body>
    <h2>Hello, click me!</h2>

    <script>
      const clickMe = document.querySelector('h2');
      clickMe.addEventListener('click', () => console.log("Hello World"));
    </script>
</body>

 

3) External scripts

Like CSS, this is where you put Javascript in a separate file and link to the file from inside the HTML

It can be done simply by adding this anywhere on the page:

<script src="script.js"></script>

This is the recommended method for adding Javascript.

Initially, common practice was to put the link in the header. But soon developers realized that this delayed page load as the browser paused to fetch and load the Javascript file. To get around this problems, developer instead put the link at the end of the body text ensuring that the HTML and CSS would be loaded before the browser paused to fetch the Javascript.

HTML5 provides two ways for developers to specify how the browser should load Javascript: async and defer.

Async:

<script src="script.js" async></script>

This instructs the browser to download and execute the script while the rest of the page is loaded.

Defer:

<script src="script.js" defer></script>

This instructs the browser to only execute the script after the page has finished loading.

If you include both async and defer, async takes precedence.

 

Further Reading:

https://stackoverflow.com/questions/196702/where-to-place-javascript-in-an-html-file

https://stackoverflow.com/questions/5250412/how-exactly-does-script-defer-defer-work