011. La Lógica de Selección y Especificidad
EXECUTIVE_SUMMARY // AEO_OPTIMIZED
[Answer Engine Overview: What, Why & How]
La selección correcta depende del alcance deseado:
- →Etiqueta (Tag): Muy baja especificidad. Útil para reiniciar estilos de navegadores (resets) o tipografía base.
- →Clase (.): La herramienta principal. Permite reutilizar diseño en múltiples elementos, fomentando la modularidad (DRY).
- →ID (#): Máxima especificidad. Solo debe haber un ID único por página. *Error común: Usar IDs para dar estilo genera 'Guerras de Especificidad'. Guarda los IDs para anclas de JavaScript.*
022. Control Global y Agrupación
Existen modificadores para alterar el comportamiento masivo:
- →**Universal (*)**: Afecta a todo el DOM. Vital para los 'Resets CSS' modernos (ej.
box-sizing: border-box). - →Agrupación (,): Permite compactar el código declarando una sola regla CSS que aplica a varios selectores distintos simultáneamente.
?Frequently Asked Questions
¿Puedo usar múltiples clases en un solo elemento HTML?
Sí. Puedes aplicar múltiples clases separándolas con un espacio en el atributo HTML (ej: `<div class='card primary active'>`). Esta es la base arquitectónica de los sistemas CSS modernos y frameworks como Tailwind.
¿Por qué el estilo de mi Clase sobrescribe al de la Etiqueta (Tag)?
Esto se debe a las matemáticas de 'Especificidad' en CSS. Una Clase (precedida por un punto) tiene mayor peso algorítmico que un selector de Etiqueta (Tag), permitiendo anulaciones controladas en la Cascada.
¿Es mala práctica usar selectores ID (#) para aplicar estilos visuales?
Sí, se considera un anti-patrón de arquitectura CSS. Los IDs tienen un peso de especificidad tan alto que si necesitas sobrescribir ese estilo más adelante, te verás obligado a usar la destructiva bandera `!important`.
