React components bake HTML semantics into their implementation. Take this Title component example:
While this isn’t a particularly interesting or robust component, it will help illustrate a useful concept. This component creates an HTML h1 element, applies a className prop set to "title" to style it, and then allows the consumer of the component to pass along whatever content they’d like to render using the children prop. In this case, the semantics is the heading level 1 expressed as an h1 element.
The component can then be used like so:
We can expect the Demo to yield something…
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, andflex-growunits when setting the size of container elements - Use
pxonly 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?
In this post, I aim to answer two questions:
- What is BEM?
- 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…
Eric Masiello
Software Engineer & UI Architect at Vistaprint
