It has become quite common to define box-sizing: border-box to the * selector and also to include reset styles to all or many elements. This not only has slight performance issues but is also a bit limited (I’ll explain).
So I’m proposing an ::inital selector.
On it’s own, it would affect all elements.
Let’s do some examples.
::initial {
box-sizing: border-box;
}
would do basically the same as
* {
box-sizing: border-box;
}
*:before,
*:after {
box-sizing: border-box;
}
But it doesn’t need to parse through each and every element first, overwriting the browsers default behaviour. Instead the browser simply overwrites it’s own default styles for all elements and be done with it.
This one is nice:
::initial {
transition-timing-function: ease-in-out;
}
If you like all your transitions to use this timing function, you don’t have to set it every time or go with the * selector again. The problem with * would be that you can’t use transition: name; because it would then go back to the default behaviour of “ease”.
For Sass-users, this would be similar:
$base-timing-function: "ease" !default; // overwrite this to your needs
@mixin transition($property, $timing-function: $base-timing-function) {
transition: $property, $timing-function;
}
element {
@include transition(property);
}
Let’s use the :matches() aka :any() selector to be more specific (in a modern way)
:matches(article, aside, header, footer, [...])::inital {
display: block;
}
There are many usecases for this and it would be a good performance bump. What do you say?
