What's with the page.css padding?

[corysimmons]

Really want img { max-width: 100% } for every site I ever make, but the html padding in page.css is pretty awkward.

sanitize.css/page.css

Lines 5 to 13 in 5bd695f

	html {
	padding: 1em;
	}
	@media (min-width: 34em) {
	html {
	padding: 1em calc(50% - 16em);
	}
	}

[markhughes]

I don't think page.css is for your use case:

Use a comfortable measure in all browsers (opinionated).

Just use sanitize.css.

[corysimmons]

But these styles are styles (literally?) every developer wants in a reset...

sanitize.css/page.css

Lines 19 to 26 in d3be8b5

	iframe,
	img,
	input,
	select,
	textarea {
	height: auto;
	max-width: 100%;
	}

And they're in the same file.

[markhughes]

Which is why I think you just want sanitize.css not page.css :)

[corysimmons]

Not following. img { max-width: 100% } should be in every single website ever. It should be part of any core reset, not paired with some weird "comfortable measure" applied to the html element...

It's not worth debating though. You either get it or you don't.

[jonathantneal]

@corysimmons, thank you for bringing this up — seriously. I see a lot of merit in your request. I’m very sorry I didn’t address this issue when it first appeared, and I’m sorry I did not get to it this week. If you read no further, know that I would like to add this in a "bundled" file.

I will add it to sanitize.css core if I can find studies that demonstrate the side effects I addressed in #170 (comment) are truly edge-cases for a majority of developers in 2020. Otherwise, the entire reason the bundled files exist is to allow that nuance. Again, I completely agree that image is its own preference, completely outside of page, if I understand you correctly, @corysimmons.

While it was good to document every change in the sanitize.css README, it was my failure to not provide citations as to where those opinionated changes originated. I hope folks understand and respect that I will resist future requests that lack demonstrations, tests, or studies. @corysimmonss, when you said that this is something “every developer wants in a reset”, would you agree that it likely deserved a citation? You provided a citation in your original request. Am I correct that the author of that post stands by the original claim? Is that author the same Ethan Marcotte who helped propel "Responsive Web Design" into fashion? As to your particular claim, might you share some examples of this in other resets? After all, this project intends to follow common developer expectations and preferences.

The only reason there are "bundled" files — like forms.css, typography.css, or page.css — are because those files address subjects that developers consider important to cover, but which also draw strong, divergent opinions.

[corysimmons]

Anecdotally (because I doubt anyone will ever fund/run a double-blind study on whether devs prefer img { max-width: 100% } on every site they ever build) I do like img { max-width: 100% } on every site I ever build... forever.

images not being max-width: 100% is a relic from before the responsive web. The second we started making responsive websites http://unstoppablerobotninja.com/entry/fluid-images/ was written and everyone switched to that approach.

I really don't mind the extra .css files. The obvious fix here is to just separate img, ... { max-width: 100% } to its own bundle like assets.css because html { my-comfy-rule } is too heavy-handed and doesn't pair with the image thing.

In fact, maybe break out everything "extra/opinionated" rule block out and create a React app or something to generate them.

So I can yarn add sanitize.css then checkbox a few rules I want and get sanitize.base.css.

[corysimmons]

@jonathantneal I'm looking to make some simple apps to pad my portfolio a bit. Let me know if you're interested in something like that (reminds me a lot of https://jqueryui.com/download/ btw 👈 THE JQUERY GOLDEN AGE)

[jonathantneal]

I think your idea of assets.css is perfect. I’ll introduce that.

[jonathantneal]

Separated in 54a7da3

[corysimmons]

@jonathantneal ty 🤴