desenvolvimento para web - xhtml, css, padrões da web, usabilidade, acessibilidade, web design, SEO, blogs e tecnologias para desenvolver a web Desarrollo Web - xhtml, css, estándares web, usabilidad, accesibilidad, diseño web, SEO, los blogs y la tecnología para desarrollar la web

Principalmente quando no início dos estudos sobre desenvolvimento para web , é comum haver confusões entre IDs e Classes, tão utilizados e necessários em XHTML, CSS e Javascript. Sobre todo cuando en los primeros estudios sobre el desarrollo de web, es común la confusión entre las clases y números de identificación, y se utiliza según sea necesario en XHTML, CSS y JavaScript. Vários tutoriais na internet explicam alguns pontos básicos e dão certas orientações, mas nada muito aprofundado e esclarecedor. Varios tutoriales en Internet explicar algunos puntos básicos y dar algunas orientaciones, pero nada muy profundo y esclarecedor. O resultado: as dúvidas persistem ea diferença entre ID e Classe ainda não é “desvendada”. El resultado: las dudas persisten y la diferencia entre la ID y la clase aún no se puede "desvendada." Com este artigo este “mistério” chega ao fim! En este artículo de este "misterio" llega a su fin! ;-)

IDs e classes são “anzóis” Identificadores y las clases son "ganchos"

Precisamos de formas de descrever conteúdos em documentos HTML / XHTML. Tenemos los medios para describir el contenido en los documentos HTML / XHTML. Os elementos básicos como <h1>, <p> e <ul> frequentemente fazer o trabalho, mas o conjunto básico de tags não abragen todas as possibilidades de elementos de página ou escolhas de layout . Los elementos básicos como <h1>, <p> <ul> y, a menudo, hacer el trabajo, pero el conjunto básico de etiquetas no abragen todas las posibilidades de elementos de diseño de páginas o de opciones. Para isso, precisamos de IDs e Classes . Para ello, necesitamos las identificaciones y de clases.

Por exemplo <ul id=”nav”>, isso dá a oportunidade de visar especificamente esta lista, então há uma maneira de manipular esta lista exclusivamente em relação a outras listas não-ordenadas da página. <ul Id="nav"> Por ejemplo, se da una oportunidad para que la orientación de esta lista, entonces hay una manera de manipular esta lista sólo con respecto a otros no ordenó las listas de la página. Ou talvez tivéssemos uma seção na página que não possui uma tag relevante para signifcar, por exemplo, um rodapé, onde poderíamos fazer algo como <div id=”footer”>. O podríamos tener una sección en la página que no tiene relevancia signifcar etiqueta, por ejemplo, una nota a pie de página, donde pudimos hacer algo como <div id="footer">. Ou talvez tenhamos boxes na barra lateral para manter o conteúdo separado de alguma forma: <div class=”sidebar-box”>. O quizás hemos cajas en la barra lateral para mantener el contenido separado de alguna manera: <div class="sidebar-box">.

Esses IDs e classes são os “anzóis” que precisamos fazer na marcação para colocarmos as mãos neles. Estos identificadores de clases y son los "ganchos" que tenemos que hacer en el marcado para poner sus manos sobre ellos. CSS obviamente precisa disso para que possa fazer seletores e montar folhas de estilos, mas outras linguagens web , como javascript , também dependem deles. CSS, obviamente, lo necesitan para que pueda hacer selectores de montaje y hojas de estilos, sino también a otros idiomas web, como javascript, también dependen de ellos. Mas quais as diferenças entre IDs e classes? Pero, ¿cuáles son las diferencias entre las identificaciones y de clases?

IDs são únicos Identificadores son únicos

• Cada elemento pode ter apenas um ID; Cada elemento sólo puede tener un ID;
• Cada página pode ter apenas um elemento com aquele ID. Cada página puede ser sólo un elemento que con ID.

Quando se está aprendendo sobre isso, é comum ouvir que só se deve usar IDs uma vez, mas é possível usar uma classe várias vezes. Cuando usted está aprendiendo acerca de ello, es común escuchar que uno sólo debe utilizar identificadores de una vez, pero puedes utilizar una clase en varias ocasiones. Basicamente, isso entra num ouvido e sai no outro, porque soa mais como uma “regrinha” que algo realmente importante. Básicamente, entramos en un oído y salen por otra, porque suena más como un "regrinha" que algo realmente importante. Se você trata somente com HTML / CSS, isso pode acontecer com você, também, porque eles realmente não parecem fazer nada de diferente. Si sólo tendrá que tratar con HTML / CSS, esto puede suceder a usted, también, porque realmente no parecen hacer nada diferente.

