Use This Approach To Create Simple And Flexible CSS Code

by 3 03/06/2012

As the capabilities of CSS continue to grow, and browser support improves, it’s easy to find stylesheet files growing in complexity and size. It’s easy to fall into the trap of focusing your CSS too tightly, with styling targeted at element IDs or nested HTML.

Taking a class based approach for CSS flexibility means simpler code and faster design implementation.

Avoiding over-complex CSS

In any website I make, there are always lots of design aspects that I want to apply to many different elements. Let’s say I’m designing a simple blog. On the front page I’m adding curved edges to thumbnail images, the form field for the search bar, and to the sidebar as a whole. My basic HTML might include;

<img class="thumbnail" src="something" alt="something" width="100" height="100" />

<input id="search" type="text" value="Search" />

<section id="sidebar">...</section>

 

There are different ways to add my curved corners to each element. The most basic is to add the code to each element in my CSS;

.thumbnail
{
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  ..
  other styles for .thumbnail
  ..
}

#search
{
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  ..
  other styles for #search
  ..
}

#sidebar
{
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  ..
  other styles for #search
  ..
}

 

This is inefficient. It makes my CSS file bulky. It means that if I want to make a wider change across all these elements, I have to change each piece of CSS individually.

I could also target all these elements in one piece of CSS;

.thumbnail, #search, #sidebar
{
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
}

 

This is more efficient code, but it’s still not great. I have styling targeted at each of these elements in different places within the same CSS code (e.g. styling for #search that’s independent of .thumbnail and #sidebar). If I add a new element, then I have to remember to add it to this piece of CSS.

Adopting a more universal approach

A better method would be to identify what universal styling I’m likely to need throughout my site, and create classes specific to that styling. In this case I’m looking at how edges are styled. If I add the class “edged” to each of these elements, I can target it easily. This results in slightly altered HTML;

<img class="thumbnail edged" src="something" alt="something" width="100" height="100" />

<input id="search" class="edged" type="text" value="Search" />

<section id="sidebar" class="edged">...</section>

 

Within my CSS I then have;

.edged
{
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
}

 

This allows me to easily add or remove my curved edges to any HTML element I want, by adding the “edged” class.

Note that I’m not using a class name that describes the visual detail, e.g. “curved-edges”. The class is signifying that an element has a particular property, but the details of that property might change in future. In which case I can simply change the CSS for my “edged” class, and it will apply universally to all elements with that class.

An expansion on basic CSS frameworks

CSS frameworks like Blueprint or 960 Grid System are generally focused on layout. Expanding your CSS to include universal design aspects that focus on more specific visual aspects builds upon the same principles. They make it easier to implement wide ranging aesthetic changes quickly and easily.

I find that this approach leads to the development of “aesthetic frameworks”. These focus on addressing visual aspects which I know I’m commonly going to address. I can very quickly implement design changes on new or existing websites. It works as a standalone addition to CSS code, or when laid over a more layout focused framework.

Print Friendly

About 

Robin Cannon is Front End Engineer at Viggle, Inc. He also blogs regularly on his site Shiny Toy Robots.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

3 COMMENTS

Angela Jones

Great tips! Thanks, Robin!

March 6, 2012 Reply

Matt Ritter

Fantastic. I’ve also started to adopt this method. I think it easy to go overboard, however, with some elements having way too many classes applied to them. But, I suppose there is no real problem with that?

March 11, 2012 Reply

Robin Cannon

I don’t really consider multiple classes on some elements to be an issue. In general the aim here is to make it simple and lightweight, giving more flexibility to implement things. If you’re eliminating excessive amounts of overly focused, repetitive or redundant CSS in exchange for several additional element classes, I think that’s a worthwhile balance.

March 19, 2012 Reply


Leave comment

Some HTML allowed

Get conversion optimization & A/B testing articles FREE >>>