Home/ Questions/Q 7751899
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T11:39:59+00:00

I’m having trouble writing maintainable CSS code when font size is specified with EM

  • 0

I’m having trouble writing maintainable CSS code when font size is specified with EM units as opposed to PX units. I’ve been accustomed to writing CSS code like this:

body {font-size: 12px;}
body .sidebar {font-size:11px;}
body .sidebar .loadmore {font-size:10px;}
body .sidebar .warning {font-size:13px;}

The idea is that on many pages through out the site, there’s a lot of text that should have 12 pixel font-size. I take advantage of the rules of specificity to override the 12px font size in special areas of the site.

Let’s say I rewrote the above code as:

body {font-size: 12em;}
body .sidebar {font-size:11em;}
body .sidebar .loadmore {font-size:10em;}
body .sidebar .warning {font-size:13em;}

If I replaced px with em in the code above, my understanding is that I lose the advantage of rules of specificity. Line 3 of the code would be interpreted as ” 10 em of 11 em of 12 em” which is not at all the same meaning as ” override all previous rules and use 10 em of (what is the default?)”. Is what I’ve stated correct?

edit If what I’ve said is correct, then how does one write a font size rule such as “use font size X for all elements, but use font size Y on side bars”?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    John the specificity that you are talking about will occur in the way that you have stated. A reference as to why can be seen: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/.

    Edit As a reply to your edit please consider what jnylen posted in the comments of your original post.

    A font size of 12 em as you have listed for body {font-size: 12em;} is going to scale the default font size to 12x it’s current size. If you would like to use em’s you need to consider at what scale rate you wish to use them and do the math. If you want to set fixed sizes with nested statements you need to stick to fixed attributes (pixels). The advantage of em’s as stated in the article that I linked is that you can set a default size, say 12 px and then use em to scale them. For example in mobile based websites.

    • 0