```
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.
#### Exemplo[](https://luca-copilot.github.io/doc-public/docs/guias-avancados/boas-praticas-css#exemplo-2)
```css
.component-name > div {
width: 100%;
/* outros estilos */
}
.menu-left {
width: 100%;
/* outros estilos */
}
```
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.
```css
#page-type-name > .component-name {
/* estilos específicos */
}
#page-type-service > .menu-left {
color: white;
background-color: black;
}
```
{% hint style="danger" %}
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.
{% endhint %}
## Use rem ao Invés de px[](https://luca-copilot.github.io/doc-public/docs/guias-avancados/boas-praticas-css#use-rem-ao-inv%C3%A9s-de-px)
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.
#### Exemplo[](https://luca-copilot.github.io/doc-public/docs/guias-avancados/boas-praticas-css#exemplo-3)
```
💡 300px = 300/16 = 18.75rem
```
## Suporte para Mobile[](https://luca-copilot.github.io/doc-public/docs/guias-avancados/boas-praticas-css#suporte-para-mobile)
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.
#### Exemplo[](https://luca-copilot.github.io/doc-public/docs/guias-avancados/boas-praticas-css#exemplo-4)
```css
/**
* Products
*/
.products-list-variant > div h3 {
color: white;
}
@media (min-width: 768px) {
/**
* Products
*/
.products-list-variant > div h3 {
color: black;
}
}
```
## Sobrescreva Elementos Gerais Globais Apenas Quando Necessário[](https://luca-copilot.github.io/doc-public/docs/guias-avancados/boas-praticas-css#sobrescreva-elementos-gerais-globais-apenas-quando-necess%C3%A1rio)
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.
## Faça Uso Correto dos Seletores[](https://luca-copilot.github.io/doc-public/docs/guias-avancados/boas-praticas-css#fa%C3%A7a-uso-correto-dos-seletores)
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.
### Exemplo Ruim 👎
```css
#shopify-section-template--20019652100413__23641507-e331-498c-964e-5824112576ec > div > div.wrapper.flex.items-end.justify-between > div.flex-1.text-gray-700 > h3 {
text-transform: uppercase;
}
```
### Exemplo Bom 👍
```css
.products-list-variant > div h3 {
text-transform: uppercase;
}
```
## Use Comentários para os Elementos[](https://luca-copilot.github.io/doc-public/docs/guias-avancados/boas-praticas-css#use-coment%C3%A1rios-para-os-elementos)
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.
### Exemplo Ruim 👎
```css
.products-list-variant > div h3 {
text-transform: uppercase;
}
/* outros estilos */
.footer-default-variant form#contact_form {
gap: 0;
}
/* outros estilos */
```
### Exemplo Bom 👍
```css
/**
* Products
*/
.products-list-variant > div h3 {
text-transform: uppercase;
}
/* outros estilos */
/**
* Footer
*/
.footer-default-variant form#contact_form {
gap: 0;
}
/* outros estilos */
```
## Evite Redundância[](https://luca-copilot.github.io/doc-public/docs/guias-avancados/boas-praticas-css#evite-redund%C3%A2ncia)
Sempre que detectar um padrão de estilo se repetindo, faça o reuso dos mesmos agrupando os seus elementos.
### Exemplo Ruim 👎
```css
.header-short > .relative {
height: 22.5rem;
}
.header-short > .relative img {
height: 22.5rem;
}
.header-short > .relative > div:nth-of-type(1) {
height: 22.5rem;
}
```
### Exemplo Bom 👍
```css
/**
* Header Short
*/
.header-short > .relative,
.header-short > .relative img,
.header-short > .relative > div:nth-of-type(1) {
height: 22.5rem;
}
```
Isso permite estilos mais reaproveitáveis e consequentemente mais leves para serem carregados na loja.
{% hint style="info" %}
☝ Isso não é overengineering! O seu CSS pode crescer rapidamente e afetar a performance do site.
{% endhint %}
## Use !important Apenas Quando Necessário[](https://luca-copilot.github.io/doc-public/docs/guias-avancados/boas-praticas-css#use-important-apenas-quando-necess%C3%A1rio)
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 😏
## Prefira Usar Propriedades Declarativas ao Invés de Genéricas[](https://luca-copilot.github.io/doc-public/docs/guias-avancados/boas-praticas-css#prefira-usar-propriedades-declarativas-ao-inv%C3%A9s-de-gen%C3%A9ricas)
Isso é importante para não sobrescrever propriedades que não precisam ou não deveriam ser sobrescritas.
### Exemplo Ruim 👎
```css
background: white;
background: cover;
background: url();
background: no-repeat;
```
### Exemplo Bom 👍
```css
background-color: white;
background-image: url();
background-size: cover;
background-repeat: no-repeat;
```
Este é um documento vivo e ainda está em construção. Fique à vontade para tirar dúvidas e fazer sugestões sempre que houver necessidade.
| Breakpoint Prefix | Minimum Width | CSS |
|---|---|---|
| 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) { ... } |