I hear/read all the time that it is cleaner to keep your js, html and css separated. Supposedly it makes it more easy to maintain, debug. Supposedly it is more efficient, because it allows caching/minifying css and js files.
As far as I am concerned, using web frameworks (Django, Rails, ...), javascript templating libraries, ... I tend to split quite a lot a single html page into multiple reusable templates - some kind of widgets if you wish. For example I can have a news feed widget, a select multiple widget, etc ... each of them having a consistent layout throughout the different pages, and each being controlled by its piece of javascript.
With this organization - which seems to me as clean as it can get, maximizing reusability - I have trouble to understand why it would be simpler to keep all js and css in separate files. I kind of think it would be so much simpler for example :
in the select multiple widget file
- html
- basic css layout
- control of direct interactions and UX enhancements with a bit of JS.
I think that way it is more reusable, much more maintainable, because you don't have to scroll through a fat js file, then switch to and scroll through a fat css file, switch again to your html file ... back and forth.
So I'd love to know how you guys organize your code, if you stick to the separation that is usually recommended.
- Are there really good reasons to do so ?
- isn't it that the guides on the web usually assume that you won't use any fancy tool (in which case I'd love to get more up-to-date online readings for best practices) ?
- Is it just a matter of preference ?