varias - ¿Por qué no se recomienda seleccionar por ID en CSS?

selectores css

Question

En CSSLint (csslint.net ), no recomiendan el uso de una id para seleccionar elementos. Confío en CSS Lint porque está escrito por personas inteligentes que conocen CSS muy bien y en profundidad. Pero quiero saber cuales son las razones de esto? ¿Por qué la selección con una id no es algo bueno?

Answer 1

Ante todo:

CSS Lint, al igual que JS lint es una opinión disfrazada de validación, no una autoridad.

He estado en esto durante cinco años. He trabajado en sitios minoristas muy grandes, en agencias interactivas, como contratista individual, y actualmente estoy en una empresa SaaS.

La idea de que las identificaciones son inequívocamente malas, la OMI es solo una idea a la que podría llegar si su CSS-fu cuando se trata de tratar con equipos no fuera tan bueno para empezar.

El CSS bueno y flexible, IMO, sigue las siguientes mejores prácticas generales :

• Siempre mueva de general a específico . La familia de fuentes y el tamaño de fuente más común para el texto del cuerpo general, por ejemplo, solo se deben declarar en un solo lugar. A medida que te mueves a los selectores que generalmente involucran el uso de clases, comenzarás a reemplazar el tamaño de letra. Cuando llega el momento de aplicar una familia de fuentes en su mayoría sin usar a un subconjunto muy específico de HTML, es cuando tiene sentido usar una identificación en un contenedor para golpear los elementos que obtienen la variación del texto del cuerpo.

• Cuanto más generalmente se aplique una propiedad, más fácil debería ser anularla y nunca debe preocuparse por sobrescribir sus propiedades más generales por accidente. Este, por ejemplo, body#some_id div , es un selector increíblemente malo para usar por esa razón. En el nivel 2nd-ish (hay 3 ... ish) donde normalmente se trata más con paquetes de elementos reutilizados comúnmente vinculados a contenedores clasificados, debería ser un poco más difícil sobrescribir esas propiedades por accidente. ''Por accidente'' ocurre con más frecuencia, IMO, cuando tienes montones de selectores de clases múltiples por todas partes. En el último nivel, no debe tratar con elementos reutilizables sino con reemplazos para secciones altamente específicas de un documento. El uso de una ID en estas circunstancias es una práctica ideal, no es mala, pero las ID se utilizan mejor con moderación y solo para las propiedades específicas de los elementos en el contenedor del elemento que la ID realmente necesita cambiar.

• Cuanto más específico es un selector, más difícil debería ser romperlo por accidente. Por especifico, no solo me refiero a las identificaciones en el elemento. Me refiero a un elemento contenedor de ID''d que se asienta cerca del elemento al que realmente apuntas. Sin embargo, la anulación intencional siempre debe implicar un esfuerzo mínimo, que es donde las ID realmente ayudan en lugar de obstaculizarlo (consulte el ejemplo a continuación). Si alguna vez se encuentra en una posición de "quedarse sin identificaciones, clases y etiquetas", recomiendo la violencia (al menos la violencia imaginaria). Pero en serio, alguien merece ser golpeado.

• Evite las listas de selección extensas: debe comenzar a sentirse como si estuviera ''haciendo mal'' cada vez que use regularmente los valores de 4+ selectores para una declaración. No contaría> como una etiqueta / valor al realizar el recuento, ya que usarlo sabiamente es una práctica excelente tanto para el mantenimiento como para el rendimiento.

• Evita las carreras de armas de especificidad: conoces al chico. El novato de "no te metas con mis cosas" que decidió la mejor manera de cubrir su trasero fue usar cada etiqueta, selector e identificación que pudiera comenzar con el cuerpo. No contrates a ese tipo ni lo azotes hasta que se detenga. Pero incluso en equipos más avanzados, las carreras de armamentos aún pueden comenzar con la inocencia suficiente si no añades (con moderación) más peso a los selectores en lugares donde tiene sentido.

El enfoque minimalista en particular es enorme. Cuanto más dependa de la colocación de HTML para evitar necesitar CSS en primer lugar, mejor. Cuanto mejor haya hecho en la distribución de los estilos más generales a nivel mundial, menos tendrá que preocuparse en contextos más específicos. Cuanto más precisas y específicas sean las modificaciones de propiedades altamente específicas y concisas, más fácil será gestionarlas a largo plazo. Y aquí es donde la política general de no identificación es estúpida de la OMI.

¿Qué es más práctico y sencillo de anular?

Esta:

body .main-content .side-bar .sub-nav > ul > li > button

¿O esto?

#sub-nav button

Si generalmente trabaja solo o solo realiza pequeños proyectos para mantener la apariencia de hacer dev de la web para ganarse la vida mientras gana su dinero en los discursos, el de arriba puede parecer tonto y poco probable para usted, pero cuando trabaja con un equipo y usted. estás siguiendo una política de solo clase, y acabas de quemarte por no haber usado una especificidad lo suficientemente alta recientemente, sería muy fácil comenzar a agregar más y más clases y etiquetas a tus cosas (solo para evitar problemas en un plazo corto: Lo volveré a cambiar más tarde, por supuesto), lo que resultará en un enorme e impredecible desorden en sus archivos CSS.

