practices - ¿Mejores prácticas de CSS sobre identificación y clase?
mejorar css (11)
Deberías usar un "id" cuando siempre hablas de un único (y siempre será único) sector de tu sitio.
Básicamente, todo se reduce a la semántica.
div.header
Eso me dice que permites múltiples "encabezados" en tu sitio. Tal vez estos son sub encabezados.
div#header
Eso me dice que estás hablando de la única "sección de encabezado" del diseño de tu sitio.
EDITAR: Aquí hay un artículo semi-viejo sobre un diseño de CSS puro ... si solo escaneas los ejemplos de CSS, verás por qué uso ID''s allí: Cómo: Diseño de CSS puro
He estado sumergiéndome en el libro de SitePoint sobre CSS.
Lo que me llamó la atención de los ejemplos fue el uso de ID como selector de CSS.
Algunos de los diseños de CSS que he hecho, siempre me ha parecido más fácil y más versátil usar Class como selector.
Tal vez sea una cosa de .Net, ya que no siempre tenemos el control de la identificación de un elemento ...
¿La mejor práctica aquí es usar CLASS o ID como selector?
La práctica depende de la "resolución" de lo que está tratando de seleccionar.
Uso clases cuando quiero cambiar todo un botín de elementos. Las identificaciones me dan un control mucho más preciso que a veces es necesario.
Los ID son para identificar elementos de forma exclusiva. Las clases son para identificar un elemento como parte de una clase de elementos.
En términos prácticos, los atributos de id solo deben usarse uno por documento, los atributos de clase se pueden usar en más de un elemento en un documento.
Consulte la especificación W3C y también la página CSS-Discuss sobre este tema.
Los selectores de ID tienen una alta especificidad, que a menudo es lo que necesita en CSS. Cuanto más estricto puede hacer que el CSS se aplique exactamente a lo que necesita, menos trabajo debe hacer el procesador de CSS al establecer las reglas.
Diseñe según las tareas, y hágalo de manera OO: use clases en las que los objetos sean similares a las clases, identifique dónde apuntar a las instancias y trate las referencias de etiquetas como algo así como las interfaces (¡y tenga cuidado cuando lo haga!). Esa es la mejor práctica que puedo pensar.
editar: y sí MS realmente creó CSS con ASP.NET ¡gracias chicos!
No olvide que puede vincular a un elemento que tiene una ID . Esto puede ser muy importante para la accesibilidad, entre los otros beneficios. Esta es una buena razón por la que para elementos de diseño como encabezado, navegación, contenido principal, pie de página, formulario de búsqueda, etc., siempre debe usar una ID en lugar de una Clase (o junto con una Clase).
No olvides que la clase y la ID no son mutuamente excluyentes. ¡No hay nada que te impida tener ambos! Esto a veces es muy útil, ya que permite que un elemento herede el estilo común junto con otros elementos de la misma clase, además de brindarle un control preciso de ese elemento específico. Otra técnica útil es aplicar múltiples clases al mismo objeto (sí, class = "someClass someOtherClass" es perfectamente válido) Por ejemplo:
<style>
div.box {
float: left;
border: 1px solid blue;
padding: 1em;
}
div.wide {
width: 40em;
}
div.narrow {
width: 10em;
}
div#oddOneOut {
float: right;
}
</style>
<div class="box wide">a wide box</div>
<div class="box narrow">a narrow box</div>
<div class="box wide" id="oddOneOut">an odd box</div>
En teoría, también es posible hacer que CSS se aplique únicamente a elementos que pertenecen a varias clases, por ejemplo, div.box.narrow {something: somevalue;} pero desafortunadamente esto no es compatible con todos los navegadores. Actualización 2011: los selectores de múltiples clases ahora tienen soporte para navegadores casi universal, así que ¡adelante y utilícelos!
Otro recurso útil es la especificación W3C en orden en cascada : los selectores de id reciben diez veces el peso de class selectores de class . Esto es especialmente importante si planea anular los estilos en función de diferentes escenarios o cambios de estado. Cuanto más específico sea el selector inicial, más trabajo tendrá que hacer para anularlo en declaraciones adicionales.
Por favor refiérase a:
No use selectores de ID en CSS: http://screwlewse.com/2010/07/dont-use-id-selectors-in-css/
¿No usas identificadores en los selectores de CSS ?: http://oli.jp/2011/ids/
Prefiero usar Class como selector, así que puedo usarlo con más de un elemento en la misma página. El uso de la identificación como selector no permite esto, ya que la identificación debe ser única.
Supongo que siempre usan la identificación en los ejemplos porque es menos ambigua. Sabes que están hablando específicamente de ese elemento y sus estilos.
En general, la regla general es que debe preguntarse: "¿hay más de un elemento que requiera el mismo estilo, ahora o en cualquier momento en el futuro?", Y la respuesta es incluso "tal vez", luego hágala una clase.
Utilice solo clases, casi nunca use ID si no tiene que preocuparse por la velocidad o la compatibilidad.
Usar ID es malo al igual que usar variables globales en el código de Visual Basic. La razón es que los ID deben ser únicos, lo que introduce una dependencia innecesaria y mala entre las diferentes partes independientes de su código. Usar algo como .page1 .tab1> .field1 es mejor porque no tiene que preocuparse por la singularidad de field1 dentro de tab1 o la exclusividad de tab1 dentro de page1. Con los ID, debe mantener el registro de sus ID para mantener el control y evitar colisiones.
Use los ID solo si es necesario, por ejemplo href = ''# name'' o si alguna biblioteca lo requiere.