New Rule: Require specific font size units

[nasty23-star]

Environment

Rule details
Flag the use of px

What type of rule is this?
Warns about a potential problem

Example code
.card {
font-size: 12px;
}

Participation

I am willing to submit a pull request to implement this rule.
Additional comments
Needing !important indicates there may be a larger underlying issue.

What problem do you want to solve?

Rem and em are more accessibility-friendly than px.

What do you think is the correct solution?

The option to enable accessibility mode and warn about usage of px.

Participation

• I am willing to submit a pull request for this change.

Additional comments

I think it's very useful for improving accessibility.
https://www.a11y-collective.com/blog/what-is-rem-in-css/

[nzakas]

Thanks for the suggestion. This seems a bit too specific to be included as a general rule. (We typically don't create rules that simply disallow specific syntax.)

I think we'd be open to a rule that was a bit broader, maybe something that encouraged the use of specific font size types? So rather than just disallowing px, maybe it would look for a small set of "good" size types?

[nasty23-star]

Thank you for the clarification. Your suggestion sounds very good.

[Tanujkanti4441]

I think we'd be open to a rule that was a bit broader, maybe something that encouraged the use of specific font size types? So rather than just disallowing px, maybe it would look for a small set of "good" size types?

How about a rule called required-font-unit or required-font-size-unit that will take a set of strings such as rem, px etc. as option, so rule would allow only these units for font-size?

[nzakas]

How about a rule called required-font-unit or required-font-size-unit that will take a set of strings such as rem, px etc. as option, so rule would allow only these units for font-size?

I think this is heading in the correct direction. require-font-size-unit (without the "d" in require) seems like it would make the most sense as a name, although I wonder if this rule needs an allow list or a deny list?

[Tanujkanti4441]

although I wonder if this rule needs an allow list or a deny list?

I think for consistency, using an allowlist would be a good idea?

[nzakas]

Makes sense. I'd like to find an article or something online with recommendations for which font size units are considered best practices so we can have a logical default setting.

[Tanujkanti4441]

Sure! these are some articles that suggest rem for font size:

It's a good idea to use rem to set font sizes because it is designed to adapt to the user's browser preferences. This helps with accessibility. It is also good for consistent scaling, as changing the HTML font size will affect the elements with rem units.

https://www.freecodecamp.org/news/css-units-when-to-use-each-one/

Tip: The em and rem units are practical in creating perfectly scalable layout!

https://www.w3schools.com/css/css_units.asp

Set Font Sizes with rem: Use rem units for setting font sizes in most cases. rem ensures that font sizes are relative to the root element's font size, making them responsive to user preferences and zooming.

https://medium.com/design-bootcamp/css-font-sizing-beyond-pixels-for-better-design-35457c2650d3

[nzakas]

Thanks! Going to post on social media to see what other responses we get.

[bradzacher]

The thing we found while working with typescript-eslint is that almost any time you create a no- prefixed rule, someone will want to go against the "no" and instead enforce the inverse.

I'd personally suggest a name like consistent-font-sizes which would then give you room to add an option for each style of font size whilst still adding a default value to enforce the perceived best practice.

[nzakas]

We had decided on require-font-size-units. #73 (comment)

The title of the issue just wasn't updated.