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

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.

Philip · Accepted Answer · 2012-01-10 19:44:32Z

4

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.

edited Jan 10, 2012 at 19:44

answered Jan 10, 2012 at 19:38

Philip

4,5822 gold badges22 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Seder Over a year ago

That's good but how about making a script to write only the needed codes (CSS & JS ) on fly and then include it ?

Philip Over a year ago

just check to see if the element exists in the document ->> if(document.getElementById(element_id)){run code}, else create a functions.js and make all your calls inline. ie: onclick/onChange etc etc ie: <input onlick="return someFunc(params)" />

Seder Over a year ago

well, that's a good idea I will check it thank you very much

landons · Accepted Answer · 2012-01-10 21:27:09Z

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.

dqhendricks · Accepted Answer · 2012-01-10 19:22:22Z

1

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.

answered Jan 10, 2012 at 19:22

dqhendricks

19.2k11 gold badges54 silver badges88 bronze badges

9 Comments

Seder Over a year ago

I didn't build anything yet just on papers when I reached this I had multiple choices so I wanted experts opinion and for the main files this already included in my plan

dqhendricks Over a year ago

@UserB there are automated build systems that will version your files for you on build, and also optimize them by taking out any white space, and putting them all into one file.

Seder Over a year ago

can you give me details ? to make this on fly in production environment

dqhendricks Over a year ago

@UserB brandonsavage.net/…

landons Over a year ago

Keep in mind that browsers cache these files for a reason. Don't fight HTTP here--you might want to use filemtime() here (though it would create extra stat calls). And ask yourself this question: compared to the time it took to edit the file, how much longer would it take to rename the file with a new version number too?

|

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related