CSS: Combining styles

CSS (Cascading Style Sheets) are a very powerful way to apply styles to an HTML page. It has the advantage of removing most of the formatting (styling) and putting it in a single location. However, in my first tries I tended to create a lot of styles which where very similar one to each other.

For example, I would write:

  1.  

I wanted to improve and optimize all this. It took me several steps to get it. The first (nearly obvious one since it is described clearly in all CSS tutorials and books) was to group exactly identical styles (like ul and ol, in my example), leading to the following:

  1. span class=”st0″>"Courier New"

No big deal, but it is reducing the amount of redundancy.

After that point, I was left in the dark with trying to group styles which where not exactly identical and so could not obviously be grouped. What I needed was to understand that a style can be defined in separate (additive) declarations, like:

  1. span class=”st0″>"Courier New"

In the spotlight:

Now, it becomes nearly obvious how to combine styles even when they are not fully identical: Group what can be grouped, keep the rest separated.

  1. span class=”st0″>"Courier New"
The base CSS for my web site is freely readable and you can study it following the link: roumazeillesv5.css

The final code for my example is then:

  1. span class=”st0″>"Courier New"

15 lines instead of 21, nearly no redundancy left (none except what I chose to keep for readability); This has been leading to significant simplifications of my style sheets. I hope it will be the case for you too.

1 comment for “CSS: Combining styles

  1. February 12, 2009 at 12:13

    Perhaps I’m being a bit dense..

    But this looks just as readable to me, and declaring font in pre would work correctly

    p, pre, ul, ol {
    font-size:13px;
    color: #000000;
    font-family: Arial, Helv, Helvetica, Geneva, sans-serif;
    }

    p {
    margin:0px 10px 5px 10px;

    }

    pre {
    margin:0px 10px 10px 10px;
    font-family: Courier, “Courier New”, monospace;
    }

Comments are closed.