Depois de concluir um trabalho de front-end, muitas pessoas esquecem a estrutura e os detalhes do projeto. No entanto, o código não será totalmente finalizado imediatamente. Haverá trabalhos de manutenção contínuos durante o tempo restante e esses trabalhos podem não ser concluídos por você. Portanto, um código bem estruturado pode otimizar bastante sua capacidade de manutenção. Aqui estão cinco maneiras de melhorar a capacidade de manutenção de seus arquivos CSS, que é um guia de estilo CSS melhor.
1. Divida seus estilos
Para projetos pequenos, antes de escrever o código, divida o código em vários blocos de acordo com a estrutura ou conteúdo da página e faça comentários. Por exemplo, você pode separar estilos globais, layouts, estilos de fonte, formulários, comentários e outros em vários blocos diferentes para continuar trabalhando.
Para projectos maiores, isto obviamente não terá qualquer efeito. Neste ponto, o estilo precisa ser dividido em vários arquivos de folhas de estilos diferentes. A folha de estilo mestre abaixo é um exemplo dessa abordagem e sua principal função é importar outros arquivos de estilo. Usar esse método pode não apenas otimizar a estrutura de estilo, mas também ajudar a reduzir algumas solicitações desnecessárias do servidor. Há muitas maneiras de decompor arquivos, e a folha de estilo mestre usa a mais comum.
/*------------------------------------------------ ------------------ [Folha de estilo mestre] |
Ao mesmo tempo, para projetos grandes, você também pode adicionar sinalizadores de atualização para arquivos CSS ou algumas medidas de diagnóstico, que não serão detalhadas aqui.
2. Crie um índice de arquivo CSS
Para entender rapidamente a estrutura de todo o arquivo CSS, é uma boa opção criar um índice de arquivo no início do arquivo. Um método possível é construir um índice em forma de árvore: o id estrutural e a classe podem se tornar um ramo da árvore. do seguinte modo:
| /*------------------------------------------------ ------------------ [Layout] * corpo + Cabeçalho / #cabeçalho + Conteúdo / #content - Coluna esquerda / #leftcolumn - Coluna direita / #rightcolumn - Barra lateral / #barra lateral -RSS/#rss - Pesquisar / #pesquisar - Caixas / .box - Sideblog / #sideblog + Rodapé / #rodapé Navegação #navbar Anúncios .ads Cabeçalho de conteúdo h2 ———————————————-*/ |
Ou isso também pode ser feito:
/*------------------------------------------------ ------------------ [Índice] -------------------------------------------------- ------------------*/ |
Outra forma é simplesmente listar o conteúdo primeiro, sem recuo. No exemplo abaixo, se você precisar ir para a seção RSS, basta pesquisar 8.RSS.
/*------------------------------------------------ ------------------ [Índice] -------------------------------------------------- ------------------*/ /*------------------------------------------------ ------------------ |
Definir esse estilo de pesquisa pode efetivamente tornar mais fácil para outras pessoas lerem e aprenderem seu código. Ao trabalhar em projetos grandes, você também pode imprimir a pesquisa para facilitar a referência ao ler o código.