An Emoji Naming Convention

There are many new places in CSS for naming. You can now quickly find yourself using the same name, which is unique, but it's unique in a context… and that's really hard to remember.

Here's a simple example:

@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;
}

Notice too how there's dashed names and undashed… some CSS features require the dashed names while others do not. Yay.

Good news is that CSS can keep track of it all. Bad news, I'm strugglin.

Not an answer, but an answer? #

I'm not actually trying to tackle this problem with this suggestion, but… maybe I am? LOL

We could, use emoji to help delineate the intended use.

Here, keyframes, typed custom properties and font-palette-values are uniquely identified with an emoji prefix.

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

This then makes it clear when you got to use them:

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

So building on this, I went a little further… and have assigned emoji's for anything you can custom name:

@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 {}
}

Does this work?!

Yep, perfectly valid CSS. Try it on Codepen.

Did I miss an opportunity to pick an emoji prefix?

Probably! Comment on Bluesky or Mastodon and I'll add them!

As a final mention here, I think it's a good idea to -- all your custom names, just to make it really clear they aren't internal CSS keywords.

Not an answer, but an answer? #

13 mentions #