Para que sirven multiples nombres de class en un solo class

[arthpix]

Una razón práctica es el poder agregar atributos adicionales a cierto elemento que ya tiene una clase definida. Sin que se pierdan atributos ya declarados en la otra clase... lo que permite optimizar el código.

Por ejemplo, en un menú multinivel tipo acordeón los submenús están formados por listas de clase "sub" con un atributo "display: hidden" (ademas de otros atributos). usamos la clase "activo" para hacer que uno de los submenús sea visible sin perder el aspecto de sus elementos de lista.

Código CSS:

#menu li { color: red; list-style-type: disc;}
ul.sub { visibility: hidden; }
ul.sub li { color: blue; list-style-type: square; }
 
/* No tengo que volver a definir los "li", me ahorro una línea de código.*/
ul.activo {visibility: visible !important; }
 

Código HTML:

<ul id="menu">
   <li>Elemento 1
      <ul class="sub">
         <li>Subelemento 1.1</li>
         <li>Subelemento 1.2</li>
         <li>Subelemento 1.3</li>
      </ul>
   </li>
   <li>Elemento 2
      <!-- Este submenú esta visible -->
      <ul class="sub activo">
         <li>Subelemento 2.1</li>
         <li>Subelemento 2.2</li>
         <li>Subelemento 2.3</li>
      </ul>
   </li>
</ul>