Recommended CSS Values and Units
Modified 2023-02-27
The CSS spec has loads of values to be used, but it's not always clear which one are recommended.
Color
Describing color with hsl() is the most intuitive way our brain works.
.colorful-thing {
color: hsl(200deg 100% 50%);
border-bottom: 3px solid hsl(200deg 100% 50% / 0.5); /* opacity */
}Dimensions
Avoid setting the font-size of html element, because it overrides the user
defined font-size. Worst case scenario, use em.
Use rem for Typography. By default the HTML has a font-size of 16px, but the
user can change the value in their browser defaults, which rem respects.
It's more intuitive to use px when adjusting things surrounding the box model,
but height/width can also benefit from using %.
In extremely rare case em should be used, in case something needs to change
depending on the size of it's parent.
line-height
The current browser defaults are still too low. Prefer line-height: 1.5 or
higher.