Como Refatorar CSS - Um Guia

A refatoração de CSS precisa ser uma parte essencial do fluxo de trabalho de desenvolvimento de frontend, se quisermos ter uma base de código gerenciável e otimizada. Quando nós refatoramos CSS, nós limpar e reorganizar nosso código existente sem adicionar novos recursos ou corrigir bugs.

Refatoração ajuda evitar a explosão do CSS, melhora a legibilidade do código e a reutilização, e torna o CSS mais elegante e mais rápido de executar.

A refatoração é geralmente necessária depois de um tempo, pois mesmo projetos que começaram com uma base de código concisa e organizada, mais cedo ou mais tarde, começam a perder sua clareza; consistência, regras obsoletas e partes duplicadas do código aparecem; e também começamos a substituir estilos e empregamos mais e mais hacks e soluções alternativas.

A melhor maneira de manter nossa base de código CSS sustentável é manter o “refatorar cedo, refatorar com frequência” regra de ouro. Neste post, vamos dar uma olhada em algumas dicas sobre como podemos conduzir um processo efetivo de refatoração de CSS.

1. Realizar uma auditoria inicial

Para ter uma imagem melhor sobre o que precisamos refatorar, é o melhor começar com uma auditoria abrangente para ver o que temos atualmente.

Há muitas ótimas ferramentas on-line que podem nos ajudar nesse esforço. O CSSDig é uma poderosa extensão do Chrome que analisa o CSS de um site e explora suas fraquezas, como seletores muito específicos ou propriedades repetitivas.

O CSS não utilizado investiga as regras CSS não usadas, enquanto as ferramentas de linting, como CSS Lint, tornam possível encontrar rapidamente compatibilidade, manutenibilidade e outros problemas.

Também é importante examinar manualmente o código durante a auditoria inicial, pois muitos problemas no nível de arquitetura só podem ser capturados dessa maneira..

2. Configurar um plano gerenciável

Refatorar o código de trabalho é sempre uma tarefa difícil, mas podemos aliviar a dor se criarmos um plano sobre o que precisamos fazer, dividir o processo de refatoração em partes gerenciáveis ​​e criar um cronograma viável.

Na refatoração de CSS, há uma coisa crucial que sempre precisamos levar em consideração: algumas coisas que refatoramos, por exemplo, mudando os nomes dos seletores, necessário ajustar o código dos arquivos HTML e JavaScript relevantes também.

Portanto, é uma boa ideia seguir adiante essas modificações adicionais que precisaremos realizar, e construí-los em nosso cronograma de refatoração junto com as tarefas primárias relacionadas ao CSS.

3. Acompanhe o Progresso

Antes de embarcar na refatoração, é um passo essencial para fazer backup de nossos arquivos iniciais. A introdução de um sistema de controle de versão, como o Git ou o Subversion, em nosso fluxo de trabalho também pode melhorar significativamente o processo de refatoração, pois teremos um registro sobre as etapas sequenciais que tomamos e nós será capaz de retornar a um estágio anterior se quisermos refazer as coisas.

4. Siga um Guia de Estilo de Codificação

Um guia de estilo de codificação coerente pode melhorar notavelmente a capacidade de leitura e manutenção do código, portanto, antes de começarmos a refatorar, é essencial configurar um guia de estilo de codificação CSS.

As coisas importantes para decidir são:

• convenções de nomenclatura
• regras de formatação
• ordem de declaração
• unidades e valores que queremos usar
• Comentando regras

Se não quisermos criar nosso próprio guia de estilo de codificação, também podemos usar a de outra pessoa, como o ThinkUp, que pode ser encontrado no Github.

Não é suficiente apenas introduzir um guia de estilo de codificação, também precisamos cumpri-lo quando reescrevemos o código durante a refatoração e esperar o mesmo de todos os outros quem trabalha no nosso projeto.

5. Configurar uma estrutura de arquivos coerente

Depois que estamos prontos com os preparativos, a primeira coisa que precisamos fazer é configurar uma estrutura de arquivos CSS adequada que preste atenção à natureza em cascata do CSS.

Depende principalmente do projeto como melhor organizar nossos arquivos, mas existem algumas regras universais, como usar um normalize.css arquivo para estilos de redefinição de CSS, um global.css para estilos globais que são usados ​​em todo o projeto e para armazenar bibliotecas de terceiros em uma pasta separada.

Se quisermos jogar com segurança com nossa estrutura de arquivos CSS, também há arquiteturas prontas, como SMACSS ou ITCSS, que oferecem técnicas eficazes sobre como organizar arquivos CSS de forma escalável.

6. Livrar-se de regras não utilizadas e duplicadas

Depois de um tempo, os arquivos CSS geralmente começam a ser abundantes em regras não utilizadas que precisamos identificar e eliminar durante a refatoração. Existem muitas ferramentas online que nos permitem investigar essas regras obsoletas, e às vezes também nos permitem abandoná-los rapidamente.

