8 ms·

My CSS-foo is fairly weak; what problems would em cause such that they disallow it in the code base?

bryanrasmussen 8y ago
em is relative to the font size of the nearest parent thus you can have situations where your font size of an element node is radically different due to the parent it is placed in. This can of course be powerful if used correctly, but it takes someone really good to use it correctly and perhaps it shouldn't be done in big teams because big teams imply some people not very good in some particular discipline. on edit: adding this link https://j.eremy.net/confused-about-rem-and-em/ https://j.eremy.net/confused-about-rem-and-em/
- pm24601 8y ago
  Thanks! I never understood this difference between em, rem, px. I learned something very new and I have been doing web development (backend mostly) for a long time.
dredmorbius 8y ago
Both em and rem refer to element sizing. Rem is relative to the base page font size, while em is relative to the containing element font size. The consequence is that nested em specifications are cumulative; 1.2em of 1.2 em of 1.2em gives 1.2^3, while 1.2 rem is fixed, antwhere it is used on the page. This is not of itself good or bad, it is behaviour. Use it to desired effect. As examples, I prefer to specify font size within elements (header, nav, aside, article, footer) in rem, font size of contained text (h1-h6, code, blockquote, pre, generally) in em, and width of text elements in em. This allows for less CSS (most of my styles are a few dozen selectors, often less), as relative text doesn't require respecification, and content blocks are defined in terms of sensible, reader-focused, preferable widths, padding, and margins. Much of that is personal preference: I design around article text, mostly, not wireframes or pixel-perfect layouts. The designs also tend to be robust. Examples: html, body {font-size: medium; line-height: 1.4;} article { font-size: 1rem, width: 40em, padding: 2em 4em } aside, nav { font-size: 0.9rem;} header, footer {font-size: 0.8rem} h1, h2, h3, h4, h5, h6 {margin-top: 3em; margin-bottom: 1em; font-weight: bold;} h1 {font-size: 2em} h2 {font-size: 1.6em} h3 {font-size: 1.4em} h4 {font-size: 1.2em} h5, h6 {font-size: 1.1em} .callout {font-size: 2em; width: 50%; padding: 1em; margin: 1em: margin-left:0; float: left: clear both;} Relative sizes of h1-h6 don't need to be respecified when used in header, footer, aside, nav, or .callout elements. And in callout, they're automatically scaled to 2x 1rem * factor -- cumulative application of em sizing. With simple DOMs, this can be useful. Complex DOMs and stylesheets may benefit from direct specification via rem.
- RandomInteger4 8y ago
  So in essence, styling a component with em can reduce reusability of components more and more as em gets introduced in various places?
  - dredmorbius 8y ago
    It's not that clear cut. The 'em' sizing is inherited by child elements, which can be either a feature or a bug, depending on interactions. If you're aware of this and design for it it can be a useful feature, and enhances reusability. If you're unaware of this, or your design is complex, it's much more likely to be a bug. "Bug or not?" is entirely dependent on that context.

em is relative to the font size of the nearest parent thus you can have situations where your font size of an element node is radically different due to the parent it is placed in. This can of course be powerful if used correctly, but it takes someone really good to use it correctly and perhaps it shouldn't be done in big teams because big teams imply some people not very good in some particular discipline. on edit: adding this link https://j.eremy.net/confused-about-rem-and-em/ https://j.eremy.net/confused-about-rem-and-em/

pm24601 8y ago
Thanks! I never understood this difference between em, rem, px. I learned something very new and I have been doing web development (backend mostly) for a long time.

dredmorbius 8y ago

Both em and rem refer to element sizing. Rem is relative to the base page font size, while em is relative to the containing element font size. The consequence is that nested em specifications are cumulative; 1.2em of 1.2 em of 1.2em gives 1.2^3, while 1.2 rem is fixed, antwhere it is used on the page. This is not of itself good or bad, it is behaviour. Use it to desired effect. As examples, I prefer to specify font size within elements (header, nav, aside, article, footer) in rem, font size of contained text (h1-h6, code, blockquote, pre, generally) in em, and width of text elements in em. This allows for less CSS (most of my styles are a few dozen selectors, often less), as relative text doesn't require respecification, and content blocks are defined in terms of sensible, reader-focused, preferable widths, padding, and margins. Much of that is personal preference: I design around article text, mostly, not wireframes or pixel-perfect layouts. The designs also tend to be robust. Examples: html, body {font-size: medium; line-height: 1.4;} article { font-size: 1rem, width: 40em, padding: 2em 4em } aside, nav { font-size: 0.9rem;} header, footer {font-size: 0.8rem} h1, h2, h3, h4, h5, h6 {margin-top: 3em; margin-bottom: 1em; font-weight: bold;} h1 {font-size: 2em} h2 {font-size: 1.6em} h3 {font-size: 1.4em} h4 {font-size: 1.2em} h5, h6 {font-size: 1.1em} .callout {font-size: 2em; width: 50%; padding: 1em; margin: 1em: margin-left:0; float: left: clear both;} Relative sizes of h1-h6 don't need to be respecified when used in header, footer, aside, nav, or .callout elements. And in callout, they're automatically scaled to 2x 1rem * factor -- cumulative application of em sizing. With simple DOMs, this can be useful. Complex DOMs and stylesheets may benefit from direct specification via rem.

RandomInteger4 8y ago
So in essence, styling a component with em can reduce reusability of components more and more as em gets introduced in various places?
- dredmorbius 8y ago
  It's not that clear cut. The 'em' sizing is inherited by child elements, which can be either a feature or a bug, depending on interactions. If you're aware of this and design for it it can be a useful feature, and enhances reusability. If you're unaware of this, or your design is complex, it's much more likely to be a bug. "Bug or not?" is entirely dependent on that context.