Classes named with emoji characters

Question

I was sailing in the web and suddenly I’m faced with it:

Yes, it is a "named" class with emoji characters.

I was curious and decided to perform some tests to see how it worked, after all, it’s not every day that we see something like this.

Upshot:

.{
  color: red;
}
. {
  color: green;
}
# {
  color: blue;
  
}

<p class=""> Classe de cor vermelha </p>
<p class=""> Classe de cor verde </p>
<p id=""> Id de cor azul </p>

My question is:

Naming classes and ids this way, can I have some problem? I mean, with incompatibility with some browser, or even problem at the time of rendering CSS?

Is it semantic to make appointments like this? What if it’s specific cases?

For example, a class only for red circles:

.{
   background-color: red;
   width:50px;
   height:50px;
   border-radius:100%;
   
}

<div class=""> </div>

I can make the appointment this way without running the risk of the browser not recognizing?