It may be a bold statement, but I believe that modularity is the way forward. By that I mean writing modular code will coax us into writing reusable and higher quality classes and functions. This feeling is present when writing backend or frontend code, the problem is that modularity in the frontend can feel a little alien at first.
When you go to release your project you can run your code through the RequireJS optimizer (r.js) to concatenate and minify your modules into a single file. You end up with your minified code, MooTools and the Facebook SDK loading at the same time. This can prove faster than a single file a lot of the time.
Now this is a bit different. You do not use a library to load CSS files in parallel and you don’t have to export selectors with a call to something like
@define, this is more of an underlying guide or technique than a CSS framework. The core ideas of this can be found in OOCSS. The core idea found in that wiki is that you should separate your structure and skin of your site. I could not agree more.
Everyone does it. By the end of a project you have a thousand line CSS file with comments stating what each section is for (forms, menus and links for example). Over time those lines blur and you end up with stuff all over the place and an unmaintainable monster of a stylesheet. By splitting your styles into many separate files and module directories you can stop all that. And by separating structure and skin you can reuse the structure of certain elements such as menus with the skin of another project.
To create this modular CSS I recommend extensive use of the
@import statement. Usually I would cry “burn the heretic!” if I heard someone recommend that, but then I found out that the RequireJS optimizer can also be used on CSS. So while in development you can use
@import to make managing your CSS easier. and just before you upload you can run it through
r.js to concatenate and minify your CSS. Here’s the directory structure that I am now using which is specified by OOCSS.
1 2 3 4 5 6 7 8 9 10 11 12
I also create a file called
loader.css this just contains the core import statements. Then in turn the other files cascade down importing anything they need to function. Once you have written your CSS using the format above then you can flatten it down to one file like so.
1 2 3 4 5
Not too bad eh?