Question: rem vs. em

[kof]

Hi

Just a question, why are you using rem and not em.

From my understanding: rem is relative to font size of html element, em is relative to font size of parent element.

Example:

If you build a button widget, sometimes you want to have it smaller in some particular view, not everywhere, but you can't do this using font size on the container in the particular view if rem is used, also you won't change the font size of html, so I need to specify sizes directly on button elements.

[piatra]

This is only my answer, @dam or @GarthDB might know better.

It's because of the BEM (block element modifier) pattern that Topcoat uses as a CSS pattern.
All components should behave exactly the same everywhere you place them in the page (not relative to parents) this way you won't have any surprises and if you use a styleguide copy-pasting from the styleguide will result in the same output.
If you want a smaller component for a specific region you just make one with smaller font-size.
You might end up having

alert-box,
alert-box--small,
alert-box--tiny {
  // all share the same CSS
}

/* and then */

alert-box--tiny {
  // only specific rules for size
  // set width
  // height
  // font-size
}

Chances are you are going to need that small component someplace else in the future, either way it's an extra 5-6 lines of CSS with the benefit of having a static component that won't change if you move it around.

[kof]

Its sounds like a different philosophy than the original css one about inheritance from parents etc.

[kof]

Also the only issue you might get with em is when some parent container has different font size than you expect. This shouldn't be hard to find/fix.

Its a kind of making component more robust in size by sacrificing flexibility.

[kof]

Which is also kind of not web/css philosophy.

[kof]

probably there is a way to make it configurable. Using em for sizes, but setting font-size on every component explicitly using variable. This way 1. every component has robust size, 2. one can adjust size by just setting font-size on the component container, or even change the variable font-size value to "inherit"

[GarthDB]

Oleg,

The goal of the default theme is for the components to be the same regardless of the styles applied to the parent. It is safer and less complicated for a larger user base, but your right, there are times you want something different, in those cases you should alter the theme to fit your project's needs.

[kof]

@GarthDB thats what @piatra said. The question is if we can do it play nicely for both cases. Making size adjustment for 1 component just 1 single definition of font-size.

[GarthDB]

We went through the options and have discussed the benefits of both. After weighing the options we decided on rems for exactly the reasons @piatra mentioned. By using rems we have a more universal usable component set by default.

I would encourage a custom theme for anything different.
—
Sent from Mailbox for iPhone

On Mon, Apr 7, 2014 at 6:00 AM, Oleg Slobodskoi notifications@github.com
wrote:

@GarthDB thats what @piatra said. The question is if we can do it play nicely for both cases. Making size adjustment for 1 component just 1 single definition of font-size.

Reply to this email directly or view it on GitHub:
#492 (comment)

[kof]

thanks.