Guia de comerciantes para otimizar CSS

As folhas de estilo em cascata trazem vida a um site. O CSS controla a aparência de elementos HTML, como cores, fontes, layouts e animações. Mas o CSS pode rapidamente se tornar uma rede emaranhada de estilos inchados e desatualizados e regras redundantes. O resultado geralmente é tempo de carregamento mais lento e solução de problemas complicada.

A otimização de arquivos CSS evita esses snafus.

Verificando CSS

Comece verificando o estado dos seus arquivos CSS.

• Ferramentas do navegador. Abra um site no Chrome ou Firefox, clique com o botão direito do mouse em qualquer lugar da página e selecione “Inspecionar”. Na guia “Rede”, filtre por “CSS” para ver o tamanho e o tempo de carregamento de cada folha de estilo.

Outras ferramentas podem simplificar o processo de limpeza.

• UNUSUSTCSS é uma ferramenta fácil de usar que digitaliza seu site, identifica CSS não utilizado e gera um versão simplificada. Digite seu URL e deixe a ferramenta fazer o trabalho pesado.

• Limpencss Oferece um minificador e otimizador CSS on -line. Ele retira espaços desnecessários e comentários e remove o código redundante, resultando em uma folha de estilo mais enxuta.

• CSS Lint não remove diretamente o CSS não utilizado; Ele destaca ineficiências e possíveis erros. Use -o para identificar áreas onde seus CSs podem ser simplificados e aprimorados.

Por exemplo, esses estilos não utilizados para um banner antigo devem ser removidos:

.banner { background: #f4f4f4; padding: 20px; }
.banner__title { font-size: 2em; }

Os estilos ativos permanecem:

.header { background: #fff; padding: 10px; }
.header__logo { height: 50px; }

Otimizando CSS

Depois de remover o código não utilizado, a próxima etapa é otimizar o que resta. Aqui estão minhas táticas preferidas.

• A minificação remove caracteres desnecessários (por exemplo, espaços e comentários) do seu CSS, reduzindo o tamanho do arquivo sem afetar a funcionalidade. Minifier.org é minha ferramenta superior.

• Combine vários arquivos CSS em um. Menos solicitações HTTP significam tempos de carga mais rápidos. No entanto, se o CSS crítico for necessário imediatamente e o CSS não crítico puder ser carregado posteriormente, considere dividi-los estrategicamente.

• Adote uma convenção de nomenclatura. Nomeação estruturada como BEM Ajuda a evitar conflitos e redundância e torna seu CSS mais legível e mais fácil de otimizar.

CSS mais enxuto

Comentar estrategicamente. Os comentários são úteis para clareza, mas comentários excessivos ou desatualizados podem desordenar seus arquivos. Mantenha -os relevantes e atualize -os à medida que seu código evolui.

/* This is a comment */

Design responsivo. As consultas de mídia CSS adaptam o conteúdo à resolução do dispositivo dos usuários (tamanho). No entanto, em vez de escrever várias consultas semelhantes, considere um Abordagem Mobile-primeiro onde você define os estilos de base e adiciona modificações para telas maiores.

/* Base styles for mobile devices */
.container {
padding: 10px;
font-size: 16px;
background-color: #f0f0f0;
}

/* Styles for tablets and larger screens */
@media (min-width: 768px) {
.container {
padding: 20px;
font-size: 18px;
background-color: #e0e0e0;
}
}

/* Styles for desktops */
@media (min-width: 769px) {
.container {
padding: 30px;
font-size: 20px;
background-color: #d0d0d0;
}
}

Acessando arquivos CSS

Os comerciantes geralmente podem acessar arquivos CSS em plataformas de comércio eletrônico através do painel de controle ou de um cliente FTP.

Shopify. Modificar CSS logando no painel de administrador, navegando para Loja online> temase clicando Ações> Editar código no seu tema ativo. No Editor de códigoEncontre os arquivos CSS na pasta “ativos” (por exemplo, component-discount.css, tema.css). Edite os arquivos e salve suas alterações para vê -las aplicadas na sua loja.

Prestashop Os temas normalmente armazenam arquivos CSS no diretório de temas (geralmente em /temas/your_theme/Assets/CSS). Acesse e modifique esses arquivos usando um cliente FTP ou através do editor de temas interno no back office PrestaShop (se acessível). Depois de fazer alterações, lembre -se de limpar o cache para que as atualizações sejam refletidas no site ao vivo.

Magento 2. CSS faz parte da estrutura do seu tema e geralmente é encontrado no diretório app/design/frontend/(fornecedor)/(tema)/web/css (ou como .menos arquivos abaixo Web/CSS/fonte) em módulos. É melhor criar um tema filho ou substituir os arquivos CSS do tema padrão, em vez de editar diretamente os arquivos do núcleo. Depois de fazer suas alterações, execute o comando estático de implantação de conteúdo (Configuração do bin/magento: Conteúdo estático: implantação) e lave o cache para aplicar as atualizações. Observe que a implantação de conteúdo estático colocará temporariamente o site no modo de manutenção.

NetSuite SuiveteCommerce Normalmente, armazena arquivos CSS na pasta ativos do tema. Modifique -os através do seu ambiente de desenvolvimento local ou do gabinete de arquivos NetSuite. Se você está usando Sass ou outro pré -processador, faça alterações nos arquivos de origem, compile -os e implante os ativos atualizados no seu site.

WooCommerce’s Os arquivos CSS normalmente residem no tema do WordPress ativo. Edite o seu tema style.css Arquive diretamente ou, de preferência, crie um tema filho para substituir os estilos padrão sem afetar as atualizações futuras. Como alternativa, adicione CSS personalizado através do personalizador do WordPress em Aparência> Personalizar> CSS adicionais.

Para outras plataformas, acesse a documentação e pesquise “gerenciamento de ativos CSS” ou algo semelhante. Na minha experiência, toda plataforma fornece orientações sobre a implementação ou alteração de CSS.

Saber mais