Un selector es el puente lógico entre tu estructura de datos (HTML) y tu diseño visual (CSS). Elegir el selector correcto es un balance arquitectónico entre precisión técnica, rendimiento y reusabilidad del código.
1Tags vs. Classes: Global vs. Modular
El Selector de Etiqueta (Tag) (ej. p, h1) ataca directamente al elemento nativo de HTML. Es ideal para tipografía global y resets (* { margin: 0; }). Sin embargo, su uso excesivo en componentes específicos crea código frágil.
El Selector de Clase (.classname) es el núcleo de la arquitectura Frontend moderna. Permite aislar estilos en componentes reusables (como .btn o .card), aplicando el principio DRY (Don't Repeat Yourself) y permitiendo escalabilidad extrema.
2La Potencia del ID y la Especificidad
Un Selector de ID (#idname) identifica un único nodo en el DOM. Debido a esta unicidad estricta requerida por HTML, los navegadores le otorgan una Especificidad masiva. En el cálculo de cascada, un solo #id sobreescribe la influencia de decenas de .classes combinadas.
### Mejores Prácticas (Input-Output)
Si escribes <button id="submit" class="btn-red"> y en CSS defines .btn-red { background: red; } pero #submit { background: blue; }, el botón será azul irrevocablemente. Por esto, los ingenieros senior reservan los IDs para JavaScript hooks y puntos de anclaje de accesibilidad, usando clases exclusivamente para el CSS.
