Olá, Ana! Como vai?
O @extend é um recurso para evitar duplicação de código, permitindo reaproveitar estilos entre classes. Contudo, ele precisa ser usado com cautela, pois pode gerar CSS complexo e redundante se mal utilizado.
Uso adequado do @extend
Uma aplicação ideal do @extend é para classes que compartilham exatamente o mesmo estilo. Por exemplo, se você tem dois botões diferentes, mas ambos possuem bordas arredondadas e a mesma cor de fundo, é interessante usar @extend:
.button {
background-color: #3498db;
border-radius: 5px;
}
.button-primary {
@extend .button;
color: white;
}
.button-secondary {
@extend .button;
color: gray;
}
Neste caso, os estilos de borda e fundo são aplicados apenas uma vez, e cada botão herda essas propriedades, evitando duplicação.
Uso inadequado ou excessivo do @extend
Um problema comum é usar @extend entre classes que compartilham poucos estilos, o que pode gerar seletores muito longos e CSS desnecessário. Por exemplo:
.card {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
padding: 16px;
}
.card-title {
@extend .card;
font-size: 20px;
}
Aqui, @extend não seria a melhor escolha, pois card-title herdaria a sombra e o padding, que talvez não façam sentido para um título. Nesses casos, é melhor separar as classes e aplicar apenas os estilos realmente compartilhados.
Use @extend sempre que as classes realmente compartilhem estilos completos. Para evitar excessos, considere outras alternativas, como mixins, quando houver a necessidade de reaproveitar apenas partes do estilo.
Espero ter ajudado!
Siga firme nos seus estudos e conte com o fórum sempre que precisar!
Abraços :)
Caso este post tenha lhe ajudado, por favor, marcar como solucionado
