1

What are the advantages and disadvantages of including JS/CSS inside the HTML instead of separated files?

Specifically concerned about performance issues, for example, if the CSS and JS are small and simple, and they are not going to be used in any other page, is it better to include them with the HTML so there is only a single request to the server? Or is this not a concern anymore with HTTP/2?

Which other technical considerations are important regarding this decision?

Improve this question
12
  • It is a matter of taste, and the HTML and JavaScript and CSS contents may be generated (like Ocsigen does, and RefPerSys could do...). Contact me by email to [email protected]. See also libonion
    – Basile Starynkevitch
    Aug 5, 2021 at 13:38
  • @BasileStarynkevitch Thanks for the heads up! I updated the question to focus it on a more fact-based line.
    – MauricioRobayo
    Aug 5, 2021 at 14:48
  • @BasileStarynkevitch I followed the links you suggested me to follow but I cannot find any relation with the question asked or how they add to the discussion... could you please expand on why you posted and suggested to follow those links? Seems like they are projects made by you. Is that spam? Sorry if I'm getting it wrong, appreciate if you clarify.
    – MauricioRobayo
    Aug 5, 2021 at 15:04
  • No, ocsigen is not by me, and I never used it. I happen to know (in person) its contributors. Please email me for more (to [email protected]). Being on summer holidays (in august 2021), I will answer in a few days. I also believe your question is a matter of opinion. Some websites have static contents, others don't. And even if mixing JS and CSS and HTML is bad practice, it is done.
    – Basile Starynkevitch
    Aug 5, 2021 at 15:08
  • 1
    No, ocsigen is directly related to your question, and your question is a matter of opinion (so has no single "good" answer), since HTML or CSS content can be (and in 2021 often is) generated. For my websites, I am typing HTML with GNU emacs. This is not professional; I do write software which generates HTML
    – Basile Starynkevitch
    Aug 5, 2021 at 15:13

1 Answer 1

Reset to default
5

The reason why js and css will be seperated is for bundling and minification purposes.

  1. When you write them inside a HTML file, then the file size increases and takes time to load, which will degrade the performance.
  2. When the js and css are separated, we can bundle them into one and then minify them. Then there is no need to fetch big files. And also, the stylesheets and js can be cached in browser which will reduce the time to fetch those files.
  3. Also, if you want to develop in a single file you need to scroll multiple times to write the js and styles. Whereas for separate files, you can place them side by side and write which makes it so easy for development.

If the file is small, it doesn't matter much. It is more of a preference.

We do have some standards from w3c. You can read them here.

Improve this answer
4
  • 3
    Excellent arguments. And 4. separation of concerns (the HTML content may need localisation in several languages, or updates by the owner of the content, whereas CSS and jS may be more stable and requires different skills)
    – Christophe
    Aug 5, 2021 at 10:43
  • Could you explain points 1 + 2 better, because I don't think they are true. 1) I don't see how including the JS/CSS in HTML makes the files bigger. In total you will have the same file size(s). 2) Technically you could minify JS/CSS inside a HTML file, too.
    – RoToRa
    Aug 6, 2021 at 12:12
  • @RoToRa 1. HTML actually is rendered based on user request. We can cache HTML too. But if you don't, browser has to always download the content. Whereas js, css and images used in the HTML are static. By default browser caches those static files and won't get downloaded unless there is a hard refresh. Every character occupies some memory including js and styles. As the file gets bigger, it has to download that chunk as I said above. You can switch dev tools in chrome and see the network tab. It will explain clearly what I am saying.
    – T.kowshik Yedida
    Aug 6, 2021 at 16:20
  • @RoToRa 2. Yes you could. But not all people minify html because of the dynamic content which is showed to users, based on preferences, regions, user types etc whatsoever. It is not necessary to minify it in such scenarios but css and js will still be static.
    – T.kowshik Yedida
    Aug 6, 2021 at 16:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.