HTML and CSS Reference
This is a fairly extravagant example, and you can feel free to create whatever delimiter style
you like, but there's no doubt this would get noticed among a sea of CSS rules as you scroll
through your style sheet.
It is important to note that comments still get sent to the site visitors. Because of this,
fancy flags with many characters will slightly increase the file size of your style sheets. Also,
a savvy web user can view your style sheets and read these comments, so be sure not to include
anything that is private.
Perhaps an even more novel way to use these sort of comment flags is by creating a unique
string of characters within them that you can search on within your text editor. Doug Bowman
of Stopdesign popularized this idea in a 2005 blog post ( www.stopdesign.com/log/2005/05/03/
css-tip-flags.html ) with the following flag:
/* =NAVIGATION STYLES */
By using a flag like this, it's simple to “tab through” your groupings simply by searching for
/* = over and over again. Or, if you are looking specifically for the navigation style section, you
can perform a search for /* =NAV to jump very quickly to this part of what promises to be a long
document. Or, you could repeatedly search for = (which is almost certainly not going to show
up elsewhere in a CSS document) to tab through your sections. It's a clever, creative use of CSS
comments, and has since been adopted by many designers and developers.
Ordering CSS Rules
There are several schools of thought on the ordering of your CSS rules within a style sheet.
There's no “right” way to do it, so like with many things in this chapter, you'll need to figure
out what works best for you. We'll outline a few common techniques here.
General to Specific
One common approach is to start with rules that are more general (i.e., will apply to more ele-
ments or to the entire page) and follow those up with rules that are more specific (applying to
fewer elements). For example, you may start with a bunch of rules using element selectors to
style (X)HTML elements like body , header, paragraphs, lists, tables, forms, and so forth. These
general rules will apply throughout your document(s). Then, you can get a bit more specific,
perhaps styling (X)HTML elements within certain div s using descendant selectors. Finally,
you could get quite specific, styling things like individual tables (by their id ) or types of lists
(by their class ).
By Order in Which They Appear
Some designers like to order rules in relation to the order they will physically appear on the
final page—for example, starting with styles for the header, followed by styles for the main
content area, and finishing up with styles for the footer. Note that this method can break down
somewhat when you start creating style sheets for alternate devices, such as print and mobile,
particularly when you are hiding some elements of the page for those mediums.