Hey everyone! So, I've been using this CSS reset on some client and personal projects and I've noticed that my layouts constantly get out of shape because of user agent styling on Microsoft Edge (haven't tested this on any other browser). This user agent styling applies a padding-inline-start of 40px. I was constantly being bamboozled by this issue and it would be helpful to add

padding-inline-start: 0px;

to somewhere in the reset

Let me know what you think!

Best, Benjamin Lebron

This is something @davidkpiano talks about and at first I was not on board and even made fun of him about it, but the more I think about it, the more I like it.

Possible benefits

• Predictable parent relationships for absolute children
• Stacking becomes easier (yes I know there's a plethora of ways that you can affect stacking order)
• The potential of a lot less CSS written. The chances of removing relative for static etc are likely to be way lower that you’d add relative

I’ve been thinking about it again when he and Shaw were on ShopTalkShow, which is worth a listen.

It’s worth remembering that a lot of stuff in this reset goes against the browser defaults, so this one, albeit way against browser defaults fits in nicely IMO.

I’m opening this up for discussion because I might be missing a big issue here which I really don't want to create.

Right now, the reset removes all padding, margin and list styles from lists that have a class attribute. This is causing problems in the community and it's something I'd like to remedy.

Proposed change

I propose that margin and padding are left as they are. They can be removed on a per-context basis, as required. The immediate removal is my preference and as this thing has exploded in popularity, that really doesn't hold water anymore.

With those removed, I also propose that list styles are only removed when the list has a role of list on it, like so:

<ul role="list"></ul>

This is because, frustratingly, the list-style: none rule can cause problems for assistive technology.

Old CSS

/* Remove default padding */
ul[class],
ol[class] {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
  list-style: none;
}

New, proposed CSS

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

Comments welcome.

Hello! It's perfect idea to store so much good practices in a single CSS file available from NPM.

But some styles can cause a problems.

1. I do not want to use all images as block. Sometimes I want to inline an image, and browser default is inline.

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
}

I suggest to remove display: block from here.

2. I do not always want to get some margins somewhere in article.

I can use this tag for very custom design, and top margin on each child is not what I want. If I want vertical margins between elements, I use <h1> and <p>.

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

I suggest to remove this part.

All other code is amazing, I want to use it on every website I make.

As stated in this article https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ , quoting @jonathantneal:

This will give you the same result, and make it easier to change the box-sizing in plugins or other components that leverage other behavior.

This is just a suggestion, feel free to refuse it! 😁

When using the nav element, ul and li are generally custom styled and does not need default margin or padding. Suggesting to remove the padding and margin on ul and li items inside of nav element.

I can't really think of an instance where the nav tag is used for a generic ul.

Also added a postinstall script so that the /dist files are automatically generated when npm install is ran.

If anything depends on the animation to be visible, it will still be visible. Could probably keep paused in there as well

Demo comparison: https://codepen.io/psimyn/pen/KKPOgOQ

Thanks for the excellent reset & write-up!

Since the uglify dependency is used as a development tool in this project, it can be moved to the dev dependencies and not be installed in consuming projects if not needed.

Hi there,

Not sure about this, but it could make sense to add this for old browsers:

[hidden] {
   display: none;
}

Seen here: Hiding elements from all devices

I saw in a recent tweet that using scroll-behavior: smooth can affect the default browser search feature, which could cause the page to scroll unnaturally back and forth as someone tabs through the results of the search. Suffixing the html selector with :focus-within means that the smooth scrolling will only happen when people are interacting with the page and anything within it.

I've also prevented smooth scrolling when people prefer reduced motion

Original credit to this article: https://css-tricks.com/fixing-smooth-scrolling-with-find-on-page/

Edit: Tested on a production site using this same reset library 👍🏻

Hi,

I'm using the reset along with the CUBE CSS methodology. I have a container with a .flow class applied:

.flow > * + * {
    margin-top: 1rem;
}

Inside this container there are several elements (h1, p, ul…). The top margins are applied correctly, so the vertical rhythm is correct:

<div class="flow">
<h1>Lorem</h1>
<p>Ipsum</p>
<ul>…</ul>
</div>

However, if I add a ul which has a class, it doesn't respect the flow, because this rule in reset.css:

body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
figure,
blockquote,
dl,
dd {
  margin: 0;
}

This selector: ul[class] has a higher specificity than .flow > * + *, so the top margin isn't applied.

How would you tackle this situation? What do you think about changing ul[class] and ol[class] with just ul and ol?

should we use:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

better than

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

The line-height property with a value of 1.5 is a good default value, but maybe something opiniated that could be removed, because it will certainly be adjusted according to the design needs.

Another reason is that WordPress (and maybe other tools) allows us to generate some styles from a json file. As these base styles are declared before any other stylesheet, we can't use the generated value for line-height because it will be loaded too early and overloaded.

Would you accept a PR to remove that property?

here is wrong way min-height: 100vh; for body because webkit not valid and on iPad it will count + height of submenu (tab bar)... recomendation - min-height: 100%;

Hello!

I've been using your reset for a while (it's great btw thanks), and I've noticed a weird bug on Firefox (87.0) and Ubuntu. When I click on a select element, the dropdown appears for a fraction of a second, then disapears (I need to click again to have the regular select behaviour). Then if I move the focus elsewhere, and click again on the select, nothing appears on the first click.

I've tracked down the problem to this part of the reset

html:focus-within {
  scroll-behavior: smooth;
}  

I've made a codepen so that you can try and see if you can reproduce the issue https://codepen.io/kimlai/pen/PoWjMyv.

I don't know what's happening, and it's most probably a bug in Firefox, but I thought that I'd let you know, since it makes the reset unusable as is (at least for me).