Uma convenção de nomenclatura de emojis

Há muitos lugares novos em CSS para nomeação. Agora você pode rapidamente se pegar usando o mesmo nome, que é único, mas é único em um contexto… e isso é realmente difícil de lembrar.

Aqui está um exemplo simples:

@keyframes foo {}
@property --foo {}

.element {
  --foo: bar;
  animation: foo linear both;
  view-timeline-name: --foo;
  view-transition-name: foo;
  anchor-name: --foo;
  container-name: foo;
}

Observe também como há nomes tracejados e não tracejados… alguns recursos CSS exigem nomes tracejados, enquanto outros não. Yay.

A boa notícia é que o CSS pode manter o controle de tudo. A má notícia é que estou com dificuldades.

Não uma resposta, mas uma resposta?

Na verdade, não estou tentando resolver esse problema com essa sugestão, mas… talvez eu esteja? kkkk

Poderíamos usar emojis para ajudar a delinear o uso pretendido .

Aqui, quadros-chave, propriedades personalizadas digitadas e valores de paleta de fontes são identificados exclusivamente com um prefixo de emoji .

@keyframes 🔑-example {}
@property --﹫-example {}
@font-palette-values --🔡-example {}

Isso deixa claro quando você deve usá-los:

.element {
  --﹫-example: bar;
  animation: 🔑-example linear both;
}

Então, com base nisso, fui um pouco mais longe… e atribuí emojis para qualquer coisa que você possa nomear de forma personalizada:

@keyframes 🔑-example {}
@property --﹫-example {}
@font-palette-values --🔡-example {}

:root {
  --﹫-example-typed: baz;
  --🔒-example-private: foo;
  --regular-var: bar;
}

::view-transition-group(.🏘️-example) {}
::view-transition-new(🏞️-example) {}

@layer 🥞-example {
  .🤓-example-class {
    container-name: 📦-example;
    view-transition-name: 🏞️-example;
    view-transition-class: 🏘️-example;
    view-timeline-name: --📽️-example;
    anchor-name: --⚓-example;
    font-palette: --🔡-example;
    animation: 🔑-example 1s;

    > p {
      @container 📦-example (inline-size < 20ch) {
        font-size: var(--﹫-example);
      }
    }
  }
}

@layer 🥞-example-utilities {
  .🔧-utility-class,  
  .🧹-reset-class,  
  .🔍-debug-class {
    …
  }
  
  .🗣️-sr-only {}
  
  .🍱-grid {}
}

Isso funciona?!

Sim, CSS perfeitamente válido. Experimente no Codepen.

Perdi a oportunidade de escolher um prefixo de emoji?

Provavelmente! Comente sobre Bluesky ou Mastodon e eu os adicionarei!

Como menção final aqui, acho que é uma boa ideia adicionar --todos os seus nomes personalizados, apenas para deixar bem claro que eles não são palavras-chave CSS internas.