javascript and css in an html document, best practices?

Question

I need to implement javascript and css resources for the framework I'm working on, but I have a BIG concern.

If you take a look at current websites like Facebook, Google, Youtube and other top-tier sites, their source code show their usage of javascript in various places in the code. The first question coming into my mind is... isn't supposed for javascript source files to be allocated at the beginning of the document? You can/should be able to place javascript commands enclosed in script blocks, but... source files, too??

The books I've been reading suggests (as best practices, I guess) all source files should be allocated in the head section, while displacing all code blocks to the end of the page, right before closing the body section (when possible).

Same applies for CSS. I've seen pages where, in the middle of the page, you find a source file inclusion, while the normal declaration is to include all css files in the beginning (as it's more efficient than in-place inclusion because they load in parallel that way).

In my thoughts, and if I'm to follow the books I've been reading, source files (both javascript and css) go always on top, script blocks (when possible) go to the bottom part of the document and CSS inclusions are to be avoided in-place (except for when you want to use the scope attribute or it's a style declaration inside an html tag, which should also be avoided when possible).

Is that right?

danwellman · Accepted Answer · 2013-08-17 18:41:59Z

7

Best practice dictates thus:

CSS files should go into the <head> of the document, as near to the top as possible. I usually place mine after any <meta> tags.

JavaScript files should go as close to the end of the <body> as possible, usually directly before the </body> tag.

This is because JavaScript files load serially and are blocking, so if JavaScript files are included in the <head> of a page, all files must load in their entirety before the main body of the document can load, which often creates the perception of a delay.

Really, there is little difference between JavaScript files and JavaScript script block. They both use the <script> element, it's just that externally referenced files have an src attribute. From the point of view of the parser, they are the same.

From a validity point of view, <script> elements may be placed anywhere in the <head> or <body> of a page, and there are times when <script> files should go in the <head>, such as when using something like typekit, as this will ensure font files are loaded in time for the fonts to be displayed as soon as the page has loaded, preventing a FOUF (flash of unstyled font)

edited Aug 17, 2013 at 18:41

answered Nov 7, 2012 at 11:32

danwellman

9,4018 gold badges65 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Julio María Meca Hansen Over a year ago

Exactly the kind of answer I was looking for, now I can adjust my framework to make assets go the way they should. Thanks a lot! :)

Collectives™ on Stack Overflow

javascript and css in an html document, best practices?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related