Modularizing your code by separating your HTML, CSS, and Javascript code has plenty of benefits. Here’s what comes to mind:
If you’re placing all of your code into one file, you’re making it really difficult for other members of your team (or future engineers) to collaborate on your project. If four people are working on a project all off the same index.html
file, imagine all the merge conflicts that you’re going to have to resolve over and over again.
When debugging, it’s going to be a lot easier to reference a smaller file containing a hundred lines of code than a monolithic one with thousands of lines.
It also adds a lot of technical debt to the project — when future engineers who inherit your work finally decide to modularize your file, they’re going to have to spend a lot of time doing so which will leave a negative impression of your work upon them.
TL;DR — Always modularize your code! It makes it easier to read, understand, debug, and collaborate.