A ferramenta mais conhecida para essa finalidade é provavelmente o UnCSS, um módulo do Node.js que possibilita a eliminação rápida de regras CSS não utilizadas e também nos fornece opções de configuração sofisticadas que facilitam o ajuste fino do processo de limpeza..

É importante levar em conta que nós não necessariamente quer remover regras não utilizadas de todos os arquivos CSS que temos, por exemplo, de folhas de estilo globais, de redefinição ou de terceiros, por isso precisamos excluí-los enquanto executa a limpeza.

Juntamente com regras obsoletas, as regras duplicadas também levam a um excesso de código supérfluo e perda de desempenho. Podemos removê-los usando o módulo CSS Purge Node.js, mas também podemos trabalhar com Linters CSS para procurar regras duplicadas em nossos arquivos CSS.

7. Reduzir Especificidade

A especificidade de um seletor de CSS é calculada a partir do número e dos tipos de seletores internos que ele contém. A especificidade do CSS é expressa como um número de 4 dígitos que é o mais fácil de entender, se verificarmos essa calculadora de especificidade CSS visual:

A menor especificidade (0001) pertence a seletores que visam apenas um elemento HTML geral, como

ou

. Quanto mais seletores internos um seletor composto contém, maior é sua especificidade.

Certos seletores, como identidade ou seletores provenientes de estilos inline, têm prioridades mais altas porque substituem os estilos pertencentes a seletores mais genéricos. Por exemplo, a especificidade do # id1 seletor é 0100.

Na refatoração, o objetivo é diminuir a especificidade dos seletores (mantê-los curtos) tanto quanto possível, como seletores com maior especificidade reduzem significativamente a reutilização do seletor, e levar a uma base de código inchado.

Os 3 principais tipos de seletores de alta especificidade são:

1. Seletores qualificados, tal como p.class1 (definindo o p tag é desnecessária aqui, pois torna impossível usar a mesma classe com outros elementos HTML)
2. Seletores profundamente aninhados, tal como .class1 .class2 .class3 .class4…
3. IDs, tal como # id1

Ferramentas on-line, como CSSDig mencionado na Etapa 1, podem ser usadas para encontrar rapidamente esses seletores de alta especificidade. Também pode ser útil configurar uma regra no guia de estilo de codificação sobre coisas como o nível máximo de aninhamento ou um limite de uso identidade seletores.

8. Weed Out !importante Regras

Regras CSS seguidas pelo !importante instrução substitui regras de estilo regulares. Usando !importante regras mais cedo ou mais tarde levar a código incoerente. Não é uma coincidência que a maioria das ferramentas de lintagem as identifique como erro.

Quando precisamos escrever CSS rapidamente, podemos começar a confiar neles por causa de sua simplicidade.

O principal problema com !importante declarações é que, se quisermos substituí-los no futuro, precisamos colocar ainda mais !importante declarações em uso, por isso é melhor eliminá-las onde for possível durante o processo de refatoração.

9. Limpe os números mágicos e os valores codificados

Durante nosso fluxo de trabalho CSS cotidiano, às vezes nos deparamos com problemas que não podemos resolver, e começamos a usar os chamados números mágicos, valores que funcionam por alguns motivos, mas não entendemos o porquê. Por exemplo, tome o seguinte exemplo:

 .class1 position: absolute; topo: 28px; esquerda: 15,5%; 

O principal problema dos números mágicos é que eles são circunstancial, e eles incorporam o “programação por permutação” antipadrão. Durante o processo de refatoração, precisamos remover essas regras arbitrárias de nosso código e substituí-las por soluções mais razoáveis, sempre que possível..

A mesma regra se aplica para valores codificados também. Provavelmente, a ocorrência mais frequente de valores codificados pode ser encontrada nas regras de altura da linha:

 / * bad, precisaremos adicionar regras extras de linha fixa aos elementos filhos de .class1 * / .class1 font-size: 20px; altura da linha: 24px;  / * bom, a regra de altura de linha flexível também pode ser usada com segurança por elementos filho * / .class1 font-size: 20px; altura da linha: 1,2; 

Os valores codificados tornam nosso código menos à prova do futuro e mais rígido, portanto, como parte da refatoração, precisamos desenterrá-los e substitua-os por valores flexíveis.

10. Unidades de Refatoração e Valores

Tornar a manutenção e a depuração mais fáceis no futuro e evitar falhas que possam resultar do uso de unidades diferentes, como em e px, simultaneamente, precisamos manter regras coerentes sobre como usamos valores relativos e absolutos.

Se os usamos inconsistentemente no passado, precisamos convertê-los para que possam constituir um sistema conciso

Se usarmos muitas cores semelhantes em nosso site, também pode ser uma coisa sensata racionalize o esquema de cores reduzindo o número de cores que empregamos. (Aqui está um post sobre como escolher um esquema de cores do site de uma maneira prática.)