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.

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.

 property on all elements and pseudo-elements to 

*,
*::before,
*::after {
  box-sizing: 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.

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

Doing this allows elements the ability to better control the space between their child elements. It is difficult to layout items correctly if they already have a built-in margin that you have to override.

From there, we remove the padding and list style from 

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

A common thing that most people do when working with lists is remove the default padding and list styles added by browsers. Since this is pretty much universally done every time one styles a list, I like to do it once and get it done with.

You will notice that we are using the attribute selector to remove the padding and list style only if the 

 attribute is set. Doing this will allow our lists to be reset if we are actively styling the element using the 

 attribute. By doing it this way, our list elements retain their default styles when we use the pure 

It is helpful to have the body take up the entire viewport even if its content does not.

Next, we set our images to be block-level elements instead of inline-level elements and then set their 

img {
  display: block;
  max-inline-size: 100%;
}

 makes our images responsive by default and treats images as block-level elements, which is how most people use 

p,
h1,
h2,
h3,
h4,
h5,
h6,
li,
figcaption {
  max-width: 60ch;
}

 character of the font family in use. In any given font family, each character can either be very wide like the letter 

 is neither the widest nor skinniest character in a font family and is a good proxy for a character width.

 because a large amount of research has gone into finding the optimal line lengths for readability. You can check out the work done over at 

 to read more about optimal line lengths, but for brevity, 60 characters is a good default cap on the inline size of the text.

With these resets in place, we have now primed the browser to let us start building composable layouts.

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder"> CSS Reset For Composable Layouts</h1><p><br>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.</p><h2 class="heading-anchor-text" id="what-is-a-css-reset?"><span>What is a CSS Reset?</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#what-is-a-css-reset?">#</a></h2><p><br>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.</p><p><br>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.</p><h2 class="heading-anchor-text" id="how-to-reset-for-composable-layouts"><span> How to reset for composable layouts</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#how-to-reset-for-composable-layouts">#</a></h2><p><br>The first thing to set is the <code>box-sizing</code> property on all elements and pseudo-elements to <code>border-box</code>:</p><textarea data-iscodemirror="true" data-mode="text/css" data-uniqueid="cm-h2dRo" id="cm-h2dRo">*,
*::before,
*::after {
  box-sizing: border-box;
}</textarea><p><br>Setting the <code>box-sizing</code> property to <code>border-box</code> 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.</p><p><br>After that, we remove any margins from all the elements.</p><textarea data-iscodemirror="true" data-mode="text/css" data-uniqueid="cm-IPBrm" id="cm-IPBrm">body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}</textarea><p><br>Doing this allows elements the ability to better control the space between their child elements. It is difficult to layout items correctly if they already have a built-in margin that you have to override.</p><p><br>From there, we remove the padding and list style from <code>ul</code> and <code>ol</code> elements.</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-A9a7j" id="cm-A9a7j">ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}</textarea><p><br>A common thing that most people do when working with lists is remove the default padding and list styles added by browsers. Since this is pretty much universally done every time one styles a list, I like to do it once and get it done with.</p><p><br>You will notice that we are using the attribute selector to remove the padding and list style only if the <code>class</code> attribute is set. Doing this will allow our lists to be reset if we are actively styling the element using the <code>class</code> attribute. By doing it this way, our list elements retain their default styles when we use the pure <code>ul</code> and <code>ol</code> tags without styling applied.</p><p><br>Next, we set the <code>min-block-size</code> of the <code>body</code> to be <code>100vh</code></p><textarea data-iscodemirror="true" data-mode="text/css" data-uniqueid="cm-rzk1t" id="cm-rzk1t">body {
  min-block-size: 100vh
}</textarea><p><br>It is helpful to have the body take up the entire viewport even if its content does not.<br>Next, we set our images to be block-level elements instead of inline-level elements and then set their <code>max-inline-size</code>to<code>100%</code>.</p><textarea data-iscodemirror="true" data-mode="text/css" data-uniqueid="cm-yYQaO" id="cm-yYQaO">img {
  display: block;
  max-inline-size: 100%;
}</textarea><p><br>Setting the <code>max-inline-size</code> to <code>100%</code> makes our images responsive by default and treats images as block-level elements, which is how most people use <code>img</code> tags.<br>Finally, we set the <code>max-inline-size</code> of text-based tags to be <code>60ch</code>.</p><textarea data-iscodemirror="true" data-mode="text/css" data-uniqueid="cm-Ke4PT" id="cm-Ke4PT">p,
h1,
h2,
h3,
h4,
h5,
h6,
li,
figcaption {
  max-width: 60ch;
}</textarea><p><br>The <code>ch</code> unit is approximately the width of the <code>0</code> character of the font family in use. In any given font family, each character can either be very wide like the letter <code>W</code> or very skinny like the letter <code>l.</code> The <code>0</code> is neither the widest nor skinniest character in a font family and is a good proxy for a character width.</p><p><br>We use <code>60ch</code> because a large amount of research has gone into finding the optimal line lengths for readability. You can check out the work done over at <a href="https://material.io/design/typography/understanding-typography.html#readability" rel="noopener noreferrer nofollow">material.io</a> to read more about optimal line lengths, but for brevity, 60 characters is a good default cap on the inline size of the text.</p><p><br>With these resets in place, we have now primed the browser to let us start building composable layouts.</p>

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

CSS Reset For Composable Layouts

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript