Best way to represent CSS & JS files for a big project - php

Question

What is the best way to represent CSS files for a large project
I am using CodeIgniter and there would be 100's of views and almost of them have different structure so I have a lot of options here but I don't know what is the best one so please help
Make a single file for CSS and single file for JS
Make a CSS file for each view and JS for each view
Make a simple database table to hold the associated files for
each method
for example
id ----- method_name ---- files (I will normalize it )
1 /test/first first.css,first.js
and so on
or make a PHP function get the associated files as text from PHP
for example
<?php
function get_assoc($view)
{
switch($view):
case '/test/first':
echo "<script>alert(); </script><style>p{font-weight:bold;}</style>";
break;
endswitch;
}
?>
Also what about caching? Performance is a big factor.
Thanks.

Answer 1

I like to seperate each section reset/typograpy/forms/tables, this way I dont get lost. Dont be afraid to use as many different files as you need ( for development purposes ).
Once your ready to go into production/live mode, grab the "build tool" from "html5boilerplate" and compress all your css into one file, same for js. This will also minify your code and cache your files. just keep your un-compressed files handy incase you need to do a major edit
<!-- CSS -->
<link rel=stylesheet href="assets/css/reset.css" >
<link rel=stylesheet href="assets/css/typography.css" >
<link rel=stylesheet href="assets/css/tools.css" >
<link rel=stylesheet href="assets/css/tables.css" >
<link rel=stylesheet href="assets/css/forms.css" >
<link rel=stylesheet href="assets/css/plugins.css" >
<!-- Script -->
<script src="assets/js/modernizr2.0.js"></script>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/tools.js"></script>
<script src="assets/js/tables.js"></script>
<script src="assets/js/forms.js"></script>
<script src="assets/js/functions.js"></script>
I then like to wrap each (js) file as an object, again this helps with readability.
example:
(function($){
var ToolsObj = {
init : function(){
this.tooltip();
this.tabs();
this.pagination();
this.alerts();
this.dropdowns();
this.lightbox();
},
tooltip : function(){
//tooltip code
},
tabs : function(){
//tabs code
},
pagination : function(){
},
alerts : function(){
//alert messages code
},
dropdowns : function(){
//dropdown-menu code
},
lightbox : function(){
//lightbox code
}
}
$(function(){
ToolsObj.init();
});
})(jQuery.noConflict());
Hope this gives you some insight into my workflow.
You may also want to check if each element exists in the document before running the objects.

Answer 2

Database = no
Don't use the database for this. The CSS/JS files needed to display a view are directly tied to the source code, so keep that info in the source (particularly if you're using an SCM like Git or SVN).
CSS/JS = presentation
As these files are related to presentation/UI, I'd recommend delegating the "responsibility" of loading them to the views themselves. The controllers & models shouldn't have to "know" anything about the CSS/JS required to display the view.
Be modular
Organize the files into discrete modular units. Don't have a separate CSS/JS file for every view UNLESS you truly have completely separate functionality on every single view. The more you share these files among views, the better off you'll be.
Leverage caching, rather than fighting it
I know it's a pain in the ass to rename a file every time you modify it, but it really is a good approach. Using cache invalidating approaches (like URL?time=...) simply puts extra strain on the server and clients for no good reason. Just take the two seconds to rename your "styles.css" file to "styles_v2.css". You'll thank yourself later. (And remember, you don't have to rename it for every single dev change--only when it's stable enough for QA / production).
Premature optimization = root of all evil
Finally--and most importantly--NEVER PREMATURELY OPTIMIZE! I've seen way too many people minify and gzip their asset files all the time, only to have them overhauled a few days later. Either create a true build process, or wait until things stabilize to worry too much about the fine tuning.

Answer 3

Do you already make a page database call to figure out which views should be used etc? May want to have a main js and css that would be used for all pages, then individual ones linked via DB that are specifically used only by certain views.
As for caching... These files will be cached by browsers as long as they have the same request name. I typically auto-version these with a view method that looks something like:
function autoversion($filename) {
$time = filemtime($filename);
return $filename . '?v=' . $time;
}
If you have a build system that can version these files for you, you will get a small performance gain.