« anterior | siguiente »

Home > 2008 > Mayo > Jueves, 29 de Mayo 2008 > Uso excesivo de capas y estilos en CSS
Blogs Media: CSS Mania | VivirLatino | Sentido Web | Apps Mania

Publicidad

Jue29May2008

Uso excesivo de capas y estilos en CSS

18:00 H (CET)| Temas: CSS

Un buen artículo en el que nos comenta sobre el uso excesivo de capas y de clases. Sobre todo de DIVs, muchas veces se encierra en una capa unas etiquetas para darles formato cuando se puede evitar la capa contenedora por tener solamente un elemento hijo en su interior:

<div id="header>
<img src="logo.jpg" alt="My site name" />
</div>

Se puede sustituir por:

<h1>My site name</h1>

con estos estilos

h1 {
background:url(logo.jpg);
text-indent:-9999px; /*(that will remove the text from the page)*/
width:800px;
height:150px;
}

¿Por qué evitar estos usos incorrectos?

  • No es semántico: solo están puestos allí para maquetar.
  • No es bueno para SEO: los buscadores hacen uso de las etiquetas de cabecera para obtener datos significativos.
  • Sobran

El error sobre el uso excesivo de clases es cuando en vez de usar estilos anidados, repetimos el estilo en varias etiquetas:

<div id="menu">

<span class="menu_item">Menu Item</span>

<span class="menu_item">Menu Item</span>

<span class="menu_item">Menu Item</span>

<span class="menu_item">Menu Item</span>

</div>

CSS Diseases: Divitis & Classitis


Vía / CSS Globe





Relacionados

Feedback (5) » Formulario

1. Luciano A. Ferrer ~ Jueves, 29 May 2008 | 17:36H:

Faltó el enlace al artículo? o es así nomás?

2. Christian ~ Viernes, 30 May 2008 | 00:29H:

Se ve incompleto el artículo, y me gustaría poder leerlo completamente, porque es una buena reseña de como hacer mejor las cosas

por lo demás, muy bueno el blog
saludos.-

3. Neron ~ Viernes, 30 May 2008 | 11:56H:

¿Y cómo se compagina esto con que el logotipo siga siendo enlazable al dominio? Porque desde el background: no se puede...

4. Muser ~ Sábado, 31 May 2008 | 16:41H:

5. Muser ~ Sábado, 31 May 2008 | 16:44H:

Vaya, se me ha comido el html:

My site name

y en el estilo de la equieta a:

a.header
{
   display: block;
}
Conversación

Nombre:

Email:

(no aparecerá)

URL:

(opcional)
¿Recordar datos?

↓ Comentarios (XHTML permitido)