CSS ¿Mejores prácticas sobre identificación y clase?

Question

He estado sumergiéndome en el libro de SitePoint sobre CSS.

Lo que me llamó la atención acerca 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 versátil usar Class como selector.

Tal vez sea una cosa .Net ya que no siempre tenemos el control de la ID de un elemento ...

es la mejor práctica para su uso en clase o ID como selector?

Answer 1

Supongo que siempre usan la identificación en los ejemplos porque es menos ambigua. Usted sabe que están hablando específicamente de que un elemento y sus estilos.

En general, la regla general es que debe preguntarse: "¿hay más de un elemento que requiere el mismo estilo, ahora o en el futuro?", Y la respuesta es incluso "tal vez" , luego haz que sea una clase.

Answer 2

Prefiero usar Class como selector, por lo 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.

Answer 3

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ño a la tarea, y lo hacen de una manera OO - clases de uso donde los objetos son classlike, identificaciones donde como objetivo las instancias, y tratar árbitros etiqueta como algo parecido a las interfaces (y tenga cuidado cuando lo hace!) Esa es la mejor práctica que puedo pensar.

editar: y sí, MS realmente creó CSS ​​con ASP.NET ¡gracias chicos!

Answer 4

La práctica depende de la "resolución" de lo que está intentando seleccionar.

Uso las 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.

Answer 5

Debe usar un "id" cuando siempre está hablando de un único (y siempre será único) sector de su sitio.

Básicamente, se trata de semántica.

div.header 

Eso me dice que permite varios "encabezados" en su 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.

EDIT: He aquí un artículo semi-antigua sobre un diseño CSS puro ... si sólo escanear los ejemplos de CSS, verá por qué uso de ID de allí: How To: Pure CSS Design

Answer 6

No hay que olvidar 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 varias clases al mismo objeto (sí, class = "algunaClase 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 conseguir CSS sólo se aplica a los elementos que pertenecer 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 un soporte de navegador casi universal, así que ¡adelante y utilícelos!

Answer 7

No olvide que puede vincular a un elemento que tiene un 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).

Answer 8

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.

Compruebe el W3C spec y también la página CSS-Discuss sobre este tema.

Answer 9

Otro recurso útil es el W3C spec on Cascading Order: id selectores se dan diez veces el peso de class selectores. 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.

Answer 10

Utilice solo clases, casi nunca use ID si no tiene que preocuparse por la velocidad o la compatibilidad.

El uso de ID es malo al igual que el uso de 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.

Answer 11

Por favor, se refieren a:

No utilice los selectores de ID en el CSS: http://screwlewse.com/2010/07/dont-use-id-selectors-in-css/

No utilice ID de los selectores CSS ?: http://oli.jp/2011/ids/