CSS

Subir seu nível no CSS

Mas, dê tempo. Em breve, o CSS mostrará as verdadeiras profundidades de sua complexidade.

Há quatro coisas que você pode fazer para manter a saúde enquanto usa CSS em escala: use a semântica adequada, modularize, adote uma convenção de nomenclatura e siga o princípio de responsabilidade única.

Use semântica adequada

Em HTML e CSS, há o conceito de marcação semântica. Semântica é o significado das palavras e seus relacionamentos. No contexto de HTML, isso significa usar tags de marcação apropriadas. Aqui está um exemplo clássico.

<! - bad -> 
<div class = ”footer”> </ div>
<! - bom -> 
<rodapé> </ rodapé>

HTML semântico é bastante simples. Por outro lado, o CSS semântico é muito mais abstrato e subjetivo. Escrever CSS semântico significa escolher nomes de classes que transmitem significado e função estruturais. Invente nomes de classe que sejam fáceis de entender. Certifique-se de que eles não sejam muito específicos. Dessa forma, você pode reutilizar suas aulas.

 

Para ilustrar bons nomes de classes semânticas, aqui está um exemplo simplificado do CSS do Medium.

<div class = "stream"> 
<div class = "streamItem">
<artigo class = "postArticle">
<div class = "postArticle-conteúdo">
<! - content ->
</ div>
</ article>
</ div>
</ div>

A partir do código, você pode discernir imediatamente estrutura, papel e significado. A classe pai é stream, uma lista de artigos. A classe filha é streamItem, um artigo real na lista. Está claro como pais e filhos se relacionam uns com os outros. Além disso, essas classes são usadas em todas as páginas que apresentam artigos.

Você deve ser capaz de ler HTML e CSS como um livro. Deve contar uma história. Uma história tem personagens e relacionamentos entre eles.Mais CSS semântico acabará por tornar seu código mais sustentável.

Para ler mais, confira O que faz para nomes de classes semânticas , Naming CSS Stuff é realmente difícil , e semântica e sensibilidade . Para uma leitura mais longa, consulte Sobre semântica de HTML e arquitetura de front-end .

Modularizar

Na era das bibliotecas baseadas em componentes, como o React, a modularização é o principal. Pense nos componentes como módulos compostos criados pela desconstrução de interfaces. Abaixo está o fluxo de primeira página do Product Hunt. Como exercício, vamos dividir o fluxo em vários componentes.

 

Cada contorno colorido representa um componente. O fluxo tem muitos itens de fluxo .

<div class = "stream"> 
<div class = "streamItem">
<! - informações do produto ->
</ div>
</ div>

A maioria dos componentes pode ser dividida em componentes ainda menores.

 

Cada item de fluxo tem uma miniatura e informações sobre um produto em destaque.

<! - COMPONENTE DE STREAM -> 
<div class = "stream">
<div class = "streamItem">
    <! - COMPONENTE POST -> 
<div class = "post">
<img src = "thumbnail.png" class = "postThumbnail" />
<div class = "content">
<! - informações do produto ->
</ div>
</ div>
  </ div> 
</ div>

Como o componente de fluxo é independente de seus filhos e vice-versa, você pode ajustar ou alternar facilmente a classe de postagem sem fazer alterações significativas na classe de fluxo .

Pensar em componentes ajudará você a criar seu código de desacoplamento. Quanto mais desacoplado for o seu código, menor será a interdependência entre suas classes. Isso torna seu código mais fácil de modificar e trabalhar a longo prazo.

 
Design orientado a componentes

Ao modularizar seu CSS, comece dividindo seu design em componente. Você pode fazer isso com papel e lápis ou em um programa como o Illustrator ou o Sketch. Identificar componentes lhe dará uma idéia de como nomear suas classes e como elas se relacionam umas com as outras.

Para ler mais sobre CSS orientado a componentes, confira Arquiteturas CSS: Abordagens escaláveis ​​e modulares , Escrevendo CSS modular com Sass e Modularizando seu código front-end para manutenção e sanidade em longo prazo .

Escolha uma boa convenção de nomenclatura

Existem dezenas de convenções de nomenclatura CSS por aí. Algumas pessoas juram por sua escolha de convenção, alegando que a sua é melhor do que outras. Na verdade, a melhor convenção de nomenclatura é diferente para cada pessoa. O melhor conselho que já recebi sobre isso é: escolha a convenção de nomenclatura que faz mais sentido para você.

Aqui está uma pequena lista de algumas das convenções de nomenclatura que as pessoas usam:

Uma das minhas convenções de nomenclatura favoritas é o BEM. BEM significa bloco, elemento e modificador. Yandex , o equivalente russo do Google, chegou a problemas que tinham com a base de código CSS em escala.

 

O BEM é uma das convenções de nomenclatura mais simples, porém mais rígidas.

.block {} 
.block__element {}
.block - modificador {}

Blocos representam classes de nível mais alto. Elementos são filhos de blocos. E modificadores representam estados diferentes.

 
<div class = "search"> 
<tipo de entrada = "search__btn search__btn - ativo" />
</ div>

No exemplo acima, a pesquisa de classe é o bloco e o botão de pesquisa é seu elemento. Se quisermos modificar o estado do botão, podemos adicionar um modificador como ativo .

Uma coisa a lembrar sobre as convenções de nomenclatura é que, independentemente de qual convenção de nomenclatura CSS você preferir, muitas vezes você herdará ou trabalhará em bases de código com padrões diferentes. Esteja aberto para aprender novos padrões e formas alternativas de pensar sobre CSS.

Você pode ler mais sobre BEM em Getting your head 'round sintaxe BEM , BEM 101 e Intro para BEM . Para leitura geral sobre diferentes convenções, confira OOCSS, ACSS, BEM, SMACSS: o que são elas? O que devo usar?

Siga o princípio da responsabilidade única

Os princípios de responsabilidade única determinam que cada módulo ou classe deve ter responsabilidade sobre uma única parte da funcionalidade fornecida pelo software, e essa responsabilidade deve ser totalmente encapsulada pela classe.

Dentro do contexto de CSS, os princípios de responsabilidade única significam que partes de código, classes e módulos devem fazer apenas uma coisa. Quando aplicado à organização de arquivos CSS, isso significa que componentes independentes, como carrosséis e barras de navegação, devem ter seu próprio arquivo CSS.

/ components 
| - carrossel
| - | - carousel.css
| - | - carousel.partial.html
| - | - carousel.js
| - nav
| - | - nav.css
| - | - nav.partial.html
| - | - nav.js

Outro padrão comum na organização de arquivos é agrupar arquivos por funcionalidade. Por exemplo, no snippet acima, todos os arquivos relacionados ao componente carrossel são agrupados. Adotar essa abordagem facilita muito a localização de arquivos.

Além de separar os estilos dos componentes, é bom separar o estilo global usando o princípio de responsabilidade única.

/ base 
| - application.css
| - typography.css
| - colors.css
| - grid.css

No exemplo, cada preocupação de estilo é separada em seu próprio arquivo. Dessa forma, se você quiser atualizar suas cores, saberá exatamente onde procurar.

Independentemente da convenção de organização de arquivos usada, permita que o princípio de responsabilidade única ajude a orientar suas decisões. Se um arquivo começar a ficar inchado, considere particioná-lo com base no que faz sentido lógico.

Para mais informações sobre estruturas de arquivos e arquitetura CSS, leia Aesthetic Sass 1: Architecture and Style Organization e Scalable and Maintenance CSS Architecture .

Quando o princípio de responsabilidade única é aplicado a classes CSS individuais, isso significa que cada classe deve ter apenas uma função. Em outras palavras, separe os estilos em classes diferentes com base em interesses. Aqui está um exemplo clássico:

.splash { 
fundo: # f2f2f2;
cor: #fffff;
margem: 20px;
preenchimento: 30px;
raio de fronteira: 4 px;
posição: absoluta;
top: 0;
direita: 0;
fundo: 0;
esquerda: 0;
}

No exemplo acima, estamos misturando preocupações. A classe splash não só contém apresentação e estilo de lógica para si, mas também para os seus filhos. Para remediar isso, podemos dividir o código em duas classes separadas.

.splash { 
posição: absoluto;
top: 0;
direita: 0;
fundo: 0;
esquerda: 0;
}
.splash__content { 
background: # f2f2f2;
cor: #fffff;
preenchimento: 30px;
raio de fronteira: 4 px;
}

Agora temos um respingo e conteúdo respingo . Podemos usar o splash como uma classe genérica e completa que aceita qualquer criança. Todas as preocupações da criança, neste caso o conteúdo inicial , são desacopladas do pai.

Você pode ler mais sobre como aplicar a abordagem de responsabilidade única ao estilo e às classes no Princípio da responsabilidade única aplicado ao CSS e à Responsabilidade única .

Simplicidade sobre complexidade

Pergunte a qualquer bom desenvolvedor front-end ou arquiteto CSS e eles dirão que nunca estiveram totalmente satisfeitos com o código. Escrever um bom CSS é um processo iterativo. Comece com simplicidade, siga as convenções básicas de CSS e os guias de estilo e faça uma iteração a partir daí.

Eu adoraria saber como você se aproxima do CSS. Qual é a sua convenção de nomenclatura favorita? Como você organiza seu código? Sinta-se à vontade para deixar uma nota ou tweet para mim.

PS Se você gostou deste artigo, isso significaria muito se você apertar o botão recomendar ou compartilhar com os amigos.

Compartilhe

Ebrahim P. Leite

Ebrahim P. Leite

Escreva aqui uma descriçao breve sobre você...

Veja também

Comentários (1)

  1. Rodolfo Souza

    Rodolfo Souza

    ótimo