Standardized Style Names

From CSS Discuss

Jump to: navigation, search

This page is meant more as a question or a survey than it is a specification. I hope at least the idea is understandable from my description.

Different CMS-, Portal Scripts , Blog- and Wiki Ware typically come with their own set of templates and their own understanding of how CSS should be used. That is, they all use different names and identifiers in class= and id= attributes for parts of the rendered page that are common to all of them (or at least very similar).

For example, often pages can be dissected into following parts or contain some of:

  • site title and logo
  • breadcrumbs
  • site navigation / menu
    • top menu vs. side menu (sometimes there's two, but usually this should be influenced via CSS)
  • the current page title (blog entry, wiki page, portal module)
  • text (the real content)
  • sidebars
  • comments
  • surveys
  • the Edit This Page-link in Wikis
  • backlink to the home page
  • the search-this-site-form

While some or all of these are common to many web sites and web site backends (blog, cms, portal or wiki); they all have different understanding of how to mark it up (by means of using senseful class= or id= identifiers). See examples below.

XML is meant as base for designing different document structures for data representation, and there are a couple of agreed formats (which boil down to standardized tag names). Not so with CSS. Every designer and web author invents (and rewrites and reinvents!) class= and id= identifiers for each new web site. While professionals may have their personal favorite naming scheme OSS programmers have yet to agree on the common naming standard for site layouts.

Admittedly, one cannot seriously create a stylesheet that would work for every site and all content out there; but this idea is only about creating a naming scheme for the many, many divorced layout templates shipped with all the CGI/dynamic-content scripts out there. Of course the common naming scheme wouldn't make stylesheets exchangeable automatically, because there are different "templating engines" in use in different cms/portal/blog scripts, but on the other hand, with a concrete stylesheet and CSS identifier naming standard all templates would reduce to a few <div>s and <span>s with %CONTENT place holders typically.

Of course, such a common naming standard wouldn't automatically create templates that are transferable from a blog to a shop script, because one wouldn't usually provide the positioning instructions (padding, font-size, margin, border, color) for '<div class="article">...<span class="price">...</...' in a template for a weblog system. But the general stylesheet instructions (logo, background for page head, font size and color in real page content, navigation menu position:ing, ...) would be transferable nevertheless.

If such an agreed-on stylesheet identifier (class=) naming scheme existed, this also didn't mean all pages would look equal according to a dozen "standard-stylesheet-templates" floating around. On the contrary, sites and web site backends still could override fonts/sizes and general layout attributes like padding: and margin: for typical content elements.

A last thought: there is no need for the one and only real naming standard; but it gets silly if we had a dozen of them (even if this was better than the 271 the web suffers from currently).

What would it look like?

No idea. But certainly the naming needs to be general enough to work for sites that (for example) used to have one background behind what typically is the "inner content box".

To design a common naming scheme, one probably first needs to create an empty page containing nothing but empty <div> containers, which reflected the common elements among most CMS, portals, weblogs and wikis; and were nested sensibly. Within the phrase "nesting sensibly" lies the trap of truly allowing all common layouts. The identifiers needed also to be general enough, that they even work without the traditional nesting of, say, '.navigation-bar' inside of '.content-box'.



This is far from "the CSS identifier standard". I won't even try. It's just to fill this page.

side bar elements

  • .side-bar
    • .side-bar.left (??)
    • .side-bar.right (??)
  • .navigation-bar
  • ...

page layout boxes

  • body
  • .page-head
  • .page-body (the definition of what refers to what part of a page made a 'CSS naming standard' first interesting)
  • .content-body
  • .real-content (there's so much possibilities, hence this page on Standardized Style Names!)
  • .page-footer

Michael Meadhra/ makes an arguement over presentational vs structural naming, & Andy Clarke has a table of many examples.

The web is full of divorced identifiers, and bad examples

Comparision of Php Nuke, Word Press , Media Wiki , Scoop, Moin Moin , Zope(wrongcat?), Post Nuke , PSlash, Php Wiki , Back End , Phorum, PhpBB, Geek Log , Erfurt Wiki , MT, e107, Drupal, ... (and OSCommerce to have a really, really, really bad example on how not to do it)

... (coming soon)

Microformats anyone? - Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.

Google Code: Web Authoring Statistics

Google recently (Dec. 2005) scanned a big lump of their (X)HTML web-index for statistics regarding the use of different HTML elements, headers, tables, scripting, CSS classes, etc. Thought it would have some relevance to this page:

Have fun!

Personal tools