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 ?
Best Answer
I maintain this structure
For each page or control, I give it a folder for it's html page (or aspx, or php, etc). In that folder is also folders for js, xml, images and css files. Those are for page/control specific, not shared resources.
In the site root, are also js, xml, images and css folders, each of which contains site wide resources.
The site wide js and css files are rolled up server side and returned as a single js file. The page specific ones, as there is usually only one per page, are left alone.
This organizes my resources as to their scope. And while I may have a dozen js files in the root js folder, they will be returned as one js resource by combining and minifying them server side (and caching the result).
I also am not loading resources specific to pagex when I'm on pagey. The only "waste" might be in the site wide resource file, but since it's cached, and many of the resources WILL be used in multiple places, it's more efficient.