#Development #Templates
My opinionated CSS reset · Modern base styles for consistent web design https://ilo.im/16a17y

_____
#CssReset #StyleSheets #Consistency #Browsers #WebDesign #WebDev #Frontend #CSS

My Opinionated CSS Reset

* { all: unset; }

Vale.Rocks

#Development #Pitfalls
Don’t inherit the CSS box model · “It’s time to stop spreading this out-dated practice.” https://ilo.im/166n47

_____
#CSS #CssReset #BoxModel #Inheritance #Legacy #WebDev #Frontend

Don't Inherit the Box Model

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

OddBird

“A CSS reset, but every value is suffixed with !important.” — Declan Chidlow

_____
#Development #CSS #CssReset #Browser #WebDev #Frontend #Memes #Quotes

#Development #Launches
CSS Boilerplate · A default CSS structure for projects of any size https://ilo.im/163i67

_____
#Boilerplate #CSS #CssReset #CssNesting #WebPerf #WebDev #Frontend #HTML

CSS boilerplate | fokus

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

fokus.dev
uaplus.css | fokus

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

fokus.dev

#Development #Techniques
Addition for CSS reset: interpolate-size · “Animating from 0 to auto has never been so easy.” https://ilo.im/160tv0

_____
#ModernCSS #CssReset #Animation #Transition #ProgressiveEnhancement #VendorPrefix #Browser #WebDev #Frontend #CSS

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
by Mayank @mayank
#css #CSSreset #webdev

https://mayank.co/blog/css-reset-layer/

Your CSS reset should be layered

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

#Development #Techniques
You’re not a CSS developer without a reset · A CSS reset can also elevate your typesetting https://ilo.im/160pq6

_____
#CSS #CssReset #Scrolling #Spacing #Typesetting #Kerning #Accessibility #Browser #WebDev #Frontend

#Development #Approaches
Your CSS reset should be layered · Why and how to use cascade layers for CSS resets https://ilo.im/160ozp

_____
#CSS #CssReset #CascadeLayers #Specificity #BrowserSupport #Browser #WebDev #Frontend

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¹) 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² and the first content link in his 404 page³.

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), 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:

¹ https://en.wikipedia.org/wiki/Reset_style_sheet
² https://meyerweb.com/ui/about.html
³ https://meyerweb.com/404
https://indieweb.org/

#undoHTML #undoHTMLCSS #reset #CSSreset #resetstyles #webdesign #technology #invention #indieweb
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