Colorful pattern
Colorful pattern

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 to the effect…


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…


Image for post
Image for post

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 />. …

About

Software Engineer & UI Architect at Vistaprint

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store