Organizing Your CSS Files
Category: CSS | 694 views | 2 Comments |
Order Your CSS Sensibly
The first thing you should remember is that the first letter in CSS stands for “Cascading”. This means that the styles that are applied to a document are applied in a cascade - something like a waterfall. As the browser reads through the document, the last properties that are defined are the ones that take precedence (with some exceptions). That means that you should order your CSS document to take advantage of that cascade. Put the most general properties first, and your most specific properties last.
General CSS Properties
CSS properties that I like to think of as “general” are ones that cover the most elements on your pages. For example, on a Web site, usually you would define the default font family, color, and size, as well as the background color and/or image, and page margins. These style properties you should put first in your stylesheet to define your entire site. For example:
html, body { margin: 0px; background-color: #fff; }
p, h1, h2, h3, h4 { font: .8em Arial, Helvetica, sans-serif; color: #000; }
h1 { font-size: 1.5em; }
h2 { font-size: 1.2em }
h3 { font-size: 1em; }
h4 { font-size: .8em; }
This insures that even if you have no other definitions on a page, they will have the same background color and font as the rest of your site. General styles are styles that are applied when there is no other specific information about the element. Read more…
