CSS práctico

Veamos un sencillo ejemplo de un CSS practico.

Con un css practico podemos rápidamente modificar nuestro sitio de manera eficaz, ahorrandonos mucho tiempo que duraríamos editando tablas y darle mantenimiento a nuestro sitio para futuros cambios que se hagan en el.

Por ejemplo, cambiar un sidebar de lugar, o no mostrarlo en algunas partes.

XHTML
[code]
< div id="content">
< div id="main">
Soy el contenido…Soy el contenido…Soy el contenido…Soy el contenido…Soy el contenido…Soy el contenido…Soy el contenido…Soy el contenido…Soy el contenido…Soy el contenido…Soy el contenido…Soy el contenido…Soy el contenido…Soy el contenido…Soy el contenido…Soy el contenido…Soy el contenido…Soy el contenido…Soy el contenido…Soy el contenido…Soy el contenido…Soy el contenido…
< /div>
< div id="sidebar">
Soy el sidebar…Soy el sidebar…Soy el sidebar…Soy el sidebar…Soy el sidebar…Soy el sidebar…Soy el sidebar…Soy el sidebar…Soy el sidebar…Soy el sidebar…Soy el sidebar…Soy el sidebar…Soy el sidebar…Soy el sidebar…Soy el sidebar…Soy el sidebar…Soy el sidebar…Soy el sidebar…
< /div>
< /div>
[/code]

nada del otro mundo, dos divs dentro de uno que los contiene. Veamos el CSS

CSS
[code]
#content{
margin: 0 auto;
width: 710px;
}
#sidebar{
display: none; /* para no mostrar el sidebar*/
}
body.rl #main, body.lr #main{
width: 490px;
}
body.rl #sidebar, body.lr #sidebar{
display: block; /* eliminar el display:none; */
width: 200px;
}
body.rl #main, body.lr #sidebar{
float: left;
}
body.lr #main, body.rl #sidebar{
float: right;
}
[/code]

Vemos que tenemos dos clases, las que harán el trabajo de “mantener” nuestro sitio. Así solo agregando las clases en nuestra etiqueta body, cambiara nuestro diseño y sin la clase espeficicada en body, nuestro sidebar no se mostrará.

para colocar el sidebar a la izquierda:
[code]
< body class="lr">
[/code]

a la derecha:

[code]
< body class="rl">
[/code]

para no mostrarlo:
[code]
< body>
[/code]

Así si un día el cliente nos dice que quiere el sidebar de un lado u otro o ya no lo quiere, cambiando solo un parámetro todo nuestro diseño se vera afectado.