CODEWITHSUNDEEP
css
Kristiyan Kostadinov
Kristiyan Kostadinov

Reputation: 3712

Converting all CSS measurements to EM

There is a lot of info on the positives of converting typography to EM units, however is it a good practise to convert everything to ems, this includes: padding, margin. height etc?

Upvotes: 1

Views: 188

Answers (2)

Ben
Ben

Reputation: 11502

Ems are typically just for type, and for media query breakpoints. (I went through a phase of doing all sizing for everything in ems, and now see that phase as a weird hiccup on the learning curve.)

But note that there may be contexts in which padding, for example, should also be in ems. e.g. I often use:

p {padding: 0 0 1em 0}

to generate spaces after paragraphs, but again that makes sense because it's font-size-appropriate.

The convenience of using ems for responsive design is that you can have a sitewide bumps in font size that cascade effortlessly across all elements you have deemed type-related and sized in ems, e.g. mobile-first:

@media (min-width: 37.5em{ {
    body {font-size: 1.1em;
    }
}

@media (min-width: 75em{ {
    body {font-size: 1.2em;
    }
}

The cascading behavior can sometimes be maddening though, and it's hard to debug in a deeply nested context. You have to learn to expect it. My feeling is that this pattern is on balance a net savings in terms of productivity, time, and total number of CSS declarations. Resizing elements individually based on viewport width is probably more error-prone.

Upvotes: 1

user1694077
user1694077

Reputation:

I think it's important to keep in mind what ems actually are: relative to the font-size of their parent container. It can be useful to use ems when you want consistent padding or margins on something relative to the font size of the parent (so the padding will scale with the font for example).

But sometimes pixels, rems or percentages make more sense. It wouldn't make much sense to define a 1 pixel border in ems for example (but possible though). Or 100% width, which would be pretty much impossible to do in ems.

Also ems cascade, so in some cases rems can be a whole lot more useful. Long story short: it depends. They're not great for everyting, use what you think is the most appropriate.

Upvotes: 1

Related Questions