Don't use CSS font shorthand
<rant>
You define a base font in your CSS, maybe something like this...
body {
font: normal 11px Tahoma, Arial, Helvetica;
}That's fine, but then for other elements you want to use a different font size, so you do this...
.some-other-element {
font: normal 12px Tahoma, Arial, Helvetica;
}WHY!!?
You only want to change the font size, so why not just use font-size: 12px? The font family and weight is inherited, you don't have to specify it again. That 'C' in CSS stands for cascading!
What's the problem with this you may ask? Well next time somebody has to edit your 4,000+ line CSS file (or even worse, multiple CSS files) and they need to change the font, instead of changing it in one place they have to search for all the places where you've pointlessly redeclared the font-family.
Also, suppose someone wants to leave your CSS file untouched and override the font-family in a separate file, they can't just add one rule, they have to override every rule where you've used the font shorthand.
(The same applies for font-weight BTW)
</rant>
Written by Steve Halford
Related protips
4 Responses
I agree with your "rant" i usually use font shorthand to setup the body or a main div and then use class like bigger {font-size:20px;} or smaller {font-size:8px;} to change other elements inside. Its like you said the other properties are inherited. thanks for sharing!
I never use the font property, always font-family, font-size, etc :)
Totally agree. Plus there's a css priority problem in some cases!
I think your tip title is misleading. It suggests that you are against using the shorthand font syntax altogether (which is actually fine on first declaration), while it's actually telling people not to repeat the whole thing every time they want to override font size or font weight, etc.
