Copy & paste the code below to embed this comment.
LeMel LeMel
On HTTP connections vs. stylesheet size, what’s wrong with using @import in a CSS 2.0 world? Cascading is supposed to be a core feature—it’s the ‘C’ in CSS after all.
For the framework I built for our developers, there is a basic.css. More advanced stylesheets import the BASIC.css. Some have multiple imports to other css ‘modules’, for example, TOOL.css imports BASIC and GRID (GRID imports TABLE), while GUIDE.css which doesn’t need GRID only imports BASIC and TABLE.
As long as you keep the functionalities simple and nested, developers only see a few choices (TOOL, GUIDE), and the cascade logic takes care of the rest, while giving me the ability to add new modules or styles only where needed without steadily increasing BASIC.
I’m sure some more advanced folks will let me know why this is bad somehow, but it has worked here for a few years in our (admittedly homogenous) environment (an intranet).
As many others, I really like to keep it minimal. But even at minimal, I tend to use at least three CSS files. Basics, IE fixes and then the rest. I’ve never used a framework and probably never will. Good article tough, many points i’ve not know of. Thanks!
I know it’s been a while since you’ve written this article, but I wanted to tell you thanks for taking the time to share your experience. We have been getting a lot of requests for larger MVC sites that are very complex from a GUI perspective (not to mention the programming aspect), and we are definitely seeking an optimal approach with our CSS and designs, as we’ve been spending a lot of time looking at each other’s CSS and going, “huh?” and “what the …”.
You said:
Have a server-side process that dynamically flattens the individual files into a single response. I’ve not seen this done, but it could be very efficient if done well.
Actually Google Pagespeed project supplies code that can be used to flatten and minify your css into a single request.
55 Reader Comments
Back to the ArticleGeorge Huger
I really enjoyed this article, and immediately wanted a solution for concatenating all my css files. Basically I wish @import had less side effects.
So I wrote one, and made it public for anyone else who wants to use it:
http://www.georgehuger.com/cssAutoLoad
10KB PHP file and 2 lines of .htaccess, and you’re off to the races. Supports caching, basic compression, and even a little debug.
I’d like to hear feedback, as I’m new to this sort of thing. Thanks again for the inspiration.
Cheers,
George
LeMel LeMel
On HTTP connections vs. stylesheet size, what’s wrong with using @import in a CSS 2.0 world? Cascading is supposed to be a core feature—it’s the ‘C’ in CSS after all.
For the framework I built for our developers, there is a basic.css. More advanced stylesheets
import the BASIC.css. Some have multipleimports to other css ‘modules’, for example, TOOL.css imports BASIC and GRID (GRID imports TABLE), while GUIDE.css which doesn’t need GRID only imports BASIC and TABLE.As long as you keep the functionalities simple and nested, developers only see a few choices (TOOL, GUIDE), and the cascade logic takes care of the rest, while giving me the ability to add new modules or styles only where needed without steadily increasing BASIC.
I’m sure some more advanced folks will let me know why this is bad somehow, but it has worked here for a few years in our (admittedly homogenous) environment (an intranet).
Peter Michael
As many others, I really like to keep it minimal. But even at minimal, I tend to use at least three CSS files. Basics, IE fixes and then the rest. I’ve never used a framework and probably never will. Good article tough, many points i’ve not know of. Thanks!
bobro
I know it’s been a while since you’ve written this article, but I wanted to tell you thanks for taking the time to share your experience. We have been getting a lot of requests for larger MVC sites that are very complex from a GUI perspective (not to mention the programming aspect), and we are definitely seeking an optimal approach with our CSS and designs, as we’ve been spending a lot of time looking at each other’s CSS and going, “huh?” and “what the …”.
Your article is just what I was looking for.
jeffsturgis
You said:
Have a server-side process that dynamically flattens the individual files into a single response. I’ve not seen this done, but it could be very efficient if done well.
Actually Google Pagespeed project supplies code that can be used to flatten and minify your css into a single request.