Custom ident и dashed ident

В CSS есть два типа значений: <custom-ident> и <dashed-ident>. Оба типа позволяют создавать произвольные идентификаторы для некоторых сущностей. В отличие от строкового типа, для идентификаторов не требуются кавычки.

<custom-ident> используется для именования счётчиков, ключевых кадров, линий и областей сетки. Это значения list, bounce, logo, nav и search в следующем примере:

ul {
  counter-reset: list;
}

li {
  counter-increment: list;
}

li::before {
  content: counter(list);
}

@keyframes bounce {
  /* ... */
}

.bounce { 
  animation-name: bounce;
  /* ... */
}

.header {
  grid-template-area: 'logo nav search' ;
} 

.header__logo {
  grid-area: logo;
}

.header__nav {
  grid-area: nav;
} 

.header__search {
  grid-area: search; 
}

Тип <dashed-ident> будет знаком по синтаксису пользовательских свойств. Это такой же произвольный идентификатор, но который должен начинаться с двух дефисов --. Не всем нравятся эти лишние символы, но на то есть ряд исторических причин.

Многие новые возможности CSS используют тип <dashed-ident> для именования. Среди них view-transition-name, anchor-name, anchor-target, view-timeline-name, scroll-timeline-name, функции и миксины.

Кевин Пауэлл в видеокасте рассуждает о статье Ромы Комарова об именовании сущностей. Как не запутаться, где нужно использовать <custom-ident>, а где <dashed-ident>? Рома предлагает решение.

Дело в том, что <custom-ident> может содержать в начале два тире, потому что тире — это обычный символ, который разрешён в идентификаторах. Поэтому все пользовательские идентификаторы можно начинать с --.

Тогда не имеет значения, это <custom-ident> или <dashed-ident>, синтаксис будет одинаковый, а запоминать разницу не придётся. Хотя такой подход странновато выглядит в именованных областях и линиях сетки, он имеет право на жизнь.

ul {
  counter-reset: --list;
}

li {
  counter-increment: --list;
}

li::before {
  content: counter(--list);
}

@keyframes --bounce {
  /* ... */
}

.bounce { 
  animation-name: --bounce;
  /* ... */
}

.header {
  grid-template-area: 
    '--logo --nav --search'
   ;
} 

.header__logo {
  grid-area: --logo;
}

.header__nav {
  grid-area: --nav;
} 

.header__search {
  grid-area: --search; 
}

#css