```
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.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.luca.global/boas-vindas/luca-tema/primeiros-passos/boas-praticas-para-css-customizado.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
| 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) { ... } |