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:
E você já deve ter visto um seletor desse tipo:
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:
É 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:
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:
Até aqui tudo gerenciável. Mas suponha que você tenha o código abaixo:
Aí você faça algo assim usando SASS:
O código final será desse jeito:
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:
O código gerado ficaria assim:
Dependendo do caso, talvez até daria para tirar o aninhamento de .features. Ficaria assim:
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.