[BUG] HTML Important Issue Font Size

[thirschi]

When having !important on the font size it is hard to override it.

Tell us all about your problem or feature proposal.

If the issue is with styling, please include screenshots!

Websites Affected

If this is a bug or styling issue, please list one or more URLs where
we can see the issue.

Issue Type

Is this (add an x in the boxes that apply)

• A difference between the components and the Official Specification?
• A bug, such as a Javascript error, or the UI not rendering properly
  on a page?
• Inconsistent appearance/behavior between browsers?
• An issue on mobile browsers?
• A request for a new feature/enhancement?

Browsers Affected

Add an x in all the boxes that apply. Please mark desktop and mobile
browsers separately.

We support the last two versions of Chrome, Firefox, Safari, and Edge.

Desktop Browsers

• Google Chrome
• Mozilla Firefox
• Apple Safari
• Microsoft Edge
• Other (please specify)

Mobile Browsers

• Any browser on iOS
• Chrome for Android
• Firefox Mobile for Android
• Other (please specify)

Web Site Platform

What is hosting your website?

• Drupal 7
• Drupal 8
• Wordpress
• Custom Site
• Don't Know

[Gi60s]

@ThatJoeMoore @kevin-larry-bauer @blakemorgan

I assume that Tim is referring to this line: https://github.com/byuweb/byu-theme-components/blob/master/components/byu-theme-components.sass#L33

html
  font-size: 16px !important

That is pretty broad to put an !important on the font-size for the entire HTML document. Does anyone know why we did that?

Also, I'm afraid if we remove the !important that it may radically affect the look of many existing websites that are using the components. A change like this might have to wait for a major version release.

[rburkey87]

@Gi60s - I helped Tim fix his specific issue. It seems like maybe the font-size was set (with "!important") at that high of a level to set the standard for variable sizes like "width: 4.8rem" set in contained divs later on. I don't ever use variable sizes, though, so I'm not positive that's how it works... However, in Tim's case, changing his width & height styles to pixels fixed the issue.

[Gi60s]

Sounds good. Thanks @rburkey87

Are we ok to close this issue?

[rburkey87]

@Gi60s - should we leave something similar as an enhancement request? If I'm wrong about the reasoning for the existence of that line of CSS, I'd be interested to find out why it's there and implement a better practice if possible.