Sent by Alex Jones on 23 July 2003 14:02
I've been trading e-mails with a colleague for the last few days and he
asked if there are any CSS methodologies available. While I have practices
that I consistently follow, I do not know of any that are wide-spread or
commonly accepted as the best way to set up and maintain style sheets. So,
does anyone know of a good methodology already in existence? If not, anyone
interested in assisting me as I begin to document and revise one?
In case there aren't any, here are a some of the practices I follow. Please
feel free to let me know of poor decisions in my methods, and suggest new ones!
Style Sheet Organization
- Classes, IDs and elements are listed in alphabetical order unless
otherwise noted. The properties of each class, element and ID are in
alphabetical order as well. So the "acronym" tag comes before the "body"
tag which comes before the "price" ID in the stylesheet. I find this makes
it much easier for me and other developers to locate specific items within
the stylesheet quickly.
- The link pseudo-classes are grouped together, but do not follow the
alphabetical organization within that grouping as some browsers will use
the last pseudo-class listed, even if the more accurate one is listed
earlier. Rather annoying.
- When possible, elements should be grouped if they have a common
attribute, or set of attributes. An example would be to assign the same
font to the "body", "p", "input" and "td":
body, input, p, td {
font: small Georgia, Garamond, "Times New Roman", serif;
}
- When possible descendant styles should be used to cut down on the code
in the style sheets. Below is an example of applying a specific style to an
input element within a form with an element that has been assigned the
"Purchase" class. Example:
.Purchase form input {
border: 1px solid #654819;
height: 18px;
}
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 *
- Do not start an ID or class with a digit or use underscores as they
may not work in all browsers.
- 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".
Thanks!
Alex
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
