CSS – Quick Explaination of Grouping

October 30, 2007

I’ve just built a .Net page to display some data in a datagrid, with alternating row colours. When I have done this in the past, I have always ended up defining the CSS classes as follows:

.DataRow {
font-family:Verdana;
font-size:10.5pt;
background-color:#CCCCCC;
}

.DataRowAlternating {
font-family:Verdana;
font-size:10.5pt;
background-color:#FFFFFF;
}

Note how each of the classes has the same values for the properties, apart from the color (In reality you would probably have more properties defined). This obviously doesnt lend itself to easy updates or code maintenance.

The answer, as I just discovered is CSS Grouping. The example below will achieve exactly what the above example does – Only with less code duplication.


.DataRow,.DataRowAlternating
{
/* Properties common to both classes... */
font-family:Verdana;
font-size:10.5pt;
}

.DataRow
{
/* Properties specific to .DataRow... */
background-color: #CCCCCC;
}

.DataRowAlternating
{
/* Properties specific to .DataRowAlternating... */
background-color:#FFFFFF;
}

This is about as close to inheritance in CSS as we can get for now, and if you ask me – Its good enough!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: