Em um código CSS, quando um valor em pixels se repete mas para propriedades diferentes, exemplo: 32px para margem, tamanho de fonte, espaçamento interno. No exemplo citado anteriormente, o valor 32px aparece 3 vezes mas para valores diferentes. Neste caso é aconselhável criar uma variável CSS para armazenar o valor 32px? Ou caso eu já tenha uma variável CSS --lacuna-principal que armazene o valor 32px mas que é usada para outra finalidade como column-gap e row-gap, posso usar a variável --lacuna-principal para preencher as propriedades que são preenchidas com valor de 32px mas que não são sobre column-gap ou row-gap?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas
respostas
[Dúvida] Dúvida sobre melhor utilização de variáveis CSS
solução!
Oi, Rafael! Tudo bem?
Ótima pergunta!
Em questões de resultado final, não há problema algum em utilizar uma variável no CSS para uma finalidade que ela não foi criada inicialmente. O único problema com isso é a organização do código.
Imagine fazer uma manutenção de código onde há uma variável chamada --colunm-gap que é usada para margin, border-radius e padding, por exemplo. Por conta da variável ser usada em várias coisas que não fazem sentido ter aquele nome de variável, a pessoa que está fazendo essa manutenção terá bastante dificuldade em saber o que será alterado se mudar o valor daquela variável.
Lembre-se então que é uma boa prática do CSS criar variáveis com finalidades pensadas.
Espero ter ajudado! Fico à disposição.
Abraço!
Caso este post tenha lhe
ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
Valeu meu nobre, então neste caso não irei criar uma variável pois apesar de um valor que volte e meia aparece, sempre surge para uma propriedade diferente, se fosse um valor repetitivo para uma propriedade específica seria ótimo criar uma variável para este valor de 32px, mas não é o caso.
E quanto para nomeação de classes? Tem algum post que pode me ajudar com nomeação de classes CSS? Lembrando que eu uso o padrão BEM, minha dificuldade está em inventar os nomes das classes mesmo.
Olá, Rafael! Tudo certo?
Se eu entendi bem, o seu "problema" agora é uma questão até mais "criativa"do que técnica, certo?
Isso é, na verdade, algo bem pessoal, você pode utilizar muitas formas para nomear classes. Aqui vão algumas dicas para utilizar na hora de dar nome às suas classes:
- 1. Não foque tanto em características específicas do elemento: Ao invés dar à classe dos links das redes sociais o nome de "link-verde", dê-as o nome de "link-redes-sociais", por exemplo (nesse exemplo, o nome ainda é específico dos botões das redes socias, mas caso você mude a cor deles, por exemplo, não precisará mudar o nome da classe);
- 2. Busque nomes autoexplicativos: Ao nomear uma classe, imagine outra pessoa lendo o nome que você deu, ela entenderia minimamente ao que aquela classe se refere? Pense nisso;
- 3. Não abra mão da clareza em prol da criatividade: É muito importante ser criativo, porém, pensando em funcionalidade e eficiência, é melhor ser claro e objetivo do que criativo e extenso;
- 4. Pense no longo prazo: No momento em que estamos desenvolvendo algo às vezes acabamos entrando em um "universo paralelo" e então nós compreendemos exatamente o que nos levou a fazer o que fizemos na estrutura do projeto, mas pense em você abrindo o mesmo código depois de já ter saído da bolha daquele projeto, você saberá o que te levou a nomear aquela classe daquele jeito? Junte os 3 primeiros tópicos e pense nesse quarto para nomear suas classes.
Essas são algumas dicas que podem te ajudar na hora de nomear classes.
Espero que eu tenha te ajudado e que eu não tenha sido muito extenso.
Fico à disposição para ajudar sempre que precisar.
Abraço!