In Appleseed[1], I mapped CSS component views, and foundations. Foundations are layouts of components, and describe the whole page. Views describe a specific view of a component.
So, basically, if I have a component "example", with a view "list", then I can create a file in the default theme:
themes/default/styles/components/example/list.css
It will only get loaded into the <head> if the list view of the example component is loaded. I do similar things for the client-side Javascript.It is good that people are working towards figuring out these patterns, though. The sooner we can move away from the wild west of spaghetti css and javascript, the better.
You don't have to, though. You can put everything into a single global css file, and be done with it.
And I haven't implemented it, but I can immediately see easy ways to package it all up into single files that can be easily cached.
It's easier to consolidate the files programmatically after they've been logically separated, than to logically separate out of a monolithic location.
This can be a pain. Better to decouple your css from the backend.
But my gut feeling is that it doesn't matter. While I don't have any experimental data, I have to imagine this rendering penalty is in the noise of page/site performance. Asset packaging, gzip, using front end static server, etc are probably orders of magnitude more important for page rending speed than DOM traversal of CSS selectors.
any data on this?
http://www.stevesouders.com/blog/2009/06/18/simplifying-css-... (Steve is a pretty authoritative source for web optimization.)
tl;dr: avoid selectors that end in * and you should be fine.
There are a few reasons:
1. It makes more conceptual sense. The javascript relates to html (which is generated by the template), not a controller action.
2. You will probably want to reuse templates across different controllers. Also partial templates can have reusable behavior.
3. It is easier to move between the associated javascript + template
4. Refactoring is easier, especially with html gotten via AJAX