Page 1 of 1

Including multiple stylesheets in one css file and good css files hierarchy Rate Topic: ***** 1 Votes

#1 gregwhitworth   User is offline

  • Tired.
  • member icon

Reputation: 221
  • View blog
  • Posts: 1,613
  • Joined: 20-January 09

Post icon  Posted 21 March 2009 - 11:13 PM

Are you tired of building css style sheets with hundreds, maybe even thousands of lines of styles? Would you like to break up the style sheet into different sections? Well here is my style sheet break down:

- Layout : This defines the structure of the website
- Fonts : Anything typography set - goes in here
- Classes : This is where all classes go (only if they are un-associated with other sections ['layout, fonts'])
- Images : All image settings go in here

This allows you to jump right into the file needed to change the element you're working on. If it's an <H1> tag, then you know to jump into the fonts.css file. This may seem obvious, but I have had to clean up multiple sites because all of the styling is in one document and not commented out.

Like all programming languages, if it isn't obvious what the style is doing - then explain it in a comment:


So now we have 5 different (at minimum) style sheets to include in our HTML document, which would look like this:

<link type="text/css" rel="stylesheet" href="../layout.css" media="screen" />
<link type="text/css" rel="stylesheet" href="../fonts.css" media="screen" />
<link type="text/css" rel="stylesheet" href="../classes.css" media="screen" />
<link type="text/css" rel="stylesheet" href="../images.css" media="screen" />
<link type="text/css" rel="stylesheet" href="../print.css" media="print" />

As you can see - that stacks up quite a bit, and can be kind of in the way. So let's make it so that there is only two links:

<link type="text/css" rel="stylesheet" href="../all.css" media="screen" />
<link type="text/css" rel="stylesheet" href="../print.css" media="print" />

Now you have only 2 linked style sheets, but what happened to all of our styles then - well we create an 'all.css' file that links to all of the other ones. This allows you to continue your cascading without having to place includes at the very bottom of css files (which can be hundreds of lines long).

SO tell me how to include already! Put this in your all.css file

@import 'layout.css';
@import 'fonts.css';
@import 'images.css';
@import 'classes.css';

This is a great setup, especially if you have many people working on the site. Hope this helps.

Is This A Good Question/Topic? 0
  • +

Page 1 of 1