traduccion - id class css
clase div vs id (22)
Dónde usar una identificación frente a una clase
La simple diferencia entre los dos es que, aunque 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 usar una ID en el elemento div que marque el contenido principal de la página, ya que solo habrá una sección de contenido principal. Por el contrario, debe usar una clase para configurar colores de filas alternados en una tabla, ya que, por definición, se usarán más de una vez.
Los ID son una herramienta increíblemente poderosa. Un elemento con una identificación puede ser el objetivo de una pieza de JavaScript que manipula el elemento o sus contenidos de alguna manera. El atributo ID se puede usar como el objetivo de un enlace interno, reemplazando etiquetas de anclaje con atributos de nombre. Finalmente, si hace que sus identificaciones sean claras y lógicas, pueden servir como una especie de "auto documentació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 una ID de, por ejemplo, "principal", "encabezado", "pie de página" ", etc.
Al usar divs, ¿cuándo es mejor usar una clase vs id?
¿Es mejor usar clase, por ejemplo, variante de fuente o elementos dentro del html? Entonces usa id para la estructura / contenedores?
Esto es algo que siempre he tenido un poco de incertidumbre, cualquier ayuda sería genial.
Piensa en la Universidad.
<student id="JonathanSampson" class="Biology" />
<student id="MarySmith" class="Biology" />
Las tarjetas de identificación de los estudiantes son distintas. No hay dos estudiantes en el campus que tengan la misma tarjeta de identificación de estudiante. Sin embargo, muchos estudiantes pueden y compartirán al menos una clase entre ellos.
Está bien colocar a varios estudiantes bajo un solo título de clase , Biología 101. Pero nunca es aceptable colocar a varios estudiantes bajo una identificación de estudiante.
Al asignar Reglas sobre el sistema de intercomunicación escolar, puede otorgar Reglas a una Clase :
"¿La clase de biología podría usar camisas rojas mañana?"
.BiologyClass {
shirt-color:red;
}
O puede dar reglas a un Estudiante Específico, llamando a su ID única:
"¿Jonathan Sampson podría usar una camisa verde mañana?"
#JonathanSampson {
shirt-color:green;
}
Además de las id y las clases que son excelentes para establecer el estilo en un elemento individual frente a un conjunto similar de elementos, también hay otra advertencia para recordar. También depende del idioma hasta cierto punto. En ASP.Net, puedes lanzar Div''s y tener id''s. Pero, si usa un Panel en lugar de Div, perderá el id.
Además, un elemento al que le da una identificación específica se puede manipular a través de comandos JavaScript y DOM - GetElementById, por ejemplo.
En general, me parece útil dar una identificación a todos los divs estructurales principales, incluso si inicialmente no tengo reglas de CSS específicas 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 pie de foto, podría tener varias clases, cada una con valores de estilo ligeramente diferentes.
Sin embargo, recuerde, si todo sigue igual, las reglas de estilo en una especificación de identificación prevalecen sobre las de una especificación de clase.
Algunas otras cosas a tener en cuenta:
- Al usar ASP.Net no tiene control completo sobre la ID de los elementos, por lo que tiene que usar la clase (tenga en cuenta que esto es menos cierto de lo que era).
Lo mejor es no usar ninguna de las dos cosas, cuando puedes evitarlo. En su lugar, especifique el tipo de elemento y su tipo padre . Por ejemplo, una lista desordenada contenida dentro de div con la clase navarea podría ser señalada de esta manera:
div.NavArea ul { /* styles go here */ }
Ahora puede diseñar la división lógica para gran parte de su navarea completa con una aplicación de clase.
Creo que todos sabemos qué clase es, pero si piensas en identificadores como identificadores en lugar de herramientas de diseño, no te equivocarás. Necesita un identificador cuando intenta orientar algo y si tiene más de un elemento con la misma ID, ya no podrá identificarlo ...
Cuando se trata de escribir su CSS para IDs y CLASSes, es beneficioso usar clases de CSS mínimas en la medida de lo posible y tratar de no ser demasiado pesado con los ID hasta que TENGA que hacerlo, de lo contrario, siempre tendrá el objetivo de escribir declaraciones más fuertes y pronto tendrá un archivo css lleno de! importante.
El atributo id se usa para que los elementos los identifiquen de manera única dentro del documento, mientras que el atributo de clase puede tener el mismo valor compartido por muchos elementos en el mismo documento.
Entonces, realmente, si solo hay un elemento por documento que va a usar el estilo (por ejemplo, #título), entonces vaya con id . Si varios elementos pueden usar el estilo, ve con la clase .
El estándar HTML en sí responde a su pregunta:
No hay dos objetos que puedan tener la misma ID, pero una cantidad arbitraria de objetos puede tener la misma clase.
Por lo tanto, si desea aplicar ciertos atributos de estilo CSS a un DIV único, eso sería una identificación. Si desea que ciertos atributos de estilo se apliquen a múltiples DIV, debe ser una clase.
Tenga en cuenta que puede mezclar ambos. Puede hacer que dos DIV pertenezcan a la misma clase, pero proporcione identificaciones diferentes. A continuación, puede aplicar el estilo común tanto a la clase como a las cosas específicas de cualquiera de ellas a su ID. El navegador primero aplicará el estilo de clase y luego el estilo de ID, de modo que los estilos de ID puedan sobrescribir lo que una clase haya establecido anteriormente.
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 ID solo deben usarse una vez en una página. Por lo tanto, debe usar clases para cuando quiera usar un estilo en más de un elemento en una página, y una ID cuando solo quiera usarlo una vez.
Otra cosa es que para las clases puedes usar múltiples valores (poniendo espacios entre cada clase, a la "clase = ''blagh blah22 blah'') mientras que con los ID, solo puedes usar el ID por elemento.
Los estilos definidos para ID anulan los estilos definidos para las clases, por lo tanto, en la configuración de estilo de #uniquething se anulará el estilo de .whatever si los dos entran en conflicto.
Por lo tanto, probablemente debería usar ID para cosas como, el encabezado, su "barra lateral" o lo que sea, y cosas así, cosas que solo aparecen una vez por página.
Lo más importante para entender es que los ID deben ser únicos: solo debe existir un elemento con un ID dado dentro de una página. Por lo tanto, si quiere referirse a un elemento de página específico, a menudo es lo mejor para usar.
Si tiene varios elementos que de alguna manera son similares, debe usar la clase de elementos para identificarlos.
Un hecho muy útil y sorprendentemente poco conocido es que puedes aplicar múltiples clases a un solo elemento al poner espacios entre los nombres de las clases. Por lo tanto, si publicó una pregunta escrita por el usuario actualmente conectado, puede identificarla con <div class = "question currentAuthor"> .
Los ID deben ser únicos, pero en CSS también tienen prioridad al descubrir cuál de dos instrucciones conflictivas seguir.
<div id="section" class="section">Text</div>
#section {font-color:#fff}
.section {font-color:#000}
El texto sería blanco
Los ID deben ser únicos. Las CLASS deben ser compartidas. Entonces, si tiene algún formato CSS que se aplicará a múltiples DIV, use una clase. Si solo uno (como requisito, no como casualidad), use una identificación.
Mi elección es utilizar la identificación de clase cuando los estilos CSS se aplican a varios div de la misma manera. Si la estructura o el contenedor realmente solo se aplica una vez, o puede heredar su estilo del predeterminado, no veo ninguna razón para usar la identificación de clase.
Entonces dependerá de si su div es uno de varios; por ejemplo, un div que representa una pregunta a una respuesta en el sitio web de . Aquí querrá definir el estilo para la clase "Respuesta" y aplicar esto a cada div "Respuesta".
Si está utilizando controles web .Net, a veces es mucho más fácil usar clases que .Net altera los identificadores de sitios web en tiempo de ejecución (donde están usando runat = "servidor").
Usar clases te permite crear fácilmente estilos con clases separadas para fuentes, espaciado, bordes, etc. Generalmente utilizo varios archivos para almacenar distintos tipos de información de formato, por ejemplo, basic_styles.css para el formato simple de todo el sitio, ie6_styles.css para estilos específicos del navegador (en este caso IE6) etc. y template_1.css para información de diseño.
De cualquier forma que elija, intente ser coherente para ayudar con el mantenimiento.
Si se trata de un estilo que desea usar en varios lugares de una página, use una clase. Si desea una gran cantidad de personalización para un solo objeto, digamos una barra de navegación en el costado de la página, entonces una identificación es lo mejor, porque no es probable que necesite esa combinación de estilos en ningún otro lado.
Un beneficio adicional al uso de un ID es la capacidad de orientarlo en una etiqueta de anclaje:
<h2 id="CurrentSale">Product I''m selling</h2>
Te permitirá en otro lugar un enlace directamente a ese lugar en la página:
<a href="#CurrentSale">the Current Sale</a>
Un uso común para esto sería darle a cada titular de un blog una identificación con fecha (por ejemplo, id = "date20080408") que le permitiría dirigirse 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. Vea una pregunta similar: ¿Cuál es un valor válido para los atributos de id en html?
Use 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.
Yo diría que es mejor usar una clase cada vez que piense que un elemento de estilo se repetirá en una página. Los elementos como HeaderImage, FooterBar y similares funcionan bien como ID, ya que solo lo usará una vez y evitará que lo duplique accidentalmente, ya que algunos editores lo alertarán cuando tenga ID duplicados.
También puedo ver que es útil si va a generar los elementos div de forma dinámica y desea orientar un elemento específico para el formateo; solo puede darle la identificación adecuada en la generación en lugar de buscar el elemento y luego actualizar su clase.
id se supone que 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>
las clases son geniales cuando desea aplicar estilos similares a muchos divs o elementos diferentes. Los ID son buenos cuando quieres abordar un elemento específico para formatear o actualizar con javascript.
Para mí: si uso clases, haré algo en CSS o añadiré un nombre a los elementos y podré usarlos en todos los elementos de una página.
Entonces ID que uso para un elemento único
Ej .:
<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;}
Use id para identificar elementos en los que solo habrá una sola instancia de en una página. Por ejemplo, si tiene una barra de navegación única que está colocando en una ubicación específica, use id="navigation" .
Use class para agrupar elementos que se comporten de una determinada manera. Por ejemplo, si desea que el nombre de su empresa aparezca en negrita en el cuerpo del texto, puede usar <span class=''company''> .