Taking a look at Reseter.css

Reseter.css describes itself as "A Futuristic Alternative To Normalize.css And CSS Resets". Since similar libraries have been around for ages, I took a closer look at what "futuristic" means codewise.

By the way, CSS resets and normalizers are just a collection of styles that overwrite the browser's default styles. It's the first thing you include, write or copy-paste. Usually, the rules go as far as to make elements look the same cross-browser. So it's a foundational layer on which you can build.

Here are the things I found interesting...

It undoes all animations when the user prefers reduced motion. Too many times, we ignore or forget about the user preferences, so this is a no-brainer.

I'm not quite sure why the delay is -1ms and the duration is 1ms instead of 0.

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-delay: -1ms;
        animation-duration: 1ms;
        animation-iteration-count: 1;
        background-attachment: initial;
        scroll-behavior: auto;
        transition-delay: 0s;
        transition-duration: 0s;
    }
}

The size of the headers take into account the viewport dimension.

h2 {
    font-size: calc(1.325rem + 0.9vw);
}

@media (min-width: 1200px) {
    h2 {
        font-size: 2rem;
    }
}

There's a micro-optimization to disable gestures such as double-tap to zoom on touchscreen devices for elements that you would tap (click).

a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
    touch-action: manipulation;
}

It assumes that SVGs that don't explicitly define the fill color should match the contextual color. Usually, this is what we want for icons.

My guess, that this alone is not enough. The descendants of the svg should inherit this, and the stroke should be set to currentColor too.

svg:not([fill]) {
    fill: currentColor;
}

Uses the match-parent for the text alignment, which I never saw before.

th {
    text-align: -webkit-match-parent;
}

It takes advantage of the operating system level styles in some places. I completely forgot that these exists.

button,
input,
select,
textarea {
    border: 1px solid WindowFrame;
}

There is a nicer looking dropdown icon for the select input.

select:not([multiple]):not([size]) {
    background-image: "data:image/svg+xmlcharset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E";
}

It uses intrinsic sizes in some places. If this is new to you, check out the Intrinsic Sizing In CSS article to wrap your hand around this.

dialog {
    height: fit-content;
    width: fit-content;
}

Cursors are set based on the aria states. Much prefer this than having to add extra class elements.

[aria-busy="true"] {
    cursor: progress;
}

[aria-controls] {
    cursor: pointer;
}

[aria-disabled="true"],
[disabled] {
    cursor: not-allowed;
}

There are bunch of styles for specific browsers.

::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
    padding: 0;
}

Some styles are too opinionated for my taste, for example the legend.

legend {
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: 0.5rem;
    font-size: calc(1.275rem + 0.3vw);
    line-height: inherit;
    max-width: 100%;
    white-space: normal;
}

But overall, this library has some good ideas that I'll include in my starter files.