The power of CSS are it’s cascading laws and abilities. If fully understood it will simplify your styling tremendously, if not, you can get caught up in traps which ends with cumbersome work as with old style per tag styling when you need to do changes.

When I scrutinize the CSS files I find hyper detailed classes, such as:

  • p
  • p.newsLeftRed
  • p.newsLeftBlue
  • p.newsRightRed
  • p.newsRightBlue
  • p.newsLeftBigRed
  • p.newsLeftBigBlue
  • p.newsRightBigRed
  • p.newsRightBigBlue
  • etc.

I’ve exaggerated a bit on this list to make my point, plus I used design describing class names (instead of content describing) that any purists will tell you not to use in your class description – such as red… because what do you do when your client suddenly wants it all to be green? Rename them all or run it with a wrong description?

What such highly detailed class names make is to loose on the power of CSS. Look at the repeated items: left, right, red, blue and news. Define those styles and then string them together. Makes for a shorter and an easier changed CSS file plus more legible source code.

Such classes would look then as follows:

  • class=”news left red”
  • class=”news left blue”
  • class=”news right big blue”
  • etc.

And the classes you would need to style are;

  • .news {}
  • .left {}
  • .right {}
  • .blue {}
  • .red {}
  • .big {}

If you do need to style a combo specifically, you call it in your CSS file as:

  • p.news.left.blue.big

Big benefit is that you now do not have to repeat color styling for e.g. archivesRed but only for .archives as red has already been defined. Then call the style as class=”archives red”.

I will let you figure out examples how to use it well in non-style describing classes.