Colocation has been a thing in the Web space for quite a while now. React, Vue.js and others have been pushing it for a couple of years with their Component-based frameworks.
The traditional approach of separating HTML, CSS and JavaScript code doesn't make a whole lot of sense. Each of these is a different technology but they need to work together. Most features would have some code split across three different files.
Everyone seems to be on board with putting their HTML and JavaScript in the same component file, however many developers I talk with have different ideas when it comes to CSS.
Either because it's just not simple and easy to implement or because it hasn't been popularised as much. For some reason, a lot of developers are against writing CSS in their component files.
Regardless of implementation or style, here's why colocation is great:
Isolated from other features means less intertwining bugs. One section of CSS code can be isolated from others making sure it's not unknowingly depending on or being depended on other code.
It's harder to let one technology become out-of-line with the others. If the structure of the markup changes, the styling is right there in front of you and so you'll naturally keep this up-to-date as well. This isn't the case when the styles are hidden away in another file.
Removal of dead or obselete features are much simpler. Since there are no hidden ties to any other code, once a feature is no longer needed, it can be just removed.
All the details of how a feature is implemented can be hidden away inside a single file. If someone is new to the code or doesn't need to understand it just yet, they don't have to.
This all enables a team to move faster, reduce bugs and keep the amount of code down.
Top comments (0)