Solución:
Puede consultar directamente la gramática CSS.
Básicamente1, un nombre debe comenzar con un guión bajo (_), un guión (-), o una letra (a–z), seguido de cualquier número de guiones, guiones bajos, letras o números. Hay una trampa: si el primer carácter es un guión, el segundo carácter debe2 ser una letra o un guión bajo, y el nombre debe tener al menos 2 caracteres.
-?[_a-zA-Z]+[_a-zA-Z0-9-]*
En resumen, la regla anterior se traduce en lo siguiente, extraído de la especificación W3C:
En CSS, los identificadores (incluidos los nombres de los elementos, las clases y los ID en los selectores) pueden contener solo los caracteres [a-z0-9] e ISO 10646 caracteres U + 00A0 y superiores, más el guión (-) y el guión bajo (_); no pueden comenzar con un dígito o un guión seguido de un dígito. Los identificadores también pueden contener caracteres de escape y cualquier carácter ISO 10646 como código numérico (consulte el siguiente elemento). Por ejemplo, el identificador “B&W?” puede escribirse como “B & W?” o “B 26 W 3F”.
Los identificadores que comienzan con un guión o un guión bajo suelen reservarse para extensiones específicas del navegador, como en -moz-opacity.
1 Todo se complica un poco más por la inclusión de caracteres Unicode de escape (que nadie usa realmente).
2 Tenga en cuenta que, de acuerdo con la gramática que vinculé, una regla que comienza con DOS guiones, por ejemplo --indent1, no es válido. Sin embargo, estoy bastante seguro de que he visto esto en la práctica.
Para mi sorpresa, la mayoría de las respuestas aquí son incorrectas. Resulta que:
Se permite cualquier carácter excepto NUL en los nombres de clases CSS en CSS. (Si CSS contiene NUL (con escape o no), el resultado no está definido. [CSS-characters])
La respuesta de Mathias Bynens tiene enlaces a explicaciones y demostraciones que muestran cómo usar estos nombres. Escrito en código CSS, un nombre de clase puede necesitar escapar, pero eso no cambia el nombre de la clase. Por ejemplo, una representación que se haya escapado innecesariamente se verá diferente de otras representaciones de ese nombre, pero aún se refiere al mismo nombre de clase.
La mayoría de los otros lenguajes (de programación) no tienen ese concepto de escapar de los nombres de variables (“identificadores”), por lo que todas las representaciones de una variable deben tener el mismo aspecto. Este no es el caso de CSS.
Tenga en cuenta que en HTML no hay forma de incluir caracteres de espacio (espacio, tabulación, avance de línea, avance de formulario y retorno de carro) en un atributo de nombre de clase, porque ya separan las clases entre sí.
Entonces, si necesita convertir una cadena aleatoria en un nombre de clase CSS: ocúpese de NUL y espacio, y escape (en consecuencia para CSS o HTML). Hecho.
He respondido a su pregunta en profundidad aquí: http://mathiasbynens.be/notes/css-escapes
El artículo también explica cómo escapar de cualquier carácter en CSS (y JavaScript), y también creé una herramienta útil para esto. De esa página:
Si le dieras a un elemento un valor de ID de
[email protected]$%^&*()_+-=,./';:"?><[]{}|`#, el selector se vería así:CSS:
<style> #~!@$%^&*()_+-=,./';:"?><[]\{}|`# { background: hotpink; } </style>JavaScript:
<script> // document.getElementById or similar document.getElementById('[email protected]$%^&*()_+-=,./';:"?><[]\{}|`#'); // document.querySelector or similar $('#\~\!\@\$\%\^\&\*\(\)\_\+-\=\,\.\/\'\;\:\"\?\>\<\[\]\\\{\}\|\`\#'); </script>