Question

This is more of a general best practice question rather than a very focused one.
I’m a big fan of the font shorthand as it solves most of the line-height headaches I had when I was using just font-family, font-size etc etc and it really cuts down on the total number of the CSS declarations while providing full control on the typography.

The problem is, as font-sizes change throught a page, so do the line-heights, so I’m finding myself redefining font several times, like so:

.lastUnit h2 {font:normal 23px/23px Calibri,Tahoma,sans-serif;color:#a51d21;padding: 21px 0 15px 70px;}
.lastUnit a:link, .lastUnit a:visited {color:#a57129;font:normal 16px/16px Calibri,Tahoma,sans-serif;}
h1 {font: normal 26px/26px Calibri,Tahoma,sans-serif;border-bottom:2px dotted #bababa;color:#204fe7;padding-bottom: 8px;margin-bottom: 8px;}
h2 {font: normal 22px/22px Calibri,Tahoma,sans-serif;color: #a41d21;margin-bottom:12px;padding-bottom: 12px;}
.internal h2 {border-bottom: 2px dotted #62c6c7;}h2.section {font:normal 20px/16px Calibri,Tahoma,sans-serif;color:#1d7373;border:0;margin: 0 0 15px 0;padding-bottom:12px;border-bottom:2px dotted #62c7c8;clear:both;height:18px;text-transform:uppercase;}
ul,ol,p {font:normal 16px/24px Calibri,Tahoma,serif;}
h3 {font: normal 18px/18px Calibri,Tahoma,sans-serif;color:#204fe7;margin:6px 0;}

I have a strong feeling this code is not optimized… I’m thinking to declare the font-family on my body (or on an id very high in the markup) so I don’t have to repeat it each time, but then I’ll have to use font-family, line-height and some times font-weight.. Which makes for pretty much the same amount of CSS.

Any ideas or tips to optimise this procedure? Maybe additional classes in the markup?

ps: for Stackoverflow admins: That would be a question for “coding style” tag but it’s not allowed to use it..

Answer 1

I would try to write CSS as if I were designing a database or defining OO-classes. I would:

1. try to eliminate redundancy in the CSS
2. define generic CSS rules first and then the specific cases
3. avoid shorthands if necessary

Here is an example:

h1, h2, h3 {
    font: normal large/1em Calibri,Tahoma,sans-serif;
}
h1 {
    font-size: 26px;
}
h2 {
    font-size: 22px;
}
h3 {
    font-size: 18px;
}