Aqui vai uma: seu código não vai passar pelo validador se você usar o mesmo ID em mais de um elemento . Aquí vai uno: su código vai no pase por el validador de si utiliza la misma ID en más de un elemento. Validação deve ser importante para todos nós, de modo que, por si só, é algo muito importante. Validación debe ser importante para todos nosotros, por lo que en sí mismo es algo muy importante. Adiante, mais razões pelas quais um ID deve ser único. Ahead, más razones por las cuales una ID debe ser único.

Classes não são únicas Las clases no son exclusivas

• Você pode usar a mesma classe para vários elementos; Puede utilizar la misma categoría por varios elementos;
• Você pode usar várias classes para um mesmo elemento . Puede usar varias clases para el mismo elemento.

Qualquer informação de estilo que precise ser aplicada a múltiplos elementos em uma página deve ser feita com uma classe . Toda la información de estilo que debe aplicarse a múltiples elementos en una página que debería hacerse con una clase. Tomemos como uma exemplo uma página com vários “ widgets “: Tome como ejemplo una página con varios "widgets":

 < div class = "widget" >< / div > < div class = "widget" >< / div > < div class = "widget" >< / div > <div Class = "widget"> </ div> <div class = "widget"> </ div> <div class = "widget"> </ div> 

Agora, é possível usar a mesma classe “widget” como gancho para aplicar o mesmo conjunto de estilos para cada um deles. Ahora, puede usar la misma clase "widget" como un gancho para aplicar el mismo conjunto de estilos para cada uno. Mas, e se for preciso ter um deles maior que os outros, mas continuar com um estilo que compartilhe dos outros atributos? Pero, si necesita uno más grande que la otra, sino continuar con un estilo que las acciones de otros atributos? É possível aplicar mais de uma classe a um elemento: Puede aplicar más de una clase a un elemento:

 < div class = "widget" >< / div > < div class = "widget big" >< / div > < div class = "widget" >< / div > <div Class = "widget"> </ div> <div class = "widget big"> </ div> <div class = "widget"> </ div> 

Não há necessidade de fazer e nomear uma nova classe aqui, apenas colocar o nome da nova classe no atributo class , juntamente com o nome da classe que já está lá. No hay necesidad de hacer y nombrar una nueva clase aquí, sólo hay que poner el nombre del nuevo atributo de clase en la clase, junto con el nombre de la clase que ya está ahí. As diferentes classes são delimitadas por espaços ea maioria dos navegadores permite quaisquer números delas (na verdade, é mais como milhares , o que é muito mais do que realmente é preciso). Las diferentes clases son limitadas por el espacio y la mayoría de los navegadores permiten a cualquier número de ellos (en realidad, se parece más a miles, lo cual es mucho más de lo que es realmente necesario).

Não existem padrões de IDs e Classes em nenhum navegador Existen patrones de las identificaciones y de clases en cualquier navegador

Colocar um nome de classe ou ID em um elemento, por padrão não faz nada a esse elemento. Al poner un nombre, o de documento de identidad en un elemento de clase, por defecto no hace nada de ese elemento.

Isso é algo que intriga quem é iniciante. Esto es algo que intriga que es principiante. Você está trabalhando em um site e descobre que a aplicação de uma classe com um nome em particular resolve um problema que você tem. La compañía está trabajando en un sitio y descubrieron que la aplicación de una clase con un nombre en particular, resuelve un problema que usted tenga. Então você mexe em outro site , com o mesmo problema, e tenta corrigí-lo da mesma maneira, usando aquele mesmo nome de classe, pensando que o nome da classe, por si só, tem alguma propriedade mágica, apenas para descobrir que não funciona assim… Luego de mudarse a otro sitio, con el mismo problema, e intenta solucionarlo de la misma manera, que utilizan el mismo nombre, clase, pensando que el nombre de la clase por sí sola, tiene algunas propiedades mágicas, sólo para descubrir que no funciona así…

Classes e IDs não têm qualquer estilo por si mesmos. Las clases y los identificadores de estilo no tienen por sí mismos. É preciso CSS para orientar e aplicar estilos. Tenemos que orientar y aplicar estilos CSS.

Códigos de Barra e Números de Série Códigos de Barra y Números de Serie

Talvez códigos de barra e números de série sejam uma boa analogia. Tal vez el códigos de barras y números de serie son una buena analogía. Tome um iPod, numa loja. Tome un iPod, en una tienda. Na embalagem há um código de barras. En el paquete hay un código de barras. Ele indica à loja que produto é esse; então, quando é escaneado, o código de barras informa exatamente que produto é aquele e quanto custa. Señala a la tienda que este producto es, por lo que cuando se escanea, la información de código de barras que es exactamente lo que los productos y el costo. É possível saber até sua cor e em qual lugar do armazém ele era mantido. Usted puede aprender de su color y ubicación del almacén en el que se mantiene. Todos esses iPods têm exatamente o mesmo tipo de código de barras. Todos los iPods tienen exactamente el mismo tipo de código de barras.

