Por que ao estilizar a primeira section é separado em duas partes, uma com container e a outra com principal? Nao poderia estilizar em apenas uma não?usando assim container_principal,não entendi essa parte da diferença de com ou sem "_"
Por que ao estilizar a primeira section é separado em duas partes, uma com container e a outra com principal? Nao poderia estilizar em apenas uma não?usando assim container_principal,não entendi essa parte da diferença de com ou sem "_"
Oi Francisco! Tudo bem?
A ideia de usar classes separadas como container e principal (ou secundario, como no exemplo) é uma prática comum em desenvolvimento web para manter o código organizado e flexível.
Reutilização de Código: Separar estilos em diferentes classes permite que você reutilize o mesmo estilo em diferentes partes do seu projeto. Por exemplo, a classe container pode definir um layout básico que é usado em várias seções, enquanto principal pode ter estilos específicos apenas para aquela seção.
Clareza e Manutenção: Ao dividir o estilo em partes menores e mais específicas, o código se torna mais fácil de entender e manter. Se você precisar fazer alterações no estilo, é mais fácil localizar e modificar uma classe específica do que um conjunto de regras misturadas.
Modularidade: Com classes separadas, você pode combinar estilos de diferentes maneiras. Por exemplo, container pode ser usado em várias seções, enquanto principal ou secundario adicionam estilos específicos para cada seção.
_)O uso de underscores (_) em nomes de classes é uma convenção de nomenclatura que ajuda a indicar a hierarquia ou a relação entre elementos. Por exemplo, container__descricao indica que a descrição é uma parte do container. Isso é útil para entender rapidamente a estrutura do HTML e como os estilos estão aplicados.
Imagine que você tem um layout básico que se repete em várias seções do seu site. Você pode ter algo assim:
<section class="container principal">
<!-- Conteúdo específico da seção principal -->
</section>
<section class="container secundario">
<!-- Conteúdo específico da seção secundária -->
</section>
No CSS, container pode definir o layout geral, enquanto principal e secundario adicionam estilos específicos para cada seção:
.container {
display: flex;
justify-content: space-between;
}
.principal {
background-color: blue;
}
.secundario {
background-color: green;
}
Espero ter ajudado. Conte com o apoio do fórum em sua jornada :)
Um abraço e bons estudos!