dev.css: tiny, simple, classless CSS framework inspired by new.css

Some review from skimming.

---

:root {
	--dc-font: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;
	--dc-font-mono:
		"Geist Mono", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
		Consolas, "DejaVu Sans Mono", monospace;
}

These are bad defaults. There’s a little nudge from the README about Geist and Inter, but there’s limited guidance and they’re not there out of the box, so it doesn’t make sense for this to handle them out of the box. As for ui-sans-serif and system-ui, they’re controversial and I would recommend removing both.

In the monospace list: drop Cascadia Code, Source Code Pro, Menlo, Consolas and DejaVu Sans Mono. monospace will resolve to something no worse than these (I think Firefox was the last to ditch the irredeemably-bad Courier New, four years ago), and quite possibly better. ui-monospace is bad in a similar way to ui-sans-serif and system-ui.

Quite seriously: try just leaving sans-serif and monospace.

---

:root {
	--dc-cs: light dark; /* light and dark scrollbars, inputs, etc */
	color-scheme: var(--dc-cs);
}

Don’t do variables like this. Drop --dc-cs and just write color-scheme: light dark. If someone wants to override it, they can write color-scheme rather than --dc-cs too. There’s no advantage.

---

*, *::before, *::after {
	margin: 0;
}

‹list of 33 elements› {
	margin-bottom: 1rem;
}

I never much like total margin resets. For applications I concede there can be merit. But this isn’t that. This is a simple content web page stylesheet. I reckon this is the wrong approach.

Subsequent margin-bottom declarations show a fundamental unsoundness in how this stuff is being used.

---

#root,
#__next {
	isolation: isolate;
}

This has no place in such a stylesheet. Read why Josh suggested it, and realise why it doesn’t make sense here. Also the balance has shifted a lot in the five years since Josh put that in, and the top layer is a useful concept.

---

a {
	text-decoration: none;
}

This was never a good idea. The underlines are a valuable affordance. Personally, I’ve been using something approximately equivalent to :any-link:not(:hover, :focus-visible, :active) { text-decoration-color: color-mix(in srgb, currentcolor 30%, transparent) } almost everywhere (including in a user stylesheet to fix others’ websites) for about eight years.

---

@supports not (color: light-dark(#fff, #000)) {
	a {
		text-decoration: underline;
	}
}

Can’t make any sense of this. Why would you want to restore the underlines specifically for browsers from roughly 2012/2015–2023/2024? This also suggests you want things to work if light-dark() isn’t available. I’ll say: they don’t.

---

::selection {

Please don’t.

---

body {
	overflow-x: hidden;
}

Please never do this. Never. If it is useful, then you were probably doing the wrong thing (e.g. width: 100vw—viewport units are broken by design and Firefox’s fix was killed by the others for no good reason, so make sure you can use 100% instead), and it runs the risk of cutting content off so that the user can’t access it at all, especially on smaller displays. There are a few cases where you do genuinely need something like this: mainly, when you’re deliberately clipping something, or when you’re using a 3D transform that happens to make the bounding box overflow the viewport although nothing is actually lost visually. In such cases, I recommend applying the overflow-x to as small a part of the page as possible, and using clip instead of hidden because you probably don’t want vertical overflow to make the element scrollable, you want it to still overflow.

---

*:last-child

(And the likes.) The * there is not actually necessary. Just write :last-child. You only need * if there’s no tag name/class/pseudoclass/pseudoelement.

---

aside {
	position: absolute;
}

Ouch. That is going to bite some users. Consider using float instead, or making the parent a grid (more involved, better in various ways but more limiting in others).

---

a button

Links should never contain interactive content. If this selector ever matches, it shouldn’t have. Did you mean .button like in the subsequent ones? Not classless, by the way.

---

details:not(aside details)

I was going to comment on complex selector support in :not() being fairly new, but… I think it might actually be early 2021 now that everyone had it. Huh. How time flies.

---

There are a lot of magic numbers in margins and gaps, a lot of which don’t end up feeling very nice to me. Lots of arbitrary choices, many of which are too small.

---

(Meta: hmm, should contribute a patch setting tab-size: 4, possibly down to a smaller value on narrower viewports.)