Por norma general, el CSS se moldea a partir de clases. Esto en ocasiones genera mucho ruido, una acumulación de clases para gestionar los diferentes estados de un elemento. Una forma diferente de trabajar es tratar a los atributos de la misma manera que se hace con las clases. No se trata de utilizarlos solo en casos especiales, sino de incluirlos en es uso común, sin renunciar a la estructura que se busca en las convenciones de nombrado CSS.
Un argumento importante a favor de esta manera de organizar el CSS es que las clases se usan, con demasiada frecuencia, para estilizar diferentes estados o variantes de un elemento. Estos estados deberían estar semánticamente representados por otros medios, como atributos ARIA o pseudo-selectores. Por ejemplo, en lugar de añadir a un elemento de formulario .is-required podríamos utilizar input[required]. Este cambio de enfoque fomenta una la accesibilidad, incentivando el uso de atributos nativos y semánticos, en lugar de recurrir a clases adicionales.
Si se busca un CSS más semántico, es importante cuestionar si se están aprovechando las elementos nativos del HTML. No es necesario añadir una clase adicional cuando ya existe un atributo o pseudo-selector que representa el estado que se desea estilizar. Por ejemplo, consideremos un botón que activa una función de reproducción de video. En lugar de agregar una clase como .is-playing, podríamos utilizar el atributo aria-pressed="true" para indicar que el botón está activado.
Al adoptar esta perspectiva, no solo estamos mejorando la accesibilidad y la claridad del código, sino también reduciendo duplicidades innecesarias y promoviendo un enfoque más eficiente y mantenible de la web. Es hora de repensar las prácticas CSS y darle la importancia que se merece a los atributos en la jerarquía de selectores.
