This video is available to students only

A CSS Reset For Composable Layouts

In this lesson you will learn how to reset the default browser styles so that they follow Encapsulated CSS.

The styles that we write are not the first styles that get applied to our app. Before a single line of our CSS is used, the browsers will apply their user-agent style sheets. Unfortunately, there is no rule that requires any of the browsers to use the same style sheet for their user-agent. For this reason, CSS Resets have been a valuable tool to help developers provide consistent styling on the web.

What is a CSS Reset?#

A CSS Reset is nothing more than a style sheet you bring in before the rest of your app's styles, either as a separate style sheet or tagged onto the beginning of your style sheet. This style sheet's goal is simply to provide a base from which you can consistently apply CSS across browsers. Some resets are aggressive and remove all styles from all elements. Others try to "normalize" all the user-agent style sheets of the various browsers.

Luckily, there is currently less inconsistency across the browsers than would justify aggressive resets. Still, from a layout perspective, there is a need to override the browser default styles to make compositional layout possible. It makes sense to look at what you need to reset in the browser's user-agent style sheets to achieve this goal.

How to reset for composable layouts#

In this lesson, we will only be going over layout-specific Resets, but if you would like to look at the complete Reset that I use, you can check out the entire CSS Reset at Bedrock Layout Primitives.

The first thing to set is the box-sizing property on all elements and pseudo elements to border-box:

Setting the box-sizing property to border-box on all elements and pseudo-elements allows for a more intuitive developer experience since the size of the element will be calculated from border to border instead of the default, which is content + padding + border.

After that, we remove any margins from all the elements.

Doing this allows elements to conform to the first principle of encapsulation: Elements do not set their position, size, or margin.


This page is a preview of Composing Layouts in React

Start a new discussion. All notification go to the author.