Clases - Cómo realizar los ejercicios

Reducir el número de clases combinando clases

Al poder combinar clases y selectores en las hojas de estilo, normalmente se pueden conseguir el mismo resultado de varias formas distintas.

El ejemplo siguiente se puede conseguir de varias formas distintas:

<div>
  <p>Si algo puede salir mal, saldrá mal</p>
  <p>Ley de Murphy</p>
</div>

<div>
  <p>Murphy era un optimista</p>
  <p>Comentario de O'Toole</p>
</div>

• La manera más simple consiste en asignar una clase distinta a cada elemento:

  <div class="a">
    <p class="c">Si algo puede salir mal, saldrá mal</p>
    <p class="d">Ley de Murphy</p>
  </div>
  
  <div class="b">
    <p class="e">Murphy era un optimista</p>
    <p class="f">Comentario de O'Toole</p>
  </div>
  

  div { margin: 10px; }
  p { margin: 10px; padding: 10px; }
  div.a { border: #FD7300 4px solid; }
  div.b { border: #3914AE 4px solid; }
  p.c { background-color: #FFF7AA; text-align: center; }
  p.d { background-color: #D4BA6A; text-align: right; }
  p.e { background-color: #8C7C87; text-align: center; }
  p.f { background-color: #8F78AD; text-align: right; }
  

  
• Otra manera de hacerlo es aprovechar los selectores de descendientes. De esta manera sólo se necesitan cuatro clases.

  <div class="a">
    <p class="cita">Si algo puede salir mal, saldrá mal</p>
    <p class="nombre">Ley de Murphy</p>
  </div>
  
  <div class="b">
    <p class="cita">Murphy era un optimista</p>
    <p class="nombre">Comentario de O'Toole</p>
  </div>
  

  div { margin: 10px; }
  p { margin: 10px; padding: 10px; }
  div.a { border: #FD7300 4px solid; }
  div.b { border: #3914AE 4px solid; }
  div.a p.cita { background-color: #FFF7AA; text-align: center; }
  div.a p.nombre { background-color: #D4BA6A; text-align: right; }
  div.b p.cita { background-color: #8C7C87; text-align: center; }
  div.b p.nombre { background-color: #8F78AD; text-align: right; }
  

  
• Otra manera de hacerlo es aprovechar que se pueden asignar varias clases a un mismo elemento. De esta manera sólo se necesitan cuatro clases.

  <div class="a">
    <p class="a cita">Si algo puede salir mal, saldrá mal</p>
    <p class="a nombre">Ley de Murphy</p>
  </div>
  
  <div class="b">
    <p class="b cita">Murphy era un optimista</p>
    <p class="b nombre">Comentario de O'Toole</p>
  </div>
  

  div { margin: 10px; }
  p { margin: 10px; padding: 10px; }
  div.a { border: #FD7300 4px solid; }
  div.b { border: #3914AE 4px solid; }
  p.a.cita { background-color: #FFF7AA; text-align: center; }
  p.a.nombre { background-color: #D4BA6A; text-align: right; }
  p.b.cita { background-color: #8C7C87; text-align: center; }
  p.b.nombre { background-color: #8F78AD; text-align: right; }
  

  

Para una hoja de estilo que sólo se vaya a utilizar en una página, el primer método es suficiente, pero en hojas de estilo que vayan a utilizarse en sitios webs con muchas páginas es mejor utilizar los otros métodos, ya que permiten crear muchas combinaciones a partir de las clases definidas.