A More Modern CSS Reset (2019)(piccalil.li)
piccalil.li
A More Modern CSS Reset (2019)
https://piccalil.li/blog/a-more-modern-css-reset/
17 comments
https://github.com/sindresorhus/modern-normalize
Modern CSS reset is Flutter
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.
Any recommendations for a more aggressive reset? What if you are already using a library such as bootstrap or tailwind?
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.
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.
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:
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; }wait head, style and script are not none be default?
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.
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.
[deleted]
[deleted]
[deleted]
[deleted]
[deleted]
I never use CSS resets. Here's why: the
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.
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.