CSS Naming Conventions

Purpose

To provide a central location to discuss naming conventions to be used for both channels/portlets and uPortal themes. Ideally, I think this would become a living/working document that developers could use to:

document current practices
provide a forum to discuss standard conventions for markup and style

Please contribute any comments or additions you may have if this is something you are interested in.

Interested/Contributing Parties

Prior Work

References

Desired Features

Valid XHTML/CSS which supports a broad range of standards compliant browsers, and downgrades gracefully in user agents that do not support css.
Presentation controlled through the use of CSS with simple markup expressing content
Accessibility support (Conformance With W3C Accessibility guidelines?)
Common markup and CSS naming conventions to allow channel developers to produce "widgets" like toolbars, tabular displays, etc. while still allowing individual portals to customize their appearence in a standard fashion.
Support internationalization

Examples

Toolbars

Rutgers has developed a somewhat standard format for toolbars within channels. We've restyled links and form inputs to display similarly, using both the JSR-168 portlet-form-button class, and we've added individual classes to allow decorating specific "buttons" with images, colors, etc.

XHTML

<div class="toolbar">
  <ul>
    <li><a href="#" class="portlet-form-button inbox"/></li>
    <li><a href="#" class="portlet-form-button preferences"/></li>
    <li><input type="submit" class="portlet-form-button delete-selected"/></li>
  </ul>
</div>

CSS snippet was pulled out of our current skin, items may be missing/incomplete

CSS

.toolbar {
	width:100%;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
	background-color:#eee;
	}

.toolbar ul {
	line-height:1.6em;
	list-style:none;
	margin:3px;
	padding:0;
	}

.toolbar ul:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility:hidden;
	}

/* Hides from IE-mac \*/
* html .toolbar ul {height: 1%;}
/* End hide from IE-mac */

.toolbar li {
	display:block;
	line-height:1.6em;
	float:left;
	margin:-1px 2px 0 0;
	padding:0;
	}

.toolbar select {font-size:.8em;}

.portlet-form-button,.uportal-button {
	border-style:solid;
	border-color:#fff #336 #336 #fff;
	border-width:1px;
	background-color:#ccf;
	color:#66c;
	cursor:pointer;
	white-space:nowrap;
	text-align: center;
	font:bold .9em sans-serif;
	}

a.portlet-form-button, a.uportal-button {
	display:block;
	background-color:#ccf;
	text-decoration:none;
	padding:3px 1px 3px 20px;
	margin:2px 0 0 0;
	}

* html input.portlet-form-button, * html input.uportal-button{
	padding:0;
	margin:0px;
	}

a.inbox {background:#ccf url(inbox.gif) no-repeat 2px scroll;}
a.compose {background:#ccf url(compose.gif) no-repeat 2px scroll;}

input.delete-selected {
	background:#ccf url(delete-selected.gif) no-repeat 2px scroll;
	padding:2px 0 2px 2em;
	margin-top:2px;
	}

Tables

Todo.

Expandable Trees

Todo.