Using @import statements to manage CSS stylesheets

I favor using CSS stylesheets to manage all of the presentation and formatting (font, color, spacing, etc.) of my web content.  Had that nice separation between content and presentation that works so nicely.  I also like to make sure that my CSS stylesheets are W3C compliant.
One of my favorite tricks is to build into my web pages a link that will check the HTML page and the CSS stylesheet using the W3C validators.
However, one problem I find is that the convenient way to check the CSS for a website is to put all of the CSS into one file but the most convenient way to organize by CSS for a large site is to use separate files. 
For validating the CSS, you want to put all of the CSS into one file.  This makes it easy to create a link that will validate that file using the W3C validator.  Putting everything in one file means you only have to have one link to test the CSS for a site and also makes sure that everything gets tested.
Under the "everything in one file" strategy, you end with a single declaration in the <head> region of your page that imports the CSS file
... link href="default.css" type="text/css" ...   
However, for a complex site it is more common to have separate CSS files - e.g. a file with the CSS for the default HTML tags, a file with the CSS for the header content, a file with the CSS for menu, etc.
It is easy enough to attach multiple CSS files to your HTML content - you just have to use multiple link statements in the block. For example:
... link href="default.css" type="text/css" ...   
... link href="menu.css" type="text/css" ...   
... link href="footer.css" type="text/css" ...
The problem here is validation. If I want to make sure that all my CSS content is valid, I have to validate each of these .css files separately... or do I?
I've found that the way to get the best of both worlds is to take advantage of the CSS @import statement. Using this approach, I continue to keep my CSS content into separate, manageable sized, files - default.css, menu.css, footer.css, etc. Then I create a master CSS stylesheet that imports each of those separate files.
@import "default.css"
@import "menu.css"
@import "footer.css"
The master CSS file can be attached to the HTML content with a single statement
... link href="master.css" type="text/css"
This master CSS file can also be validated by the W3C validator which is smart enough to process all of the included content - i.e. an error in either footer.css or menu.css would be reported.
What is the catch? The @import statement is a fairly modern CSS construct and it isn't supported by all browsers. It is supported by the latest versions of Internet Explorer and Mozilla.

No comments: