O CSS é utilizado diariamente para definir a apresentação das páginas da internet, e todos nos sabemos dos vários aspectos que o torna problemático, principalmente em uma escala maior, os problemas do CSS ficam ainda mais aparentes. E para minimizar os problemas do CSS, vamos aprender sobre a Arquitetura do Triângulo Invertido, também conhecida como ITCSS, que é uma metodologia para estruturar o CSS da maneira mais eficaz e foi implementado pela primeira vez por Harry Roberts.
Pré-requisitos
Antes de nos aprofundarmos nas especificidades, devemos seguir algumas regras ao trabalhar com o ITCSS.
Em primeiro lugar, devemos evitar o uso de ID, pois os IDs tem um peso muito alto de especificidade, e seu uso eliminará completamente nossa especificidade.
Em segundo lugar, precisamos trabalhar com componente, construir padrões de widgets, módulos, componentes. Os componentes devem ser discretos e independentes e para que possam ser reutilizados.
E por último, mas não menos importante, não tenha medo de adicionar classes ao seu HTML, entenda que a utilização de classes em vez de elementos HTML simples, fornece uma arquitetura mais robusta e escalável.
Principais Métricas
O ITCSS é uma arquitetura totalmente gerenciada, essa arquitetura mostra como construir seus componentes, estilos tipográficos de baixo nível, temas e ajuda a gerenciar todo o projeto.
O ITCSS ordena todo o seu projeto através de três métricas principais.
Do Genérico para o Explícito
Aqui começamos com os estilos mais genéricos, de baixo nível, progredimos para regras mais específicas à medida que avançamos no projeto. Podemos começar com a redefinição e avançar para regras um pouco mais definidas como h1–6, até regras extremamente explícitas como .text-center.
Baixa especificidade para alta especificidade
Os seletores de menor especificidade aparecem no início, e vai aumentando à medida que avançamos no projeto. Não devemos escrever seletores de especificidade mais alta antes dos seletores de especificidade mais baixa para evitar conflitos.
De longo alcance até localizado
Os seletores no início do projeto afetam grande parte do DOM, com esse alcance diminuindo progressivamente à medida que avançamos na base do código. Podemos começar limpando as margens e os preenchimentos de tudo. Depois, podemos estilizar todos os tipos de elementos, depois reduzi-los a todos os tipos de elementos com uma determinada classe aplicada a ele, e assim por diante.
A ordenação de nossos projetos de acordo com essas principais métricas traz vários benefícios. Podemos começar a compartilhar estilos globais e de longo alcance com muito mais eficácia e eficiência, reduzimos a probabilidade de problemas de especificidade e escrevemos CSS em uma ordem lógica e progressiva. Isso significa maior extensibilidade e menos redundância, o que, por sua vez, significa menos desperdício e tamanhos de arquivo muito menores.
Camadas
Podemos prosseguir com as métricas dividindo nosso CSS em várias camadas. Cada camada deve ser introduzida em um local que atenda a cada um dos critérios onde cada camada é uma progressão lógica da última. Isso também significa que tudo, e todo tipo de coisa, tem seu próprio lugar.
Settings
Aqui serão definidas as configurações globais, configurações que devem estar acessíveis em qualquer lugar. As configurações globais podem ser coisas como tamanho da fonte base, paletas de cores e assim por diante.
$body-bg: #F4F4F4;
$text-color: #555555;Tools
Esta camada abriga os mixins e funções disponíveis globalmente, ela vem após a camada Settings, porque um mixin pode utilizar uma das configurações globais como parâmetro padrão. Exemplos de ferramentas globais podem ser mixins de gradiente, mixins de tamanho de fonte e assim por diante.
.font-size(@sizeValue) {
@remValue: @sizeValue;
@pxValue: (@sizeValue * 10);
font-size: ~"@{pxValue}px";
font-size: ~"@{remValue}rem";
}Generic
A camada Generic é a primeira que realmente produz CSS. Abriga estilos de alto nível e alcance. Essa camada raramente é modificada e geralmente é a mesma em todos os projetos nos quais você trabalha. Ele contém itens como normalize.css, regras globais de box-sizing, redefinições de CSS e assim por diante.
* {
box-sizing: border-box;
}Elements
A camada Elements é normalmente a última na qual encontramos seletores simples, baseados em elementos, e raramente é adicionada ou alterada após a configuração inicial. Depois de definir os estilos no nível do elemento, todas as adições devem ser implementados usando classes.
a {
&:hover,
&:focus {
text-decoration: none;
}
}Objects
Essa é a primeira camada na qual encontramos seletores baseados em classe. Os objetos podem variar de algo simples até um pouco mais complexa, é onde fazemos os padrões de botões, listas, painéis, etc.
.form-group {
margin-bottom: 20px;
.form-control {
font-size: 16px;
}
}Components
A camada de Components é onde começamos a estilizar partes mais reconhecíveis da interface do usuário. Ainda estamos vinculando classes aqui, então nossa especificidade ainda não aumentou. No entanto, essa camada é mais explícita que a última, pois agora estamos denominando peças explícitas e projetadas do DOM.
.modal {
.modal-content {
padding: 0;
border-radius: 4px;
overflow: hidden;
}
}Trumps
Essa camada supera todas as outras camadas e tem o poder de substituir qualquer coisa que tenha acontecido antes dela. Contém classes de utilitário e auxiliar, hacks e substituições. Essa é a camada de maior especificidade inclui os tipos de regras mais explícitas. Essa camada forma a ponta do triângulo.
Parciais
Cada camada contém uma série de parciais. A recomendação para a convenção de nomenclatura é _ <camada>. <parcial> .scss (por exemplo: _settings.colors.scss, _elements.headings.scss, _components.tabs.scss).
Essas parciais devem ser mantidas pequenas, com cada uma contendo apenas o CSS necessário para cumprir sua função. Portanto, _elements.headings.scss deve conter apenas as regras h1 a h6 por exemplo.
Outro exemplo é um componente Título da página, você criaria um parcial _components.page-title.scss na camada Componentes e vincularia nas classes (por exemplo, .page-title, .page-title-sub), não nos elementos HTML.
Conclusão
Essa abordagem nos fornece uma arquitetura CSS muito mais gerenciável. Saberemos onde colocar novos estilos, e temos a confiança de que todos os nossos diferentes seletores trabalharão bem juntos.
0
20