A More Modern CSS Reset (2019)

https://piccalil.li/blog/a-more-modern-css-reset/

by thunderbong • 2 years ago

71 12 2 years ago

piccalil.li

divan• 2 years ago

Modern CSS reset is Flutter

victor106• 2 years ago

I follow this

https://www.joshwcomeau.com/css/custom-css-reset/

wkirby2• 2 years ago

Nice write up, very targeted at websites with a focus on typography. A more aggressive reset still seems appropriate if you’re building more in web app territory.

thestepafter• 2 years ago

Any recommendations for a more aggressive reset? What if you are already using a library such as bootstrap or tailwind?

wkirby2• 2 years ago

If you’re using a framework, I wouldn’t (personally) layer another reset on top of it.

For me, especially when managing non-typographic layout, ensuring that all browser-default margins and padding are gone, as well as a consistent font size and line height for every element are important.

I also think that the `dvh` unit is really helpful if you’re going to be working with full-screen layouts that target any iOS browser.

p4bl02• 2 years ago

This is nice but it's not what I would call a "reset". It does make arbitrary choices for the value of some properties. It may be very good as "saner defaults", but for examples it doesn't even reset headers' font-size, or the margin above headers for example while it does reset the margin under headers (why?).

It's probably inefficient due to the use of the joker selector, but in modern CSS, I believe an actual reset would be as simple as:

    * { all: unset; }
    head, style, script { display: none; }

aloisdg• 2 years ago

wait head, style and script are not none be default?

p4bl02• 2 years ago

By default (meaning the browser's default CSS) they are, but when you set all properties to unset, which is not equivalent to none, even the `display` property is concerned, so their content is displayed as text on the web page just like the content of a p or a div is.

9dev• 2 years ago

They are, until you reset them by setting all: unset. In this case, * applies to script and style too, and all includes display, so you’ll need to revert this right after.

toastercat• 2 years ago

I never use CSS resets. Here's why: the

rav• 2 years ago

I don't think CSS resets make developing CSS easier for me... I'd rather have one set of bad defaults to develop on top of, than each project starting with its own set of good defaults that I then have to understand the strengths/weaknesses of every time.

Stuff affected by CSS resets rarely comes up when I'm sticking to the standard set of UI components for the project, and when it does, I need to do just as much debugging with the CSS reset as I would have to do without a reset.

m1n7• 2 years ago

https://github.com/sindresorhus/modern-normalize

  The goal of this project is to make itself obsolete.

A More Modern CSS Reset (2019)

Related Stories