Cascading Style Sheets, when used properly, do a great job of tidying up messy HTML. But, have you ever felt like your CSS need some refactorization of its own? And sometimes, as part of that refactoring, it would be nice to split your CSS into multiple files - but now you're thinking to yourself, "Well, that's no good, now I'll have some CSS files that depend on others and I will need to remember what needs what when I'm writing new html pages." Fortunately, the designers of CSS felt your pain, and so added the @import rule into CSS2.
The @import statement does almost exactly what you might expect. It causes whatever CSS file is referred to in the @import statement to be used in the determination of the final styles that will be applied to the elements in the html document. The CSS file being referred to can be any url path - it can even refer to a CSS file on a completely different domain!
So what does the use of this @import statement look like? It is actually really simple:
It can also be written without url() around the name:
And just like with the standard syntax to include a CSS file in an html page, you can specify the media type:
@import url("myBaseScreenStyle.css") screen;
So in this case, when the CSS parser is ripping through the file, it will check the media type of the import against the media type the page is being rendered for. And if the media types don't match, it won't even bother downloading the file.
One thing to note - any @import statement must come before any rules in a style sheet. This generally means that the import statements should be the first lines in your CSS file. The constraint makes it easy to reason about what the styles being imported will do. For example, say CSS file A is importing CSS file B. File B has a rule that sets the padding on table cells to 5 pixels. However, file A has a rule that sets padding on table cells to 0 pixels. The rule from A is what will actually get applied, since file B gets applied first (because it is the import) and then the rules from file A are applied on top of that.
One thing that I like to use the @import statement for is for including a reset CSS style sheet (for example like the one here). This way, I don't need to clutter up my specific style sheets with the reset code, and I only need one copy of the reset code in one place.
And that is all for importing style sheets using the @import statement. A nice short tutorial for a simple but useful concept! As usual, feel free to leave questions and comments below.
Delicious
