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:



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:



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



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