O iPod tem também um número de série que é absolutamente único em relação a qualquer outro iPod (ou outro dispositivo) em todo o mundo. El iPod también tiene un número de serie que es absolutamente único en relación con cualquier otro iPod (u otro dispositivo) en todo el mundo. O número de série não informa o preço. El número de serie no permite informar sobre el precio. Poderia, mas para a loja que o vende esta não seria uma maneira eficaz de armazenar e utilizar essa informação. Podría, pero para la tienda que vende esta no sería una forma eficaz de almacenar y utilizar esa información. É muito mais fácil usar um código de barras porque se, por exemplo, o preço muda, é preciso apenas alterar o preço para aquele código de barras, e não para cada número serial do sistema. Es mucho más fácil de usar un código de barras, porque si, por ejemplo, cambios en los precios, sólo tenemos que cambiar el precio para que de códigos de barras, no el número de serie de cada sistema.

Isso é muito parecido com IDs e Classes. Informações que são reusadas devem ser mantidas em uma classe e informações que são totalmente únicas devem ser mantidas em um ID. Esto es muy similar a las identificaciones y de clases. Reusadas Información que se mantendrán en una clase de información y que son completamente únicas que se mantenga en un número de identificación.

IDs têm uma funcionalidade especial nos navegadores IDs son una característica especial en los navegadores

Classes não tem funcionalidades especiais no browser , mas IDs têm um truque muito especial na manga: um “valor de hash ” para URLs. Se você tiver um URL como http://seudominio.com#comments, o navegador vai tentar localizar o elemento com o id “comments” e vai automaticamente rolar a página até chegar nesse elemento. Las clases no tienen características especiales en el navegador, pero las identificaciones tienen una muy especial truco en la manga: un "valor", para URL Si usted tiene una URL como http://seudominio.com # comentarios, el navegador vai tratar de encontrar el elemento con el ID "comentarios" y automáticamente vai desplazarse por la página hasta que llegue ese elemento.

É importante observar que o browser vai rolar a página até onde quer que o elemento esteja; então, se houver algo de especial, como uma DIV com barra de rolagem (propriedade CSS overflow com valor “auto” ou “scroll”), esta barra de rolagem vai ser deslocada - rolar para baixo -, também. Es importante señalar que el navegador vai desplazarse a través de la página donde desea que el elemento es, por lo que si hay algo especial, como un DIV con scrollbar (CSS valor de la propiedad con exceso de "libre" o "desplazarse"), este bar vai ser movido para desplazarse - desplácese hacia abajo -.

Esta é uma razão importante sobre o porquê é importante ter um ID absolutamente único. Esta es una razón importante por la razón por la que es importante contar con un ID absolutamente única. Com isso, o navegador sabe até quando rolar. Con esto, el navegador sabe cuándo rollo.

Elementos podem ter ambos, ID e Classes Los elementos pueden tener, ID y clases

Nada para você quando você usa ambos, ID e classes em um único elemento. Nada de lo dispuesto por usted cuando utilice tanto, ID y clases en un solo elemento. Na verdade, fazer isso na maioria das vezes é uma boa idéia. De hecho, hacerlo en la mayoría de los casos es una buena idea. Tomemos como exemplo o padrão de marcação para item de lista de um comentário no Wordpress: Tomemos, por ejemplo, el patrón de marcado para obtener una lista de temas a comentar en Wordpress:

 < li id = "comment-27299" class = "item" > <Li Id = "comment-27299" class = "item"> 

Tem uma classe que foi aplicada que talvez se queira usar para estilizar todos os comentários na página, mas também há um único valor de ID (dinamicamente gerado pelo Wordpress). Tiene una clase que se aplicó tal vez que desee utilizar para estilizar todos los comentarios sobre la página, pero hay un solo valor de ID (generadas dinámicamente de Wordpress). Com isso, é facilmente possível fazer um link diretamente a um comentário, em uma página, em especial. Esto es fácilmente posible para hacer un enlace directo a un comentario en una página en particular.

CSS não se importa CSS no le importa

Quanto ao CSS, não há nada que você possa fazer com um ID que não possa fazer com uma Classe e vice-versa . Sobre la CSS, no hay nada que usted puede hacer con un ID que no puede hacer con una clase y viceversa. Às vezes, quando se está iniciando no estudo de CSS e se tem um problema, tenta-se alternar entre usar ID ou usar Classe. A veces, cuando se inicia el estudio de CSS y usted tiene un problema, trata de cambiar entre el uso o el uso de identificación de clase. O CSS não se importa. La CSS no le importa.

