tags:

views:

104

answers:

4

Let's say I have css1.css and css2.css. Just for the sake of keeping files organized and small on my file system / Source control I would like to split them up however in my content, I still want to use all the definitions in both files.

Rather than link reference both in my content page, can css1.css just make css2.css available.

+3  A: 

Clearly you can include them all on your page with several nodes, but your best bet is probably a release process script/ant task/automated build process which can concatenate or merge the files based on some manifest or even simply the order of the file names.

You can do other things like compress the css at the same time - automatically optimising files for deployment!

David Caunt
+2  A: 

Assuming both stylesheets are in the same directory, put this code at the top of css1.css.

@import url("css2.css");
bcat
+1  A: 

You can use @import like this in css1.css:

@import url("css2.css");
p { color : #f00; }
Pablo
i believe this is frowned upon if for no other reason than that imported CSS stylesheets have lower specificity which can cause unexpected bugs.
Steven Oxley
@Steven: Are you sure? The CSS 2.1 spec section on cascading (http://www.w3.org/TR/CSS21/cascade.html) says this: "Declarations in imported style sheets are considered to be before any declarations in the style sheet itself." It doesn't say anything about `@import` affecting specificity.
bcat
i'm not entirely positive, but i think i've read that somewhere before. I haven't been able to find it again so I guess you should consider it false until proven otherwise.
Steven Oxley
A: 

I have seen that a lot; the import url("css2.css") feature so it is definitely a way to achieve your objective.

Henry