My Opinionated CSS Reset

* { all: unset; }

Don't Inherit the Box Model

It's time to stop spreading this out-dated practice

CSS boilerplate | fokus

UA+ (User agent plus), a different type of reset style sheet

uaplus.css | fokus

UA+ (User agent plus), a different type of reset style sheet

Added to my CSS reset: interpolate-size, the quality-of-life feature we all wanted at some point | utilitybend

Animating from 0 to auto used to be a CSS headache. But now, interpolate-size makes it a breeze! This new property offers a pure CSS solution, no more JavaScript tricks needed.

Your CSS reset should be layered

Layers are widely available, why not put your reset inside one?

Your CSS reset should be layered

Layers are widely available, why not put your reset inside one?

20 years and two weeks ago, I came up with undohtml.css and unknowingly invented the mechanism of CSS Resets (AKA reboot or reset style sheets^1) which spawned numerous variants, many still in broad use on the web today. https://tantek.com/log/2004/09.html#d06t2354 A one sentence problem description, and a short paragraph describing my problem-solving, actions, license, link to less than 300 bytes of code (not counting comments), and a few future thoughts. The rest of that blog post was about “debug scaffolding”, the part I thought was more interesting at the time. Eric Meyer (@meyerweb.com @[email protected]) followed up ~10 days afterwards with his thinking and improvements: * https://meyerweb.com/eric/thoughts/2004/09/15/emreallyem-undoing-htmlcss/ where he mentioned “resetting” in passing, but not actually calling it a "reset". ~2.5 years later Eric published “Reset Styles” with further reasoning and improvements: * http://meyerweb.com/eric/thoughts/2007/04/12/reset-styles/ describing them as: “reset” or “baseline” set of styles. Subsequently he iterated in several more blog posts: * http://meyerweb.com/eric/thoughts/2007/04/14/reworked-reset/ * http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/ — this is Eric’s first post where he explicitly calls them “reset styles”, which I believe is the origin of the eventual phrase “CSS Reset” and “reset style sheets” * http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ (yes a Matrix: Reloaded reference) ~6 months later Eric published his evergreen resource “CSS Tools: Reset CSS” * https://meyerweb.com/eric/tools/css/reset/ which, as you see within the URL: “css/reset”, is perhaps where the phrase “CSS Reset” comes from, and it’s also the label (link text) he gives that page in his UI about-page^2 and the first content link in his 404 page^3. My technology invention takeaways from all this: 1. if you find yourself repeatedly solving the same (especially annoying) problem, create a re-usable solution that works for you 2. write up your problem statement / use-case in only one sentence 3. publish your solution (on your personal site^4), name it something short, with only a short paragraph description, and re-use/remix friendly license (like Creative Commons) And things not to worry about (that may get in your way to publishing): 1. perfecting or making your solution “big enough” or “the right size”. does it solve your problem? then it’s already the right size. 2. coming up with the perfect name. instead, name it what it does. someone might come up with a better name weeks, months, or years later. let them run with it! 3. waiting to blog multiple things. I could have blogged undohtml.css by itself, probably should have, and instead lumped it into a blog post with another CSS thing I came up with. Further reading and resources for CSS Resets: * More history: https://css-tricks.com/reboot-resets-reasoning/ * Large collection: https://perishablepress.com/a-killer-collection-of-global-css-reset-styles/ References: ^1 https://en.wikipedia.org/wiki/Reset_style_sheet ^2 https://meyerweb.com/ui/about.html ^3 https://meyerweb.com/404 ^4 https://indieweb.org/ #undoHTML #undoHTMLCSS #reset #CSSreset #resetstyles #webdesign #technology #invention #indieweb - Tantek