Boas práticas para CSS customizado
Atualizado
Atualizado
Este documento fornece orientações para personalizar componentes do LUCA usando CSS personalizado em uma loja Shopify. As práticas recomendadas incluem o uso de nomes de classes descritivos, evitar estilos globais excessivos e o uso de seletores específicos do componente. Siga estas práticas para garantir que sua personalização seja consistente e fácil de manter.
Todas as páginas contêm um identificador com o tipo/nome da página em param-case
.
Todas as seções possuem uma classe com o nome do componente no estilo param-case, alguns embutidos dentro de uma section ou no próprio elemento.
Para a customização global de um componente, você pode criar os seus estilos usando apenas a classe do componente seguido de seu elemento sucessor quando o mesmo for embutido dentro de uma section ou diretamente no próprio elemento.
Caso a necessidade seja a customização de um componente em uma página específica, você pode usar o prefixo do id dessa página seguido da classe do elemento.
Nunca use os ids de section gerados pelo Shopify para fazer qualquer tipo de customização. Esses ids podem mudar se o componente for removido e inserido novamente na página, perdendo assim a referência do mesmo e consequentemente de seus estilos.
Use sempre rem para especificar os valores da página. Você pode calcular o rem dividindo o valor em px por 16, que é o valor de fonte base usado pelo Tailwind. Caso você precise mudar o valor do font-size padrão por algum motivo, use esse valor para conversão.
Lembre-se sempre de adicionar as media queries correspondentes para o override de cada componente/propriedade na sua folha de estilos, baseado nas propriedades padrão do Tailwind.
sm
640px
@media (min-width: 640px) { ... }
md
768px
@media (min-width: 768px) { ... }
lg
1024px
@media (min-width: 1024px) { ... }
xl
1280px
@media (min-width: 1280px) { ... }
2xl
1536px
@media (min-width: 1536px) { ... }
Essa regra depende de projeto para projeto, mas tome cuidado ao customizar elementos gerais globais (a, button, h1-h6, tokens, etc) para evitar replicar estilos excessivamente em outras páginas da loja. Em alguns casos, pode ser mais produtivo fazer um override global, mas sempre faça uma análise antes de começar.
Evite copiar e colar o que o browser sugere ao inspecionar o elemento da página, pois ele sempre trará ids gerados pelo Shopify que podem mudar, incluindo classes que tornam a leitura e manutenção do CSS difíceis.
Como boa prática para leitura e manutenção do seu código, é sempre bom escopar a customização dos seus componentes usando comentários em bloco.
Sempre que detectar um padrão de estilo se repetindo, faça o reuso dos mesmos agrupando os seus elementos.
Isso permite estilos mais reaproveitáveis e consequentemente mais leves para serem carregados na loja.
Por padrão, o LUCA adiciona o custom.css já pensando no override padrão de estilos, dessa forma, raramente será necessário o uso de !important.
Afinal, se tudo é important, nada é realmente important 😏
Isso é importante para não sobrescrever propriedades que não precisam ou não deveriam ser sobrescritas.
Este é um documento vivo e ainda está em construção. Fique à vontade para tirar dúvidas e fazer sugestões sempre que houver necessidade.