clase div frente a identificación

Question

Cuando se usan divs, ¿cuándo es mejor usar una clase frente a una identificación?

¿Es mejor usar clase, por ejemplo, variante de fuente o elementos dentro del HTML?¿Entonces usar id para la estructura/contenedores?

Esto es algo sobre lo que siempre he estado un poco inseguro, cualquier ayuda sería genial.

Answer 1

Usar id para identificar elementos de los que solo habrá una única instancia en una página.Por ejemplo, si tiene una única barra de navegación que está colocando en una ubicación específica, use id="navigation".

Usar class para agrupar elementos que se comportan todos de cierta manera.Por ejemplo, si desea que el nombre de su empresa aparezca en negrita en el cuerpo del texto, puede utilizar <span class='company'>.

Answer 2

Lo más importante que hay que entender es que los ID deben ser únicos:solo debe existir un elemento con una ID determinada dentro de una página.Por lo tanto, si desea hacer referencia a un elemento de página específico, suele ser lo mejor que puede utilizar.

Si tiene varios elementos que son de alguna manera similares, debe usar la clase de elementos para identificarlos.

Un hecho muy útil, sorprendentemente poco conocido, es que en realidad puedes aplicar múltiples clases a un solo elemento colocando espacios entre los nombres de las clases.Por lo tanto, si publicó una pregunta escrita por el usuario que inició sesión actualmente, puede identificarla con <div class="pregunta autor actual">.

Answer 3

Pensemos en la Universidad.

<student id="JonathanSampson" class="Biology" />
<student id="MarySmith" class="Biology" />

Alumno IDENTIFICACIÓN Las tarjetas son distintas.No habrá dos estudiantes en el campus que tengan el mismo estudiante. IDENTIFICACIÓN tarjeta.Sin embargo, muchos estudiantes pueden compartir y compartirán al menos una Clase juntos.

Está bien poner a varios estudiantes bajo uno Clase título, Biología 101.Pero nunca es aceptable poner varios estudiantes bajo un mismo estudiante. IDENTIFICACIÓN.

al dar Normas a través del sistema de intercomunicación de la escuela, puede dar Normas a un Clase:

"¿Podría la clase de Biología usar Camisas Rojas mañana?"

.BiologyClass {
  shirt-color:red;
}

O puedes darle reglas a un Estudiante Específico, llamando a su único IDENTIFICACIÓN:

"¿Jonathan Sampson podría usar una camisa verde mañana?"

#JonathanSampson {
  shirt-color:green;
}

Answer 4

Los ID deben ser únicos, pero en CSS también tienen prioridad a la hora de determinar cuál de dos instrucciones en conflicto seguir.

<div id="section" class="section">Text</div>

