Sent by Dan Rubin on 23 July 2003 19:07
On 7/23/03 10:35 AM, "Alex Jones" [EMAIL-REMOVED]> wrote:
> Style Naming Convention
> - Classes and IDs use mixed case to make them easier to read. In the
> HTML 4.01 spec, classes and IDs are case sensitive; though some browsers do
> not recognize the fact. Elements are left in lower case. * I know this
> one may end up being controversial as naming conventions often tend to be *
I prefer all-lowercase, but I could easily switch, and frankly, mixed-case
seems to be used a lot and it's easy to make a good "case" for it.
> - Do not start an ID or class with a digit or use underscores as they
> may not work in all browsers.
Absolutely agreed.
> - Classes and IDS should never be an adjective or infer placement as a
> future redesign may not place the item in the same spot, or use the same
> background color. So, instead of using an ID of "TopBox", use an ID
> specific to its contents, perhaps "GlobalNav".
We've been moving toward that for a while -- we haven't gone back to fix old
labels, but it makes much more sense for current and future.
As for the structure and organization of the style sheet, here's what I find
works best:
Comment every section -- this is a must, since it leaves a roadmap for your
groupings.
Organize by purpose -- for instance, my style sheets are broken up as
follows, from top to bottom:
Global - body, img, anything else which needs to cascade down to the entire
document
Layout - This is where all the positioning occurs, and is primarily ID's (I
try to restrict Classes to non-layout elements, such as text styles). The
order in this section is very important: everything is ordered to mirror the
document flow of my XHTML (e.g. header, content, footer). This works much
better than ordering Alphabetically (IMO), and it makes more sense
considering the cascading nature of style declarations. Only positioning is
styled here, no text, usually no color unless a background color is set for
an element.
Headings - h1,h2,h3, etc. Variations on each are listed underneath the
primary element style, e.g.
h1 { this:that; }
h1.class { specific:yes; }
#content h1 { more:specific; }
Text - Here I define all text styles (except lists, which get their own
section later on), starting with the basic paragraph style (which is usually
just p { margin:0; padding:0; } ) and then setting more specific styles
associated with ID's (again, following the XHTML document flow from top to
bottom)
Lists - ul, ol, etc. This gets as specific as necessary.
Links - All links are placed here, starting with a, a:link and then getting
more specific, once again following the XHTML document flow.
Forms - All form styles go here.
Misc - Anything else goes here, e.g. acronym, custom span elements if
needed, etc.
This works great for me, and has worked on many different projects, and has
even helped with problem solving: since the CSS flow (within groupings)
follows the XHTML document flow, it's easy to figure out parent/child
relationships, and grouping by type allows me to quickly locate an element
in the style sheet (which is a tremendous help in larger style sheets)
Regarding specificity: I think elements need to be listed from least
specific to most specific.
Cheers,
-D
--
dan rubin
superfluous banter: small talk blog.
<http://superfluousbanter.org/>
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
