Cambiando mi manera de maquetar

[Carxl]

Hola a todos, cómo van??

Hace tiempo, desde que aprendí CSS(no es que sepa mucho, pero ya no me cuelgo jeje) mi estilo de maquetación la venía trabajando: div's y clases.

Antes si me pidían una página con los siguientes requerimientos:

- Maquetada a 2 columnas
- La columna de la izquierda, los links van de color verde y deben llevar un estilo de viñeta en cada link (list-style-image)
- La columna de la derecha debe llevar los párrafos de color gris.

Lo hubiera hecho así:

Código HTML:

<div id="izquierdo">
<ul class="estiloimagen">
<li><a href="" class="linksverdes" title="">Link 1</a></li>
<li><a href="" class="linksverdes" title="">Link 2</a></li>
<li><a href="" class="linksverdes" title="">Link 3</a></li>
</ul>
</div>
<div id="derecho">
<h1>Titulo</h1>
<p class="textogris">Texto texto texto texto</p>
<p class="textogris">Texto texto texto texto</p>
<p class="textogris">Texto texto texto texto</p>
</div> 

Se fijan que mi maquetación anterior llevaría una clase para <ul> (estiloimagen), una clase para los links (linksverdes) y una clase para los párrafos <p> (textgris)??? De esa manera lo hubiera hecho anteriormente.

Ahora, no sé, por que me ha dado por maquetar de otra manera, de la manera como lo estoy haciendo, lo montaría así:

Código HTML:

<div id="izquierdo">
<ul>
<li><a href="" title="">Link 1</a></li>
<li><a href="" title="">Link 2</a></li>
<li><a href="" title="">Link 3</a></li>
</ul>
</div>
<div id="derecho">
<h1>Titulo</h1>
<p>Texto texto texto texto</p>
<p>Texto texto texto texto</p>
<p>Texto texto texto texto</p>
</div> 

Los CSS de este nuevo quedaría así:

Código:

#izquierdo
{
float:left;
width:48%;
}

#izquierdo ul
{
list-style-image:(url:'direccion');
}

#izquierdo a, a:links, a:hover, a:.......
 {
color:#060;
 }

#derecho
{
float:right;
width:48%;
}

#derecho p
 {
 color:#ccc;
 }

Entienden la diferencia?? En la primera maquetación me basé en clases para llevar a cabo los efectos, en la segunda quité las clases e hice una especie de "herencia"...

Después de todo esto, viene mi pregunta: Cuál es mejor?? Desventajas y ventajas de cada una?? He mejorado sintácticamente con la segunda, me estoy devolviendo??

Espero me hayan entendido...

Saludos

[Mikmoro]

Para mi es mucho mejor la segunda manera (aunque ya sabes que tu y yo no solemos estar muy de acuerdo )

Para mi es mucho más limpia y aprovecha el propio etiquetado del html y el concepto de anidamiento.

Si vas a hacerlo así, ten en cuenta este pequeño error, que es muy habitual:

#izquierdo a, a:links, a:hover, a:.......
{
color:#060;
}

que debería ser:

#izquierdo a, #izquierdo a:links, #izquierdo a:hover, #izquierdo a:.......
{
color:#060;
}

Mikel.

[kazafun]

Ahora lo haces correctamente, ¿porque hacer clases innecesarias?

Cuando vayas a usar ese estilo en otras partes del documento entonces si, dales una clase y aplica el estilo correspondiente.

[Carxl]

Veo veo... 2 puntos para la segunda jejeje

Gracias a los dos..

Mikmoro tú como siempre en contra mía!! Naaaa mentiras... Ok tomaré en cuenta tu recomendación man!! Me explicas cuá es el error? Es un error sintáctico?? semántico??

Saludos

Pdt: Veeeee mirá, no tengo nada sobre mi firma.... jeje Chauuu Mikel

[Mikmoro]

Iniciado por Carxl

Me explicas cuá es el error? Es un error sintáctico?? semántico??

Fíjate en la diferencia de los dos bloques que he puesto. En el primero:

#izquierdo a, a:links, a:hover, a:.......
{color:#060;}

el estilo afectará a los "a" dentro de #izquierdo, pero también a todos los a:link, todos los a:hover, etc.

Es decir, si vas a referenciar una etiqueta por su "padre" o ancestro, deberás hacerlo cada vez, no basta con ponerlo al principio para todo el selector, porque la coma divide por completo selectores diferentes.

Así, #caja h1, h2 { afectaría a los h1 de caja, y a todos los h2, mientras que #caja h1, #caja h2 { solo a los h1 y h2 de caja.

¿Se entiende?

Mikel.

[Carxl]

Ahhhhhhhhhhhhhhh si sí man, tienes toda la razón

Sabes que no había caido en cuenta de ese error?? Gracias

Saludos