Es gibt eine Hülle und Fülle Anzahl an CSS-Regeln, dabei gibt es weniger bekannte aber sehr nützliche CSS-Regeln, hier stelle ich einige vor:

Box-Sizing:
* {
box-sizing:border-box;
}
Hier werden Padding und Border inkludiert zur Breite, das ist sehr nützlich beim responsive Design.

Kindelemente:
article *  {
color:#ccc;
}
Allen Kindelementen Eigenschaften zuweisen.

:is():
article :is(h1,h2,h3,h4) {
color:#f00;
}
Kurzschreibweise anstatt:
article h1,article h2,article h3, article h4 {
color:#f00;
}

:has():
article:has(.post){
color:#f00;
}
Endlich gibt es auch einen Parent-Selektor!

Aspect-ratio:
iframe {
aspect-ratio:4/3;
}
Festes Seitenverhältnis definieren, für Bilder, Iframes, Videos oder einfach auf Container.

Filter:grayscale(1):
img{
filter: grayscale(1);
}
Bilder schwarz/weiß machen.

Calc();
div {
width:calc(100% - 50px);
}
CSS-Berechnungen, nützlich!

Fit-content;
div {
width:fit-content;
}
Breite auf Inhalt anpassen.

Scroll-behavior:
html {
scroll-behavior: smooth;
scroll-padding-top: 50px;
}
Weiches Scrollen zu Ankern, mit Offset – kein Javascript nötig!

VW oder VH:
.slider{
width:100vw;
}
Einheiten für Breite 100vw sind quasi 100% vom Browser.

Nun haben wir einige CSS-Regeln gezeigt!