One of the most common questions I hear when discussing CSS best practices is “what unit should I use?” Most of us think and speak in terms of pixels but the px unit is rarely the best choice. Here’s how this all breaks down:

TL;DR

• Use %, fr, and flex-grow units when setting the size of container elements
• Use px only when setting the size of ornamental elements for things like hairline borders
• Omit units altogether when defining line-height
• Use rems for everything else: font-size, margin, padding, min-width, and media query breakpoints

What’s a rem?

rem, similar to em, is a relative unit. There are great articles out there that explain this in detail so I won’t attempt to regurgitate all that here (see https://zellwk.com/blog/rem-vs-em/). ems can be a bit tricky to use so 9/10 I’ll say stick with rem. In short, here’s how the rem unit…

In this post, I aim to answer two questions:

1. What is BEM?
2. How should BEM be applied to styling React components?

BEM is an acronym for Block Element Modifier. It’s not a framework or library. It is but a small piece of a larger CSS architecture puzzle. Specifically, BEM is a strict CSS selector naming convention that provides a valuable mental model for component composition. Allow me to explain…

The term element in BEM should not be confused with an HTML element. An HTML element is the actual application of an HTML tag within an HTML document. For example, an input tag represented as an HTML element is <input />. HTML elements support attributes such as the class attribute (e.g. …