Absolute Orange Web development, only better

Written on Wed, 01 Jul 2009
By Amy Varga

Amy Varga takes a look at two recent developments in CSS namely the concept of object oriented CSS and the semantic naming of classes and ID's, finally she makes some suggestions of how to best write CSS.

During a recent contract I came face to face with ‘the CSS nightmare’.  Huge websites with multiple style sheets using complex specificity to assign styles to elements.  The result was inconsistent styles across various sections of the website, lengthy style sheets and more development hours then was necessary.

Realising there was a problem I needed to find a solution.

Object oriented CSS

Object oriented CSS works in a similar way to Object Oriented Programming (OOP):

• In OOP objects have their own class definitions.  In CSS, selectors (element type selectors, class selectors, ID selectors, attribute selectors and pseudo-classes) have their own style declarations
• In OOP classes inherit each others methods and properties.  In CSS inheritance and the cascade determine which style declaration should be applied to any given element.

  Inheritance is the means by which, in the absence of any specific declarations applied by the CSS cascade, a property value of an element is obtained from its parent element.  Inheritance is a mechanism that’s separate from the cascade: inheritance applies to the DOM (Document Object Model) tree.

  The cascade deals with the style sheet rules.  The cascade combines the importance, origin, specificity, and source order of the applicable style declarations to determine exactly—and without conflict—which declaration should be applied to any given element.

• In OOP classes can be public or private.  Objects automatically inherit public classes.  In CSS, properties that are not automatically inherited from the parent can be inherited by specifying a value or ‘inherit’ for that CSS property, similar to a private class.  Properties that are inherited automatically are similar to public classes.

Properties that inherit:

• color
• font (and related properties)
• letter-spacing
• line-height
• list-style (and related properties)
• text-align
• text-indent
• text-transform
• visibility
• white-space
• word-spacing

Properties that don’t inherit:

• background (and related properties)
• border (and related properties)
• display
• float and clear
• height and width
• margin (and related properties)
• min- and max-height and -width
• outline
• overflow
• padding (and related properties)
• position (and related properties)
• text-decoration
• vertical-align
• z-index

The concept of object oriented CSS is noteworthy.  The principles of the reuse of styles and inheritance / cascade are fundamental in creating an optimal CSS.

Semantic naming of classes and IDs

The semantic naming of classes and IDs is a controversial one.  This concept requires that all classes and IDs be named according to their meaning or role within a web page.  Unfortunately only web developers, designers and author benefit from semantically named classes and IDs.  Web page browsers, screen readers and search engines do not use classes or ID’s to gain more information about a web page.

The benefits to web developers, designers and authors are:

1. Semantically named classes and IDs give more meaning to a web page
2. Semantically named classes and IDs can be stylistically changed in the CSS without having to be renamed in the HTML page

The disadvantage of semantically naming classes and IDs is that it in some cases there is no  logic in naming it semantically.   Yahoo Grids and Blueprint CSS are both CSS frameworks based on grids and both frameworks name their classes based on their presentation.  For example, Blueprint’s <div class=”span-24”> relates to a <div> that spans the entire 960px over 24 columns.

The semantic naming of classes and IDs have their benefits and should be encouraged however, when there is no logical reason to name an element semantically when a name relating to presentation may be more appropriate.  For example, a rounded corner <span> may be named roundedCornerTopLeft.

How to write your CSS

1. Create an element type selectors library
   Defining the design of all HTML elements during the initial stages of web development ensures that all elements that make up a web page, visually communicate their semantic meaning in relation to each other.  It also sets the basic inheritance properties for elements with no further declarations.
2. Define style templates for repeated designs within a web site
   Defining a style template for repeated designs within a web site ensures that they can be consistently and easily repeated throughout the website.  When defining style templates carefully consider redundancy vs dependency.  Should a style be repeated across different class selectors so that a design change in one does not effect all the others?  Or should they be dependent resulting in a design change affecting all associated elements?   In this case you may also consider using  multiple classes to achieve your design.
3. Minimise the use of specific selectors wherever possible and when using them, reference them as specifically as possible.
4. Carefully consider the proximity of the cascade
5. Always consider progressive enhancement and graceful degradation when styling.  For example if your design has rounded corners use the Mozilla and Webkit rounded corners styles.  However, also consider the best way to implement rounded corners in other browsers as well as a design without rounded corners.
6. Remember to check how your page looks with CSS disabled

Comments

At Tue 1st Dec 2009 07:26:35, outrapunsanny (streamtvonline@gmail.com) said:
nice answers i like it

At Tue 29th Dec 2009 09:42:05, buy viagra (jhon.lamad@gmail.com) said:
Does anyone know where I can find free online grant applications?

At Wed 30th Dec 2009 18:53:58, viagra online (jhon.lamad@gmail.com) said:
Does anyone know where I can find free online grant applications?

At Wed 6th Jan 2010 02:35:31, Kneemoirory (alvinwaters9986627@gmail.com) said:
nice answers i like it

At Fri 15th Jan 2010 09:32:54, Generic Viagra (las1dk23@mail.ru) said:
I wish not concur on it. I over polite post. Expressly the title-deed attracted me to read the whole story.

At Tue 19th Jan 2010 06:12:04, WP Themes (jonala234l@gawab.com) said:
Nice fill someone in on and this enter helped me alot in my college assignement. Say thank you you for your information.

At Mon 15th Feb 2010 16:56:35, amazon coupon (wi.set.imic@gmail.com) said:
quite interesting article. I would love to follow you on twitter.

At Fri 19th Feb 2010 21:11:01, Brice Marshall (regnardy@yandex.ru) said:
Do you have copy writer for so good articles? If so please give me contacts, because this really rocks! :)