hw-bgw
Last Updated: February 25, 2016
·
1.841K
· stevehalford
Bd22fa12d879b47c4b1a5d91eb432055

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>

Say Thanks
Respond

4 Responses
Add your response

4081
Kong

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!

over 1 year ago ·
4083
Php

I never use the font property, always font-family, font-size, etc :)

over 1 year ago ·
4084

Totally agree. Plus there's a css priority problem in some cases!

over 1 year ago ·
4087
D42a7264714dee5006b9c99d2567a320

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.

over 1 year ago ·