Thread: REM vs EM

    #1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2016
    Location
    Lakewood, WA
    Posts
    236
    Rep Power
    64

    REM vs EM


    With respect to "responsive" text and CSS...

    What are some thoughts on rem verses em?

    Also:

    "Reset" CSS... I'm seeing it in some of the things I'm using - mostly things like sliders, 3d transitions and other fancy CSS things. But usually including the "reset" CSS screws up my existing CSS...
  2. #2
  3. Maddening Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,559
    Rep Power
    9645
    em vs. rem depends on what you want to do. Relative to the element? Use em. Relative to what you've defined on the html regardless of adjustments on parent elements? Use rem.

    I don't think I've ever used rem - every time I want a relative size, either I really do want it relative or I've written the rule so it does not nest. Like consider a menu:
    html Code:
    <ul id="menu">
      <li>Parent<ul>
        <li>Child<ul>
          <li>Grandchild</li>
        </ul></li>
      </ul></li>
    </ul>

    If you want the children and grandchildren to be 90% font-size of the parent then writing
    css Code:
    ul#menu ul { font-size: 0.9em /* or 90% */; }

    will make the children 90%, but the grandchildren get the rule twice (inherited and directly applied) and become 81%. If you don't want that you could use rem
    css Code:
    ul#menu ul { font-size: 0.9rem; } /* child 90%, grandchild 90% */

    but personally I would have written
    css Code:
    ul#menu > li > ul { font-size: 0.9em; }

    I prefer that because it's more explicit about what's happening: the second level of menus are 90%, and since the grandchildren only get the rule once (through inheritance) they're also 90%.


    As for reset CSS, I don't like them. Partly because they've never worked well for me either, but mostly because of the intention behind them: "I want this page to be identical/pixel-perfect in all browsers". I hate that mentality. Stop trying to fight the system and just work within it. Except for IE quirks, and I think one bug with Chrome I don't remember much about, I've never had browser differences be a problem. No, the pages aren't pixel-perfect for the design (inevitably designed by someone more familiar with print design than web design) but taken individually they're perfectly fine.

    Comments on this post

    • Paul-Ninja agrees : Great, thorough explanation
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Location
    Somerville, MA
    Posts
    47
    Rep Power
    71
    Great explanation Requinix. Basically the difference between ems and rems is that ems are scoped to the direct parent and rems are scoped to the root of the document. Both have their pros and cons. I would say the the choice between the two depends on intent. Rems can be easier to manage if there are is lots complex type sizing and you don't want to haggle with the arithmetic to calculate sizes. ems, can be really powerfull for handling responsize type. Especially when mixing ems with viewport units. Here is my writeup on that topic.
    https://paulkinchla.com/blog/relative-type/

IMN logo majestic logo threadwatch logo seochat tools logo