Usando seletores aninhados do SASS com cuidado

Não é só por que você está usando um pré-processador que as boas práticas de escrita de CSS devem ser ignoradas. Imagine o código abaixo:

<main class="wrap">
    <div class="content">
        <article>
            <p>Lorem <strong>ipsum dolor sit amet</strong>. Officia rem sed fuga consequatur rerum.</p>
        </article>
    </div>
</main>

E você já deve ter visto um seletor desse tipo:

.wrap .content article p strong {
  color: #ccc;
}

Escrever seletores assim é um tiro no pé. O CSS fica ruim de entender e o trabalho de cascata do CSS – que é o que faz o CSS tão especial – pode se perder, já que você vai precisar fazer um outro seletor, mais específico, para sobreescrever essa formatação caso necessário.

Há outro exemplo mais comum, que é muito visto quando tentamos separar a estrutura e o estilo visual dos elementos. Fica algo assim:

<div class="features">
  <div class="box rounded bordered bg-blue">
    <h1>Título</h1>
    <p>Lorem <strong>ipsum dolor sit amet</strong>. Officia rem sed fuga consequatur rerum.</p>
  </div>
  <div class="box rounded bordered bg-blue">
    <h1>Título</h1>
    <p>Lorem <strong>ipsum dolor sit amet</strong>. Officia rem sed fuga consequatur rerum.</p>
  </div>
  <div class="box rounded bordered bg-blue">
    <h1>Título</h1>
    <p>Lorem <strong>ipsum dolor sit amet</strong>. Officia rem sed fuga consequatur rerum.</p>
  </div>
</div>

É claro que é muito difícil escrever um seletor e um código HTML dessa forma consciente. Você vai perceber que está fazendo alguma burrice e vai pensar duas vezes antes de continuar. Assim espero. Mas quando usamo um pré-processador, é bastante comum nessa armadilha por causa dos seletores aninhados, ou em um termo mais bonito em inglês nested selectors.

Veja um exemplo de nested selector:

.features {
  background-color: #cccccc;
  .box {
    border-radius: 3px;
    border: 1px solid #666666;
    background-color: white;
    p {
      font-size: 1rem;
      line-height: 1.2;
      color: #333333;
    }
  }
}

Coisa linda. Não é necessário repetir o início do seletor a cada elemento que você quer formatar dentro de .features, o SASS fará isso pra você. Veja o output desse código:

.features {
  background-color: #ccc;
}
.features .box {
  border-radius: 3px;
  border: 1px solid #666;
  background-color: white;
}
.features .box p {
  font-size: 1rem;
  line-height: 1.2;
  color: #333;
}

Até aqui tudo gerenciável. Mas suponha que você tenha o código abaixo:

<div class="container">
  <div class="content">
    <div class="features">
      <div class="box rounded bordered bg-blue">
        <h1>Título</h1>
        <p>Lorem <strong>ipsum dolor sit amet</strong>. Officia rem sed fuga consequatur rerum.</p>
      </div>
      <div class="box rounded bordered bg-blue">
        <h1>Título</h1>
        <p>Lorem <strong>ipsum dolor sit amet</strong>. Officia rem sed fuga consequatur rerum.</p>
      </div>
      <div class="box rounded bordered bg-blue">
        <h1>Título</h1>
        <p>Lorem <strong>ipsum dolor sit amet</strong>. Officia rem sed fuga consequatur rerum.</p>
      </div>
    </div>
  </div>
</div>

Aí você faça algo assim usando SASS:

.container {
  max-width: 1200px;
  margin: 0 auto;

  .content {
    padding: 0 20px;

    .features {
      background-color: #ccc;

      .box {
        border-radius: 5px;

        p {
          color: #333;

          strong {
            background-color: #fff;
          }
        }
      }
    }
  }
}

O código final será desse jeito:

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.container .content {
  padding: 0 20px;
}

.container .content .features {
  background-color: #ccc;
}

.container .content .features .box {
  border-radius: 5px;
}

.container .content .features .box p {
  color: #333;
}

.container .content .features .box p strong {
  background-color: #fff;
}

Não é incomum acontecer isso quando você está aprendendo a usar pré-processadores, mas isso pode acontecer facilmente em grandes projetos. Existem muitos problemas ao produzirmos código assim, mas os principais motivos são a geração de código inútil, aumentando o tamanho do seu arquivo final e principalmente a quebra da especificidade e a herança do código CSS. A briga de !important vai acontecer e você vai passar a metade do tempo resolvendo conflitos de formatação. Isso pode sempre ficar pior conforme você aninha cada vez mais os seletores. O segredo aqui é usar no máximo 3 aninhamentos. Há lugares que aconselham até 4 aninhamentos, mas aí eu acho muito. Um código bem feito naturalmente vai ter entre 2 ou 3 aninhamentos. Você não precisa começar a formatar os elementos iniciando seu seletor sempre do elemento pai. No nosso exemplo, tudo ficaria mais higienizado se fizessemos um código assim:

.container {
  max-width: 1200px;
  margin: 0 auto;
}
.content {
  padding: 0 20px;
}

.features {
  background-color: #ccc;

  .box {
    border-radius: 5px;

    p {
      color: #333;

      strong {
        background-color: #fff;
      }
    }
  }
}

O código gerado ficaria assim:

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.content {
  padding: 0 20px;
}

.features {
  background-color: #ccc;
}

.features .box {
  border-radius: 5px;
}

.features .box p {
  color: #333;
}

.features .box p strong {
  background-color: #fff;
}

Dependendo do caso, talvez até daria para tirar o aninhamento de .features. Ficaria assim:

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.content {
  padding: 0 20px;
}

.features {
  background-color: #ccc;
}

.box {
  border-radius: 5px;

  p {
    color: #333;

    strong {
      background-color: #fff;
    }
  }
}

Se você seguir as boas práticas de CSS que já falamos aqui e aqui você estará a salvo.

Sugiro duas ferramentas interessantes para testar códigos SASS. Um deles é o SaasMeister, que converte código SASS em código CSS normal. E o outro é o ScssConverter, que converte código SASS para SCSS.