Olá pessoa 😉
Vou trazer nesse guia, links que vão mostrar como utilizar variáveis css localmente, globalmente e apresentar padrões de desenvolvimento que devem ajudar você na componentização do seu código CSS.
Desde quando tomei conhecimento sobre as custom properties do CSS, fiquei muito animado e com uma baita vontade de usá-las mas fui cauteloso, esperei aderência dos browsers à nova tecnologia. Dá uma olhada nesse link do caniuse e veja se você consegue usar no seu projeto.
Faz um mês mais ou menos que comecei a estudar para implementar essa nova tecnologia no meu trabalho, projetos pessoais e etc... Por conta disso foi gerado bastante link nos meus favoritos e resolvi compartilhar com vocês essa, quem sabe trilha de estudo :-)
PS: Vou falar em alguns momentos sobre pré-processador e caso você ainda não saiba ainda o que é, recomendo começar por aqui
Índice
- Não conheço nada de CSS *custom properties
- Mas tá na hora de usar ?
- Padrões de desenvolvimento
- Mão na massa
- Links complementares
Não conheço nada de CSS *custom properties
Então vou já vou deixar para você esse link da mozilla onde fala sobre a documentação dessa feature.
Mas tá na hora de usar ?
Ao meu ver essa hora já chegou... mas como disse ali em cima, vai depender do suporte do seu projeto.
As custom properties tem coisas bem legais como reatribuição de valores e escopo. No próximo link, o autor vai abordar tudo o que falei de forma resumida. It's Time To Start Using CSS Custom Properties
Padrões de desenvolvimento
Uma coisa que reparei logo no começo dos estudos foi que, a maioria dos artigos que eu encontrava com algum exemplo, as pessoas só estavam utilizado as variáveis dentro de :root, levando assim para um escopo global.
Gente, creio que nem tudo deve ser global, certo ?
E nesse monte de links, acabei encontrando esses três artigos maravilhosos que falam sobre usar ou não usar :root:
- Breaking CSS Custom Properties out of :root Might Be a Good Idea
- A Strategy Guide To CSS Custom Properties
E esse aqui mostra alguns padrões com essa nova abordagem:
Bom, agora acho que chegamos no final da trilha :-)
Mão na massa
Eu criei um exemplo com tudo que aprendi para fixar melhor os conhecimentos e vou compartilhar com você.
Antes de começar quero te passar mais alguns links sobre alguns padrões que utilizei nesse código, caso não conheça eu recomendo dar uma olhada:
Código sem custom properties
Código com custom properties
Vou comentar algumas partes que acho importantes no código e que são alguns conceitos que estão nos links acima.
As variáveis globais
Declarei primeiro como variáveis de pré-processador para ficar mais fácil a manutenção, organização e escopo.
Com a ajuda da interpolação, nós conseguimos trazer uma dinâmica bem intressante para o código:
// GLOBAL VALUES IN SASS VARIABLES
$fontRoboto: "Roboto", sans-serif;
$fontVidaloka: "Vidaloka", serif;
$fontSizeMobile: 18px;
$fontSizeDesktop: 16px;
$colorBlue: #1c1b34;
$mediaMobile: 46.875rem;
:root {
/* Global variables */
--GL-FONT-ROBOTO: #{$fontRoboto}; // Estou usando aqui interpolação
--GL-FONT-VIDALOKA: #{$fontVidaloka};
--GL-FONT-SIZE: #{$fontSizeMobile};
--GL-BLUE: #{$colorBlue};
@media (min-width: $mediaMobile) {
--GL-FONT-SIZE: #{$fontSizeDesktop};
}
font-size: var(--GL-FONT-SIZE);
}
O componente botão
Uma parte bem interessante do código é o do botão. Repara que, por conta das variáveis e dos padrões que estamos utilizando no código, basta declaramos as variáveis e sobrescrevê-las quando necessário para termos o resultado esperado. E olha só, estou declarando as variáveis antes da lógica, assim temos uma boa separação de conceitos e organização do código
/* Buttons */
.btn {
--btn-bgColor: #cccccc;
--btn-bdColor: transparent;
--btn-color: #ffffff;
--btn-transition: all ease-in 150ms;
&:hover {
--btn-bgColor: transparent;
--btn-bdColor: #cccccc;
--btn-color: #cccccc;
--btn-transition: all ease-out 300ms;
}
// .btn--ok = Variação do botão
&--ok {
--btn-bgColor: var(--GL-BLUE);
&:hover {
--btn-bdColor: var(--GL-BLUE);
--btn-color: var(--GL-BLUE);
}
}
// .btn--no = Variação do botão
&--no {
--btn-bgColor: #f51711;
&:hover {
--btn-bdColor: #f51711;
--btn-color: #f51711;
}
}
background-color: var(--btn-bgColor);
border: 0.125rem solid var(--btn-bdColor);
border-radius: 0.313rem;
color: var(--btn-color);
cursor: pointer;
font-size: 1rem;
padding: 0.625rem 1.25rem;
transition: var(--btn-transition);
}
Segue o código final:
Links complementares
Espero que esse guia seja de grande ajuda para você como foi para mim e não deixa de entrar em contato quando tiver alguma dúvida ou sugestão ;-)
Abrcs!
Top comments (1)
muito bom... eu estou a pensar em tentar a aprender!