How to Add a CSS Reset to Remove Default Browser Style

[00:00 - 00:11] What's up guys, Travis here with another lesson in composing layouts on React. In today's lesson we will learn about CSS resets for composable layouts.

[00:12 - 00:20] Now the styles we write are not the first styles that get applied in our app. Before a single line of our CSS is used, the browser will apply their user agent style sheets.

[00:21 - 00:35] Unfortunately, there is no rule that requires any of the browsers to use the same styles sheets from their user agents. For this reason, CSS resets have been a valuable tool to help developers provide consistent styling on the web.

[00:36 - 00:49] So what is a CSS reset? A CSS reset is nothing more than a style sheet you bring in before the rest of your app styles, either as a separate style sheet or just tagged at the beginning of your app styles.

[00:50 - 01:06] The stylesheets 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, while others try to normalize all the user agent style sheets of the various browsers.

[01:07 - 01:22] Luckily there is currently less inconsistency across the browsers that would justify aggressive resets. Still from a layout perspective there is a need to override the browser's default styles to make compositional layout possible.

[01:23 - 01:49] It makes sense to look at what we need to reset in the browsers user agent style sheets to achieve this goal. On this lesson we will be going over layout specific resets, but if you would like to look at the complete CSS reset I use, you can check that out at Bedrock layout primitives and the link will be in the notes below.

[01:50 - 02:17] So first thing we need to do is set the box sizing property on all elements in pseudo elements to be border box. Setting the box sizing property to border box on all elements in pseudo elements allows for a more intuitive developer experience since the size of the elements will be calculated from border to border instead of the default which is content plus the padding plus the border.

[02:18 - 02:33] Now after that we remove any margins from all the elements. Doing this allows elements to conform to the first principle of encapsulation which is elements do not set their position size or margin.

[02:34 - 02:47] From there we remove the padding and list styles from all list tag elements. A common thing that most people do when working with lists is remove the default padding and list styles added by the browser by default.

[02:48 - 03:02] Since this is pretty much universally done every time I style this I like to get it done once and get it done with. Now you'll notice we are using the attribute selector to remove the padding and list style only if the class attribute is set.

[03:03 - 03:23] Doing this will allow our list to be reset if we are actively styling the element using the class attribute. By doing it this way our list elements will retain those default styles that make them look like lists when we use the pure list tag elements themselves.

[03:24 - 03:41] Next we set the min block size or the min height of the body to be 100 view heights. It's helpful to have the body take up the entire viewport even if our content does not.

[03:42 - 04:08] Next we set our images to be block level elements instead of inline level elements and then set their max inline size to 100%. Setting the max inline size to 100% makes our images responsive by default and this treats images as block level elements is something that most people do and the way they treat image tags anyway.

[04:09 - 04:27] Now finally we set the max inline size of tags base tags to be 60 CH. A CH unit is approximately the width of the zero character of any font family that is being used.

[04:28 - 04:49] In any given font family each character can either be very wide like the capital W or very skinny like the letter L. So the letter zero is neither the widest nor skinniest character in a font family and is a good proxy for the character width of that font family.

[04:50 - 05:19] Now we use 60 CH which is 60 characters because a large amount of research has gone into finding the optimal line lines of readability. You can check out work done over at material IO to read more about optimal line lines but for brevity 60 characters is a good default cap on the inline size of the text and there will be links to that research at material IO in the notes below.

[05:20 - 05:35] Now with these resets in place we have now primed the browser to let us start using the principles of encapsulation in building composable layouts. In the next module we will start building the foundational layout primitives that allow us to build almost any of the layouts on the web.

[05:36 - 05:37] I'll see you in the next module.