Los selectores CSS que desearía haber aprendido antes
Pasé años escribiendo CSS inflado con demasiadas clases antes de descubrir un puñado de selectores que lo cambiaron todo. Esto es lo que desearía que alguien me hubiera mostrado antes.
Mi CSS temprano parecía una pesadilla de nombres de clase. \\x60header-nav-item-active\\x60. \\x60sidebar-link-wrapper-inner\\x60. Estaba creando una nueva clase para cada variación de estilo porque simplemente no sabía que había una mejor manera. Cuando finalmente descubrí los selectores CSS adecuados, eliminé aproximadamente el cuarenta por ciento de mis hojas de estilo en una sola tarde.
El selector que me cambió la vida primero fue el combinador hijo — el humilde símbolo \\x60>\\x60. Antes de aprender sobre él, si quería estilizar solo los hijos directos de un contenedor, creaba una clase específica o accidentalmente estilizaba todo lo anidado dentro. El combinador hijo me permitía apuntar solo a los hijos directos, dejando intactos a los nietos. Suena pequeño, pero eliminó docenas de clases innecesarias de la noche a la mañana.
Luego llegó \\x60:nth-child()\\x60. No puedo decirte cuántas veces había escrito clases específicas como \\x60fila-1\\x60, \\x60fila-2\\x60, \\x60fila-3\\x60 solo para alternar colores de fondo en una tabla. \\x60:nth-child(even)\\x60 y \\x60:nth-child(odd)\\x60 me habrían ahorrado horas literales. Y una vez que empiezas a usar fórmulas como \\x60:nth-child(3n+1)\\x60, te das cuenta de que puedes apuntar a cada tercer elemento, o a los primeros cuatro, o a cualquier patrón que se te ocurra sin tocar tu marcado.
La pseudoclase \\x60:not()\\x60 fue otra revelación. Solía escribir largas cadenas de selectores para excluir un elemento específico. Ahora simplemente escribo algo como \\x60div:not(.excluido)\\x60 y sigo adelante. Es mucho más limpio, y me hizo pensar en mi lógica CSS de manera diferente — más sobre lo que quiero excluir que sobre lo que quiero incluir.
Los selectores de atributo fueron la joya oculta en la que tropecé al final. \\x60[type="text"]\\x60 me permite apuntar a todas las entradas de texto sin una clase. \\x60[href^="https"]\\x60 apunta solo a enlaces seguros. \\x60[href$=".pdf"]\\x60 apunta a enlaces de descarga. Estos son increíblemente potentes para estilizar formularios y enlaces, y requieren cero marcado adicional.
El combinador hermano adyacente — el signo \\x60+\\x60 — se convirtió en mi mejor amigo para los espacios. Necesitas un margen entre cada elemento de lista excepto el primero? \\x60li + li { margin-top: 10px; }\\x60 lo hace en una línea. Sin anulaciones de first-child. Sin clase especial en el primer elemento.
El selector \\x60:empty\\x60 suena de nicho hasta que te das cuenta de cuán a menudo los frameworks dejan divs vacíos en tu marcado. \\x60:empty { display: none; }\\x60 limpió mis diseños al instante.
Lo que me di cuenta al pasar por todo esto fue que había estado tratando CSS como un sistema de etiquetado explícito cuando en realidad es un sistema de coincidencia de patrones. Los selectores son el lenguaje para describir los patrones. Una vez que aprendí a describir lo que quería en términos de relaciones y posiciones en lugar de nombres, todo hizo clic.
Si todavía estás escribiendo nombres de clase como \\x60item-1\\x60, \\x60item-2\\x60, \\x60item-3\\x60, para. Abre una referencia sobre selectores CSS y pasa una hora aprendiendo los combinadores y pseudoclases. Será la hora más productiva de tu semana.