estilos anidados

[cslbcn]

Hola.

Veo muy frecuentemente utilizar dos clases dentro de una misma etiqueta html. Por ejemplo:

Código HTML:

<div class="caja caja2">
Hola
</div>
 

Código CSS:

<style>
.caja{background-color:red; width:200px; height:200px; text-align:left;}
.caja2{ text-align:right; }
</style>
 

Mi duda es porqué se hace esto. Veo que se utilizan en webs importantes, así que debe ser útil, pero no se realmente para que...

Alguién podría explicarmelo o ponerme un ejemplo práctico?

Gracias de antemano

[webosiris]

usando tu propio ejemplo así se entiende mejor, imagina que quieres 2 cajas. Ambas son idénticas, solo que una tiene el texto alineado a la izquierda y la otra a la derecha.

Si las haces con 2 clases diferentes asignándole 1 clase a cada una, te quedaría así:

Código CSS:

.caja{background-color:red; width:200px; height:200px; text-align:left;}
.caja2{background-color:red; width:200px; height:200px; text-align:right;}
 

Código HTML:

<div class="caja">Caja1</div>
<div class="caja2">Caja2</div>
 

en cambio si usas tu ejemplo de css y el siguiente html, verás que el css puede ser sensiblemente más pequeño y sencillo.

Código HTML:

<div class="caja">Caja1</div>
<div class="caja caja2">Caja2</div>