Por lo tanto: intente nunca usar más de un ID y solo para las propiedades que son locales a un contenedor que no contiene otros contenedores. Trate de nunca usar más de una o dos clases. Evite las clases y los ID que se dirigen a los elementos desde lo alto (los contenedores que representan tienen muchos nodos de antepasados ​​arriba). Más de 3-4 etiquetas es probablemente demasiado en la mayoría de los casos hasta que es hora de un poco de mantenimiento o entrenamiento / azotes de novatos. Y sigue la regla del boyscout. Adquiera esos selectores y, obviamente, selectores excesivamente específicos sobre la marcha cuando sea seguro.

Pero siga las reglas generales en lugar de las "leyes" de CSS y asegúrese de evaluar estas ideas a la luz de la experiencia. No confíe en nadie ni en ninguna herramienta que emita declaraciones generales como "nunca use ID" para algo con tantas variables como pueda tener un escenario de diseño CSS. Eso es solo noob kool-aid en lo que a mí respecta y los autores responsables deberían saber más a estas alturas si quieren afirmar que son expertos en ello.

Answer 2

CSSLint da una guía de por qué hacen sus recomendaciones:

Las identificaciones no se deben usar en los selectores porque estas reglas están muy unidas al HTML y no tienen posibilidad de reutilización. Es mucho más preferido usar clases en selectores y luego aplicar una clase a un elemento en la página. Además, las identificaciones afectan su especificidad y pueden llevar a guerras de especificidad.

(link)

Básicamente, si estructura su código para usar clases en lugar de ID, su código puede ser más general y reutilizable, lo que generalmente es bueno. Además, la especificidad es algo difícil de entender, y puede causar errores que son difíciles de encontrar, por lo que si omite los selectores de ID, es menos probable que las reglas en conflicto se resuelvan de manera inesperada.

Answer 3

No estoy de acuerdo con la idea de nunca usar ID para seleccionar elementos, sin embargo, entiendo el razonamiento.

A menudo, los desarrolladores utilizarán un selector de especificidad muy alta cuando la forma general sea suficiente:

#foo #bar #baz .something a {
    text-decoration: underline;
}

probablemente sea mejor escrito como

.something a {
     text-decoration: underline;
}

Además, escribiendo estilos como:

#foo-1,
#foo-2,
#foo-3,
#foo-4 {
    color: #F00;
}

están mejor escritos como:

.foo {
    color: #F00;
}

Donde difiero de CSSLint involucra IDs estructurales que son reutilizadas.

A menudo marcho páginas con esta estructura:

<div id="page">
    <div id="page-inner">
        <header id="header">
            <div id="header-inner"></div>
        </header>
        <nav id="nav">
            <div id="nav-inner"></div>
        </nav>
        <div id="wrapper">
            <div id="wrapper-inner">
                <div id="content">
                    <div id="content-inner">
                        <article></article>
                        ...
                    </div>
                </div>
                <div id="sidebar">
                    <div id="sidebar-inner">
                        <div class="module"></div>
                        ...
                    </div>
                </div>
            </div>
        </div>
        <footer id="footer">
            <div id="footer-inner"></div>
        </footer>
    </div>
</div>

Y como sé que la estructura es consistente, no me importa usar #page , #header , #nav , #wrapper , #content , #sidebar y #footer en mi css para barrer estilos específicos de la región. Estos estilos están estrechamente relacionados con esta estructura particular, lo que los hace menos reutilizables ; Porque reutilizo la estructura, son reutilizables. Lo importante a recordar es que el uso de una ID en un selector es muy específico y debe usarse con moderación.

Unas pocas palabras sobre specificity :

En general, se debe usar el selector de especificidad más bajo posible que realice la selección correcta:

Si está apuntando a todos los elementos <a> , entonces tiene sentido usar a .
Si está apuntando a todos los elementos <a> dentro de <div class="foo"> , entonces tiene sentido usar .foo a .
Si está apuntando a todos los elementos <a> dentro de <div id="bar"> , entonces tiene sentido usar #bar a . Sin embargo , podría utilizar un selector de especificidad más bajo. [id="bar"] a tiene la misma especificidad que .foo a , lo que significa que aún puede identificar elementos específicos por ID sin crear selectores con una especificidad innecesariamente alta.

Generalmente no recomiendo usar los selectores [id="XXXX"] para seleccionar el atributo [id] , porque es detallado y puede causar confusión. Recomiendo usar los selectores [data-id="XXXX"] para la selección basada en los atributos [data-*] para relacionar más estrechamente los estilos con el estado actual de los nodos DOM.

Answer 4

Se produce un gran problema al administrar una gran cantidad de CSS o sitios web grandes. Las identificaciones por definición no son reutilizables. Pero también te metes en problemas con especificidad. Te metes en condiciones de carrera desagradables con estilos cuando empiezas a cambiar de especificidad. Los ID tienen más especificidad que las clases, pero los estilos en línea tienen más que los ID. Los estilos en línea tienen más especificidad que las hojas de estilo externas. Al usar clases, estandariza cómo se aplican los estilos a sus elementos para hacer las cosas más predecibles. Esto tiende a facilitar el desarrollo, especialmente cuando se trabaja con varias personas.

Answer 5

Su argumento se menciona de forma solitaria en su respuesta, que lo combina estrechamente con el HTML y no permite su reutilización.

Podría argumentar que hay casos en los que no desea que un estilo sea usado por otro que no sea un solo elemento, por lo que especificarlo en un selector de identificación tendría sentido.

Todo se reducirá a las preferencias personales. Esta no es una regla difícil y rápida a la que debe adherirse, parece ser el pensamiento del equipo de Lint de CSS, no una regla que cause errores ni nada.