Javascript se importa Javascript es importante

Aqueles que mexem com javascript provavelmente já estão mais em sintonia entre as diferenças entre as Classes e IDs. Javascript depende da existência de um elemento de página com ID único, ou então a comumente utilizada função getElementById não seria confiável. Esos que se mueve con javascript probablemente ya estén más en línea entre las diferencias entre las clases y las identificaciones. Javascript depende de la existencia de un elemento de página con número de identificación exclusivo, o el comúnmente utilizado función getElementById no serían fiables. Aqueles acostumados com jQuery sabem o quão fácil é adicionar e remover classes de elementos de página. Los acostumbrados a jQuery fácil saber cómo agregar y quitar clases de elementos de la página. É uma função nativa no jQuery. Se trata de un nativo en función jQuery. Veja que tal função não existe para IDs. Véase que esta función no existe para las identificaciones. Não é responsabilidade do javascript manipular estes valores, porque ele causaria mais problemas que seria útil… No es la responsabilidad de javascript manipular estos valores, ya que podría causar más problemas que sería útil…

Se você não precisa deles, não os use Si no los necesita, no utilizar

Como você pode ver, classes e IDs são muito importantes e nós os utilizamos todos os dias para estilizar páginas e manipular aquilo que é preciso. Como puede ver, clases y números de identificación son muy importantes y que usamos todos los días para estilizar páginas y manipular lo que se necesita. Entretanto, você deve usá-los com critério e semanticamente. Sin embargo, usted debe usar con discreción y semánticamente.

Isto significa evitar coisas do tipo: Esto significa evitar las cosas como las siguientes:

 < a href = "http://css-tricks.com" class = "link" > CSS-Tricks.com < / a > <A Href = "http://css-tricks.com" class = "link"> CSS-Tricks.com </ a> 

Já sabemos: este elemento é um link , é um elemento âncora. Ya sabemos: este elemento es un vínculo, es un ancla. Não há nada de especial aqui a ponto de ser preciso especificar uma classe, já que é possível aplicar o estilo na própria tag (”a”). No hay nada especial debe haber un punto de especificar una clase, ya que es posible aplicar la etiqueta en su propio estilo ( "a").

Evite este tipo de coisa, também: Evitar este tipo de cosas, también:

 < div id = "coluna-direita" > <div Id = "column-right"> 

O ID é corretamente utilizado aqui, já que, provavelmente, a página terá somente uma única coluna da direita, mas o nome é inadequado. La ID se utiliza correctamente aquí porque, probablemente, la página tendrá una única columna de la derecha, pero el nombre no es apropiado. Descreva o contexto do elemento, não onde está ou como se parece. Describir el contexto del elemento, donde no es o cómo se parecen. Um ID “barra-lateral” seria melhor. Una ID "barra lateral" sería mejor.

Microformatos são apenas nomes específicos de classes Microformatos son sólo nombres específicos de las clases

Pensa que microformatos é difícil para você? ¿Cree usted que en microformato es difícil para usted? Microformato é apenas marcação regular que faz uso de nomes de classes padronizados para a informação que contêm. Microformato no es más que marcado que hace que el uso regular de normalización de nombres de las clases por la información que contienen. Veja este vCard: Ver esta vCard:

 < div class = "vcard" > < a class = "fn org url" href = "http://www.commerce.net/" > CommerceNet < / a > < div class = "adr" > < span class = "type" > Work < / span > : < div class = "street-address" > 169 University Avenue < / div > < span class = "locality" > Palo Alto < / span > , < abbr class = "region" title = "California" > CA < / abbr > < span class = "postal-code" > 94301 < / span > < div class = "country-name" > USA < / div > < / div > < div class = "tel" > < span class = "type" > Work < / span >  1-650-289-4040 < / div > < div class = "tel" > < span class = "type" > Fax < / span >  1-650-289-4041 < / div > < div > Email: < span class = "email" > info@commerce.net < / span > < / div > < / div > <div Class = "vcard"> <a class = "url fn org" href = "http://www.commerce.net/"> CommerceNet </ a> <div class = "adr"> <span class = " tipo "> trabajo </ span>: <div street-address clase =" "> 169 University Avenue </ div> <span clase =" localidad de Palo Alto "> </ span>, <ABBR class =" región "title = "CA"> CA </ ABBR> <span class = "postal-code"> 94301 </ span> <div class = "country-name"> EE.UU. </ div> </ div> <div class = "tel" > <span Class = "type"> trabajo </ span>  1-650-289-4040 </ div> <div class = "tel"> <span class = "type"> Fax </ span>  1- 650-289-4041 </ div> <div> Email: <span class = "email"> info@commerce.net </ span> </ div> </ div>