¿Qué caracteres son válidos en los nombres / selectores de clase CSS?

¿Qué caracteres / símbolos están permitidos dentro de los selectores de clase CSS ?
Sé que los siguientes caracteres no son válidos , pero ¿qué caracteres son válidos ?

~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #

Puede consultar directamente en la gramática CSS .

Básicamente ¹ , 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 personaje debe ² sea 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 a la siguiente, extraída de la especificación W3C. :

En CSS, los identificadores (incluidos los nombres de elementos, clases e ID en los selectores) pueden contener solo los caracteres [a-z0-9] y los caracteres ISO 10646 U + 00A1 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 escapados 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 generalmente están reservados para extensiones específicas del navegador, como en -moz-opacity.

¹ Todo se vuelve un poco más complicado por la inclusión de caracteres Unicode escapados (que nadie usa realmente).

² Tenga en cuenta que, según la gramática que vinculé, una regla que comienza con DOS guiones, por ejemplo --indent1, no es válida. Sin embargo, estoy bastante seguro de haber visto esto en la práctica.

Para mi sorpresa, la mayoría de las respuestas aquí son incorrectas. Resulta que:

Cualquier carácter, excepto NUL, está permitido en los nombres de clase CSS en CSS. (Si CSS contiene NUL (escapado o no), el resultado no está definido. [ CSS-caracteres ])

La respuesta de Mathias Bynens enlaza con 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 innecesariamente escapada 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 nombres de variables de escape ("identificadores"), por lo que todas las representaciones de una variable deben tener el mismo aspecto. Este no es el caso en 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: cuide NUL y espacio, y escape (en consecuencia para CSS o HTML). Hecho.

He respondido 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 hice una herramienta útil para esto. De esa página:

Si le diera a un elemento un valor de ID ~!@$%^&*()_+-=,./';:"?><[]{}|`#, el selector se vería así:

CSS:

<style>
  #\~\!\@\$\%\^\&\*\(\)\_\+-\=\,\.\/\'\;\:\"\?\>\<\[\]\\\{\}\|\`\#
  {
    background: hotpink;
  }
</style>

JavaScript:

<script>
  // document.getElementById or similar
  document.getElementById('~!@$%^&*()_+-=,./\';:"?><[]\\{}|`#');
  // document.querySelector or similar
  $('#\\~\\!\\@\\$\\%\\^\\&\\*\\(\\)\\_\\+-\\=\\,\\.\\/\\\'\\;\\:\\"\\?\\>\\<\\[\\]\\\\\\{\\}\\|\\`\\#');
</script>

Lea la especificación W3C . (este es CSS 2.1, encuentre la versión adecuada para su suposición de navegadores)

editar: sigue el párrafo relevante:

En CSS, los identificadores (incluidos los nombres de elementos, clases e ID en los selectores) pueden contener solo los caracteres [a-z0-9] y los caracteres ISO 10646 U + 00A1 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 escapados 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".

edición 2: como @mipadi señala en la respuesta de Triptych, existe esta advertencia , también en la misma página web:

En CSS, los identificadores pueden comenzar con '-' (guión) o '_' (guión bajo). Las palabras clave y los nombres de propiedad que comienzan con '-' o '_' están reservados para extensiones específicas del proveedor. Dichas extensiones específicas del proveedor deben tener uno de los siguientes formatos:

'-' + vendor identifier + '-' + meaningful name 
'_' + vendor identifier + '-' + meaningful name

Ejemplo (s):

Por ejemplo, si la organización XYZ agrega una propiedad para describir el color del borde en el lado este de la pantalla, podría llamarlo -xyz-border-east-color.

Otros ejemplos conocidos:

 -moz-box-sizing
 -moz-border-radius
 -wap-accesskey

Se garantiza que un guión inicial o guión bajo nunca se utilizará en una propiedad o palabra clave por ningún nivel actual o futuro de CSS. Por lo tanto, las implementaciones de CSS típicas pueden no reconocer tales propiedades y pueden ignorarlas de acuerdo con las reglas para manejar los errores de análisis. Sin embargo, debido a que el guión inicial o el guión bajo es parte de la gramática, los implementadores de CSS 2.1 siempre deberían poder usar un analizador compatible con CSS, independientemente de que admitan o no extensiones específicas del proveedor.

Los autores deben evitar extensiones específicas del proveedor

La expresión regular completa es:

-?(?:[_a-z]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])(?:[_a-z0-9-]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])*

Por lo tanto, todos los caracteres enumerados, excepto " -" y " _", no están permitidos si se usan directamente. Pero puede codificarlos con una barra diagonal inversa foo\~baro con la notación unicode foo\7E bar.

Para aquellos que buscan una solución alternativa, puede usar un selector de atributos, por ejemplo, si su clase comienza con un número. Cambio:

.000000-8{background:url(../../images/common/000000-0.8.png);} /* DOESN'T WORK!! */

a esto:

[class="000000-8"]{background:url(../../images/common/000000-0.8.png);} /* WORKS :) */

Además, si hay varias clases, creo que deberá especificarlas en el selector.

Fuentes:

1. https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
2. ¿Hay alguna solución para hacer que las clases CSS con nombres que comienzan con números sean válidas?

Tengo entendido que el guión bajo es técnicamente válido. Revisa:

https://developer.mozilla.org/en/underscores_in_class_and_id_names

"... erratas a la especificación publicada a principios de 2001 hizo que los subrayados fueran legales por primera vez".

El artículo vinculado anteriormente dice que nunca los use, luego proporciona una lista de navegadores que no los admiten, todos los cuales son, en términos de números de usuarios al menos, redundantes durante mucho tiempo.

Para HTML5 / CSS3, las clases y los ID pueden comenzar con números.

A partir de la respuesta de @ Triptych, puede usar las siguientes 2 coincidencias de expresiones regulares para que una cadena sea válida:

[^a-z0-9A-Z_-]

Esta es una coincidencia inversa que selecciona cualquier cosa que no sea una letra, número, guión o guión bajo para facilitar su eliminación.

^-*[0-9]+

Esto coincide con 0 o 1 guiones seguidos de 1 o más números al comienzo de una cadena, también para una fácil eliminación.

Cómo lo uso en PHP:

//Make alphanumeric with dashes and underscores (removes all other characters)
$class = preg_replace("/[^a-z0-9A-Z_-]/", "", $class);
//Classes only begin with an underscore or letter
$class = preg_replace("/^-*[0-9]+/", "", $class);
//Make sure the string is 2 or more characters long
return 2 <= strlen($class) ? $class : '';