CSS 1

.some-class {
  color: red;
}

all - rule
color: red - declaration

@supports (display: flex) {
  .some-class {
    color: pink;
  }
}

Нельзя вкладывать @media в @supports

initial, inherit, unset, auto

browsers' default stylesheets

reset in CSS4 не работает на псевдоэлементах в контролах

body * {
  all: unset;
}

можно в принципе использовать normalize

inline
ids
classes, attrs, pseudoclasses
tag, pseudoelements

* - не добавляет specificity
:not() - равен тому, что внутри

value внутри @keyframe - может перебить inline important

Если нужны вложенные компоненты без js - БЭМ

:nth-of-type
:nth-child
link

[attr] selectors
link

:root (почти как html, но выше приоритет, но может быть и svg например)
:not
:matches(article, section, aside) h1 = article h1, aside h1 ...

:target - табы/pop-up без js
:checked

[type=checkbox]:checked + span {
  color: red;
}
~
>
>>

:link (a без href не будет линком), :visited, :focus, :hover, :active
link

:invalid, :valid
:empty

::first-letter
::first-line
::placeholder
::selection

Если в селекторе браузер находит что-то, что он не понимает, то перестает парсить весь селектор

::marker
::backdrop

::speling-error
::grammer-error

Лучше делать вместо .5s 500ms

Custom properties

:root {
  --button-color: red;
}

section {
  --button-color: green;
}

button {
  background: var(--button-color);
}

Лучше не синхронизировать прилипающий header с js (position sticky). plugin

Избегать
transform: translateZ(0.5px)
transition-property: all 500ms ease-in-out

Не программировать на препроцессорах (поэтому лучше less, чем sass, а вообще postcss)