Una forma de tener limpio el CSS y de paso lograr que haga lo que deseamos sin volvernos locos es poder aplicar una misma regla de CSS (o varias) a distintas clases.
Lo que pasa es que tiene truqui porque no es sólo colocar una detrás de otra.
La sintaxis es como sigue:
Si un item tiene varias clases
.border-blue.background { ... }Para múltiples items cada uno con sus propias clases
.border-blue, .background { ... }Para un item donde ‘.background’ es el hijo de ‘.border-blue’.
.border-blue .background { ... }Particularmente la última es una que nos va a poder resultar muy útil ya que si hemos concatenado elementos uno dentro de otro tal vez queramos una regla que sólo afecte a esa última div, y sólo cuando está dentro de ese elemento y no otro.
Esta info está sacada del gran stackoverflow.
¡Ah! Y no olvides que en CSS puedes darle a un elemento varias clases de CSS sólo colocando los nombres uno detrás de otro, por ejemplo:
<div class="clase-1 clase-2 clase-3">Mi contenido</div>