#section {font-color:#fff}
.section {font-color:#000}

El texto sería blanco.

Answer 5

Las clases son excelentes cuando deseas aplicar estilos similares a muchos divs o elementos diferentes.Los identificadores son buenos cuando desea abordar un elemento específico para formatear o actualizar con javascript.

Answer 6

Un beneficio adicional de usar una identificación es la capacidad de orientarla en una etiqueta de anclaje:

<h2 id="CurrentSale">Product I'm selling</h2>

Le permitirá en algún otro lugar vincular directamente a ese lugar de la página:

<a href="#CurrentSale">the Current Sale</a>

Un uso común para esto sería darle a cada título de un blog un ID con fecha (digamos id="date20080408") que le permitiría apuntar específicamente a esa sección de la página del blog.

También es importante recordar que existen reglas de nomenclatura más restringidas para los identificadores, principalmente que no pueden comenzar con un número.Ver pregunta SO similar: ¿Cuál es un valor válido para los atributos de identificación en HTML?

Answer 7

El propio estándar HTML responde a su pregunta:

No pueden haber dos objetos con el mismo ID, pero una cantidad arbitraria de objetos puede tener la misma clase.

Entonces, si desea aplicar ciertos atributos de estilo CSS solo a un único DIV, ese sería un ID.Si desea que ciertos atributos de estilo se apliquen a varios DIV, debe ser una clase.

Tenga en cuenta que puede mezclar ambos.Puedes hacer que dos DIV pertenezcan a la misma clase, pero darles ID diferentes.Luego puede aplicar el estilo común a ambos a la clase y las cosas específicas de cada uno a su ID.El navegador aplicará primero el estilo de clase y luego el estilo de ID, por lo que los estilos de ID pueden sobrescribir lo que una clase haya establecido antes.

Answer 8

Algunas otras cosas a tener en cuenta:

• Cuando usas ASP.Net no tienes control completo sobre el ID de los elementos, por lo que prácticamente tienes que usar class (ten en cuenta que esto es menos cierto que antes).

• Lo mejor es usar ni, cuando puedas evitarlo.En su lugar, especifique el tipo de elemento y es tipo de padre.Por ejemplo, una lista desordenada contenida dentro de un div con la clase navarea podría destacarse de esta manera:

  div.NavArea ul { /* styles go here */ }
  

Ahora puedes diseñar el división lógica para gran parte de toda su zona navarra con una aplicación de clase.

Answer 9

Las identificaciones deben ser únicas.Las CLASES deben ser compartidas.Entonces, si tiene algún formato CSS que se aplicará a varios DIV, use una clase.Si es solo uno (como requisito, no como casualidad), use una identificación.

Answer 10

Creo que todos sabemos qué es la clase, pero si piensas en los ID como identificadores en lugar de herramientas de estilo, no te equivocarás mucho.Necesitas un identificador cuando intentas apuntar a algo y si tienes más de un elemento con el mismo ID, ya no podrás identificarlo...

Cuando se trata de escribir su CSS para ID y CLASES, es beneficioso utilizar clases CSS mínimas en la medida de lo posible y tratar de no sobrecargarse demasiado con los ID hasta que DEBE hacerlo, de lo contrario, constantemente intentará escribir declaraciones más sólidas y Pronto tendré un archivo CSS lleno de! Importante.

Answer 11

Dónde usar una identificación frente a una clase

La simple diferencia entre los dos es que, si bien una clase se puede usar repetidamente en una página, una ID solo se debe usar una vez por página.Por lo tanto, es apropiado utilizar un ID en el elemento div que marca el contenido principal de la página, ya que solo habrá una sección de contenido principal.Por el contrario, debe utilizar una clase para configurar colores de fila alternos en una tabla, ya que, por definición, se utilizarán más de una vez.

Las identificaciones son una herramienta increíblemente poderosa.Un elemento con un ID puede ser el objetivo de una pieza de JavaScript que manipula el elemento o su contenido de alguna manera.El atributo ID se puede utilizar como destino de un enlace interno, reemplazando las etiquetas de anclaje con atributos de nombre.Finalmente, si hace que sus identificaciones sean claras y lógicas, pueden servir como una especie de “autodocumentación” dentro del documento.Por ejemplo, no es necesario agregar un comentario antes de un bloque que indique que un bloque de código contendrá el contenido principal si la etiqueta de apertura del bloque tiene un ID de, por ejemplo, "principal", "encabezado", "pie de página". ", etc.

Answer 12

Si es un estilo que desea utilizar en varios lugares de una página, utilice una clase.Si desea mucha personalización para un solo objeto, digamos una barra de navegación al costado de la página, entonces una identificación es mejor, porque no es probable que necesite esa combinación de estilos en ningún otro lugar.

Answer 13

Se supone que id es el identificador único del elemento en la página, lo que ayuda a manipularlo.Cualquier estilo definido externamente por CSS que se supone debe usarse en más de un elemento debe ir en el atributo de clase.

<div class="code-formatting-style-name" id="myfirstDivForCode">
</div>

Answer 14

Utilice una identificación para un elemento único en la página con el que desee hacer algo muy específico y una clase para algo que pueda reutilizar en otras partes de la página.

Answer 15

El identificación El atributo se utiliza para que los elementos los identifiquen de forma única dentro del documento, mientras que el clase El atributo puede tener el mismo valor compartido por muchos elementos en el mismo documento.

Entonces, en realidad, si solo hay un elemento por documento que usará el estilo (por ejemplo, #título), entonces elija identificación.Si varios elementos pueden usar el estilo, elija clase.

Answer 16

Yo diría que es mejor usar una clase siempre que crea que un elemento de estilo se repetirá en una página.Elementos como HeaderImage, FooterBar y similares funcionan bien como ID, ya que solo los usará una vez y le ayudarán a evitar que los duplique accidentalmente, ya que algunos editores le avisarán cuando tenga ID duplicados.

También puedo verlo útil si va a generar los elementos div dinámicamente y desea apuntar a un elemento específico para formatear;simplemente puede darle la identificación adecuada en el momento de la generación en lugar de buscar el elemento y luego actualizar su clase.

Answer 17

Mi opción es utilizar la identificación de clases cuando los estilos CSS se aplican a varios divs de la misma manera.Si la estructura o el contenedor realmente solo se aplica una vez, o puede heredar su estilo predeterminado, no veo ninguna razón para usar la identificación de clase.

Entonces dependería de si tu div es uno de varios;por ejemplo, un div que representa una pregunta y una respuesta en el sitio web de stackoverflow.Aquí querrás definir el estilo para la clase "Respuesta" y aplicarlo a cada div "Respuesta".

Answer 18

Si está utilizando controles web .Net, a veces es mucho más fácil simplemente usar clases, ya que .Net altera los ID de div de control web en tiempo de ejecución (donde usan runat="servidor").

El uso de clases le permite crear estilos fácilmente con clases separadas para fuentes, espaciado, bordes, etc.Generalmente uso varios archivos para almacenar tipos separados de información de formato, p.basic_styles.css para un formato sencillo para todo el sitio, es decir, 6_styles.css para estilos específicos del navegador (en este caso, IE6), etc. y template_1.css para información de diseño.

Cualquiera que sea la forma que elija, trate de ser coherente para facilitar el mantenimiento.

Answer 19

Además, un elemento al que le asignas una identificación específica se puede manipular mediante comandos JavaScript y DOM (GetElementById, por ejemplo).

En general, me resulta útil dar una identificación a todos los divs estructurales principales; incluso si inicialmente no tengo ninguna regla CSS específica para aplicar, tengo esa capacidad allí para el futuro.Por otro lado, uso clases para aquellos elementos que podrían usarse varias veces (por ejemplo, un div que contiene una imagen y un título). Podría tener varias clases, cada una con valores de estilo ligeramente diferentes.

Sin embargo, recuerde que, en igualdad de condiciones, las reglas de estilo en una especificación de id tienen prioridad sobre las de una especificación de clase.

Answer 20

Además de que las identificaciones y las clases son excelentes para establecer el estilo de un elemento individual frente a un conjunto similar de elementos, también hay otra advertencia que recordar.También depende del idioma hasta cierto punto.En ASP.Net, puede incluir Div y tener identificaciones.Pero, si usas un Panel en lugar del Div perderás la identificación.

Answer 21

Las clases son para estilos que puede usar varias veces en una página, los ID son identificadores únicos que definen casos especiales para elementos.Los estándares dicen que las identificaciones solo deben usarse una vez en una página.Por lo tanto, debes usar clases cuando quieras usar un estilo en más de un elemento en una página y un ID cuando solo quieras usarlo una vez.

Otra cosa es que para las clases puedes usar múltiples valores (poniendo espacios entre cada clase, al estilo "class='blagh blah22 blah'), mientras que con ID, solo puedes usar ID por elemento.

Los estilos definidos para los ID anulan los estilos definidos para las clases, por lo que en , la configuración de estilo de #uniquething anulará el estilo de .lo que sea si los dos entran en conflicto.

Por lo tanto, probablemente deberías usar ID para cosas como el encabezado, la 'barra lateral' o lo que sea, etc., cosas que solo aparecen una vez por página.

Answer 22

Para mí : Si uso clases, haré algo en CSS o agregaré nombres a los elementos y puedo usarlo en todos los elementos de una página.

Entonces, los ID que uso para elementos únicos

Ex :

<div id="post-289" class="box clear black bold radius">

CSS:

.clear {clear:both;}
.black {color:black;}
.bold {font-weight:bold;}
.radius {border-radius:2px;}