HTML and CSS Reference
In-Depth Information
By Page or Section of the Site
Another common technique is to order rules by page, section, or page type within the site. For
example, a style sheet for a newspaper site may include a grouping of rules for the homepage,
followed by a grouping for front pages of each section (sports, opinion, etc.), followed by rules
for individual story pages. A personal site may contain a group of rules for the homepage, then
one for the “about me” page, and then one for the blog.
Note that all of these techniques can be combined as well. You may wish to group your rules
by section of the site, and arrange those sections by the order in which they appear within the
site, and order rules within the sections from most general to most specific.
Creating a Reusable Framework
As you develop sites using CSS, you will undoubtedly find yourself doing the same things over
and over again. You'll separate your CSS into the same four or five files, you'll use the same
handful of flags for grouping your rules, and you'll store everything in the same basic directory
structure.
Frameworks are all the rage these days, with application frameworks like Django and
Ruby on Rails and JavaScript frameworks like Prototype and the Yahoo! User Interface Library
(also referred to as the YUI library.) But what is a framework, really? At the most basic level, it's
nothing more than a collection of useful bits of code that encourage best practices and make
it faster and easier for you to get a web site bootstrapped and up and running.
You can do the same thing with CSS. Create site-agnostic, generic versions of the core files
and rules you find yourself using repeatedly. Save them in the directory structure you usually
use for a site. Then, simply copy the directories into your latest site and modify them accord-
ingly. This sort of reusable package can save you from having to perform a lot of the mundane
tasks required to get a site started.
The Mass Reset
If you've used CSS for web development in the past, you've probably noticed that some incon-
sistencies exist between the various browsers with regard to the way they display elements by
default (i.e., without CSS styles applied). Certain things are pretty reliable: paragraph elements
can usually be counted on to have
margin: 1em 0
applied by default, and you can safely expect
the strong element to get
font-weight: bold
. However, several elements are styled inconsistently
across browsers, especially in certain areas such as forms.
A technique most CSS designers and developers seem to be adopting is the “mass reset,” in
which default styles are eliminated before any of your custom styles are applied. This, of course,
forces you to explicitly style things that might otherwise have been done for you, but it also gives
you a clean slate to work with—one that you can count on to be the same across all browsers.
This technique was popularized by Eric Meyer when he wrote about it in his blog (
http://
meyerweb.com/eric/thoughts/2004/09/15/emreallyem-undoing-htmlcss/
), following up Tantek
Çelik's similar entry (
http://tantek.com/log/2004/09.html#d06t2354
).
Some designers take the approach of unstyling only those elements that are normally styled.
For example, designer/developer Faruk Ates made the following file, which he calls
initial.css
(available at
http://kurafire.net/log/archive/2005/07/26/starting-css-revisited
).
According to Faruk, the “file neutralizes a lot of default (browser) quirks.”
