Home blog usare emoji come classi css

Usare Emoji come classi in CSS

23 febbraio 2023

Edoardo Midali

Linkedin

Un articolo curiosità per mostrarvi come le emoji possano essere usate in CSS come selettori di classi e ID. Vedremo come fare, ma soprattutto ci chiederemo se conviene farlo.

Diffusione delle Emoji

Le emoji sono ormai a tutti gli effetti parte del nostro linguaggio e comunicazione digitale. Spesso semplificano il passaggio di concetti base, riducendone il tempo di scrittura.

La cosa non poteva tralasciare il mondo della programmazione dove facciamo un uso importante di nomi, più o meno complessi, per identificare id e classi in CSS. Senza una buona organizzazione per la nomenclatura (naming convention), un progetto lato HTML e CSS può diventare facilmente un disastro. In realtà un progetto grande è complesso anche se ordinato.

Da qui può nascere la necessità, l’istinto e la curiosità di creare selettori con una o combo di emoji.

Usare Emoji in CSS

Per usare delle emoji per classi ed id ci basta inserirle come normali caratteri nel selettore.

#😁 {
  background: red;
  padding: 5px;
}

.😎 {
  background: green;
  padding: 10px;
}

.container-😍 {
  background: purple;
  padding: 25px;
}

Ed il corrispettivo in HTML.

<div id="😁"></div>

<div class="😎"></div>
<div class="😎"></div>

<div class="container-😍"></div>
<div class="container-😍"></div>

Un’altra cosa carina è la possibilità di creare combinazioni di emoji per identificare una classe specifica. Ad esempio potremmo voler definire una classe per un container rosso 📦🟥 ed un’altra per la versione blu 📦🟦.

Essendo attaccate queste due emoji 📦🟥 risultano molto diverse da 📦 🟥. Vediamo un esempio di codice.

.📦 {
  padding: 10px;
}

.🟥 {
  background: red;
}

.🟦 {
  background: blue;
}

.📦🟥 {
  background: red;
  padding: 20px;
}
.📦🟦 {
  background: blue;
  padding: 20px;
}

<p id="📦">solo padding</p>

<p class="🟥">solo bg rosso</p>
<p class="🟦">solo bg blu</p>

<p class="📦🟥">padding e bg rosso (1 classe)</p>
<p class="📦 🟥">padding e bg rosso (2 classi)</p>
<p class="📦🟦">padding e bg blu (1 classe)</p>
<p class="📦 🟦">padding e bg blu (2 classi)</p>

Conviene usare le Emoji?

Il vantaggio di scrivere meno può essere perso facilmente con alcuni svantaggi che questa tecnica porta. Potrei citare:

• difficoltà interpretativa delle emoji tra membri di un team
• la mancanza di simboli per certi termini importanti nello sviluppo
• la differenza sui diversi sistemi operativi

Non sono svantaggi da prendere alla leggera, soprattutto in ambito professionale e di team. Per ora le emoji trovano il loro posto in piccoli progetti di svago.