HTML and CSS Reference
In-Depth Information
As for the style rules, they should be grouped into sections, and each section should
be labeled with a distinguishing comment. This grouping and labeling enables you to find
what you need much more quickly. The sections you need depend on the site, but here
are some example sections:
/* === Normalization === */
/* === Primary layout === */
/* === Secondary layout === */
/* === Tertiary layout === */
/* === Navigation === */
/* === Text-related === */
/* === Links and images === */
/* === General styles === */
/* === General classes === */
/* === Miscellaneous === */
The equal signs after the section name help visually distinguish the sections from
other comments. They also act as a marker that you can search for to easily traverse
the sections.
With large style sheets, the section names can be listed as a table of contents below
the metadata, which makes it easier for developers to get an overview of how the file is
organized.
/* Table of Contents
-----------------
Normalization
Primary layout (body, primary divs)
Secondary layout (header, footer, sidebar)
Tertiary layout (page regions)
Navigation (menus)
Text-related (paragraphs, headings, lists)
Links and images
General styles (forms, tables, etc.)
General classes (.clear, .center, etc.)
Miscellaneous
*/
Within each section, you should declare your most generic rules first, followed by
rules with increasing specificity. Your elements can inherit styles, and it is easier for you
to override specific styles when needed.
Another thing to consider is how to structure properties within a rule. A popular
approach is to group the properties according to type. You do not have to label the
groups as in the following example, but it helps if you keep the groups in the same order
throughout your style sheet. Doing so enables you to more quickly scan through the rules
in search of specific properties.
