Estilos en línea como clases (risas)

Si odias usar estilos en línea, ¡simplemente muévelo styleal classatributo! Y luego asegúrese de tener CSS implementado que, ya sabe, haga lo que dice en la caja.

He revolucionado CSS. pic.twitter.com/1AWCldyCwP

– sam “espacio de ancho cero” thor (@samthor) 10 de junio de 2021

Está bien, déjame profundizar y arruinar totalmente el chiste.

• En primer lugar, es una broma, así que no hagas esto. Ni siquiera me importa el estilo en línea ocasional para cosas únicas, pero esto no es eso.
• Para mí, la parte más extraña es ese .carácter de punto (). Escapar de los caracteres más inusuales con una barra invertida () parece normal, pero ¿a qué se debe ese período? ACTUALIZACIÓN : Es por el espacio. Son dos clases en HTML, no una. Derp.
• El pequeño truco del punto no funciona cuando el siguiente carácter es un número (por ejemplo .padding:.1rem;). ACTUALIZACIÓN : Porque las clases que comienzan con un número no son válidas. Derp.
• Puedes evitar el escape y el engaño si utilizas un selector de atributos como [class*="display: flex;"].
• Esto me recuerda la investigación de Mathias Bynens: secuencias de escape de caracteres CSS . Pero… ¿eso parece que ya no funciona? Me pregunto si los navegadores cambiaron o si la herramienta se rompió y ya no produce lo que debería (por ejemplo, ¿se ve .color3A #f06d06bien?).

Aquí está todo ese juego: