Adiós a los selectores de atributos verbosos en CSS 🤯
Finalmente, la especificación de CSS Selectors Level 5 está trayendo algo que necesitábamos hace años: el selector de prefijo de clase. El problema es conocido por cualquiera que gestione un Design System. Para aplicar
Artículo
Una lectura sobre tecnología y sistemas digitales, escrita para ir al punto y dejar claras las ideas principales.
Tema principal
desarrollo frontend
Fuente
dev.to
Puntos clave
- Finalmente, la especificación de CSS Selectors Level 5 está trayendo algo que necesitábamos hace años: el selector de prefijo de clase.
- El problema es conocido por cualquiera que gestione un Design System. Para aplicar estilos base a múltiples variantes (como .btn-primary, .btn-secondary, .btn-danger), tenemos dos caminos malos:
- O listamos cada clase manualmente (una pesadilla de mantenimiento) o usamos selectores de atributos como [class^="btn-"], que son verbosos, difíciles de leer y pueden impactar el rendimiento del renderizado.
- El insight clave es la llegada de la sintaxis .prefix-, que combina la limpieza de una clase con la potencia de un comodín.
Bloque 1
Finalmente, la especificación de CSS Selectors Level 5 está trayendo algo que necesitábamos hace años: el selector de prefijo de clase.
El problema es conocido por cualquiera que gestione un Design System. Para aplicar estilos base a múltiples variantes (como .btn-primary, .btn-secondary, .btn-danger), tenemos dos caminos malos:
Bloque 2
O listamos cada clase manualmente (una pesadilla de mantenimiento) o usamos selectores de atributos como [class^="btn-"], que son verbosos, difíciles de leer y pueden impactar el rendimiento del renderizado.
El insight clave es la llegada de la sintaxis .prefix-, que combina la limpieza de una clase con la potencia de un comodín.
Bloque 3
Lo que necesitas saber:
• Sintaxis optimizada: Escribir .btn- es infinitamente más legible que los substring selectors tradicionales. • Rendimiento nativo: Al ser una funcionalidad del spec, el navegador puede optimizar la selección mejor que con un atributo genérico. • Especificidad controlada: Mantiene el valor de un selector de clase (0,1,0), evitando romper la cascada de tus estilos. • Estrategia de despliegue: Por ahora, es vital usar @supports selector(.prefix-) para asegurar la compatibilidad progresiva.
Bloque 4
Es un cambio pequeño en la escritura, pero un salto enorme en la ergonomía de nuestros stylesheets.
¿Ustedes siguen usando BEM estrictamente o ya están migrando a metodologías más dinámicas en sus proyectos?