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:
%
, fr
, and flex-grow
units when setting the size of container elementspx
only when setting the size of ornamental elements for things like hairline bordersline-height
rem
s for everything else: font-size
, margin
, padding
, min-width
, and media query breakpointsIn this post, I aim to answer two questions:
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…
Software Engineer & UI Architect at Vistaprint