A commonly recommended practice in web design is to break up your main stylesheet files. One file handles the form of the site - position, spacing, etc. Another file contains all the markup related to the visual design of the pages - typography, coloring, etc. In building terms, the first file is the architecture, the foundation, and the framing. The second file is the choice of finishes and paint selection.
The structure is separated from the style. The classes are split among the files, reducing their size and (hopefully) making the css files more readable.
structure.css
.heading {
margin: 2px;
padding: 5px;
width: 700px;
position: relative;
z-index: 3;
}
visual.css
.heading {
background-color: #003333;
color: #aaaaaa;
font: Rockwell;
font-weight: bold;
text-align: center;
}
As usual, this approach works much better in theory than in practice.
The immediate frustration is determining what markup falls into which category. Sure, font-family and background-color are clearly visual markup. And position, margin, and padding are obviously structural. What about line-height? It is typographical markup, but it handles spacing. Which file should it end up on? There are a couple other 'tweener attributes - list-style, overflow, etc.
Once you solve which attributes go onto which files, you'll discover that managing two files is just tedious. An extra step has been added to the initial design process. Once you get the markup right, you have to make sure it has been broken up correctly. Another extra step is possible once you start wondering why you are breaking up the markup in the first place.
"Why am I are making this extra effort?"
It sounds lazy and stupid, but simply keeping track which file you are looking at while debugging is a pain. You will find yourself wondering if you changed the right attribute as well as the right file. Basically, the two file approach will have you asking "Why am I are making this extra effort?". I have not seen a good answer to that question beyond "two files sounds like a good idea".
In contrast, the benefits of one file are evident. If you have a css problem, you know where to look. All the markup is contained on one file. From a server perspective, one file will get downloaded once and cached.
Given all that, my recommended CSS best practice for web design is to keep all the markup on one file. Use comments to organize the file into sections and keep things readable. Minimize and gzip for server performance. But keep all your CSS on one file.
