Rare Pleasures

For a web developer, writing domain descriptive class and id attributes occasionally means tackling the question of what approach to take with white space word separation. The issue arises more often with id attributes than class values because the id attribute only excepts a single string value. But for both ids and classes, the decision around attribute naming should come from an understanding of the document’s semantic content. Discussions regarding word boundarys have tended to focus around the four basic options: collapsing the whitespace, CamelCase, hyphenation or underscore separators.

Hyphens and underscores definately feel quicker and easier to decipher than both the collapsing and CamelCase models:

• .asuitablydescriptionclassnamevalue
• .a_suitably_description_class_name_value
• .a-suitably-description-class-name-value
• .aSuitablyDescriptionClassNameValue

Readability is important. As programmers in other languages have found it can have an considerable impact on the maintainability of a project’s code base. It also has the benefit of revealing to the designer where there might be suitable points for spitting up class selectors into two or more separate values:

• .a_box_for_introduction_text =>  .a_box .introduction_text

• .a_box_for_pull-quotes       =>  .a_box .pull-quote

Hyphens and underscores also have the distinct advantage that they’d be significantly easy to extract and separate in situations where you are attempting to parse them with client or server side scripting.

#these_values_need_parsing_out

• .onetwothree
• .one_two_three
• .one-two-three
• .oneTwoThree

Underscores have the possible advantage that they’re non ambiguous, unlike hyphenation where the separator could represent a space, a subtraction operator or a lexical hyphen:

• #a_buffoonery_of_orang-utans
• #a-buffoonery-of-orang-utans

With underscores it is also slightly easier to distinguish between regular class name values and Pseudo class names:

• #thelastchild:last-child
• #the_last_child:last-child
• #the-last-child:last-child
• #theLastChild:last-child

Another consideration is the use of the id attribute as a fragment identifier. Where these identify editorially significant sections of the document, primary metadata or material such as transcluded resources, its important to remember these ids have connascence with URIs. In such situations one may apply the same logic used in choosing the url to the selection of the id/fragment identifier.

The growth of weblogs have seen a proliferation of ‘human readable’ URL slugs that favour hyphens as word boundary separators. Their growth means there is significant precedence for adopting the hyphenated approach. Meanwhile amoungst the Linked Data community both underscores and hypenation are in common use with resource indentifiers. Hyphens are moderately easier to read in the context of a URL and the user may see some usability improvements with the use of hyphenation.

One final point. Arguements regarding the readability of fragment identifiers should not be taken as an advocacy of nested urls based around the subject’s ontology. Because whilst it’s the role of a URI to identify a resource, and a resource should say how it fits in, its not the role of URIs to expound the ontology. Instead adopt a simple flat URL scheme based on the core domain concepts.