CSS Escrevendo folhas de estilo em alto nível

Hoje meu post será falando sobre as propriedades customizáveis do CSS e sobre o que talvez possa vir para nos ajudar a desenvolver de forma “alto nível”, o bacana desse post é que você verá que o CSS está indo a um nível que pra quem viu sobre a sua evolução vai notar que ele já não é mais aquela simples linguagem onde desenvolvedores escrevia de qualquer jeito e pronto, mas chega de delongas vamos ao nosso assunto.

Um pouco sobre a evolução do CSS

 Antes de começarmos a falar sobre as novidades é importante vermos o que aconteceu na história do CSS para chegar ao que ele é hoje. Quando falamos de CSS talvez muitos veja ele como uma linguagem de fácil aprendizado e que pode ser escrito a qualquer jeito. De fato ele é fácil de aprender, mas não escrever folhas de estilo de qualidade e que possa crescer sem te trazer dores de cabeça não é algo simples. E foi pensando nisso que ao longo da evolução do CSS houve vários estudos (e ainda estão estudando) para deixa-lo de uma forma que você consiga escrever de forma “clean”, quer ver o quanto as coisas mudaram? Olha isso abaixo:

 Pois é amiguinho, este era o site da famosa Microsoft! Imagine o CSS dessa página?! Naqueles tempos o CSS era escrito de uma maneira má planejada. Os desenvolvedores não estudavam a suas folhas de estilo, e no fim das contas o que se podia esperar era um projeto feito completamente do zero não aproveitando muita coisa do anterior. 

Começando a melhora as coisas

 A má pratica do CSS continuou durante muito tempo (ainda continua), mas muitos desenvolvedores começaram a observar que sua maneira de escrever as folhas de estilo precisava ser repensada, o código estava ruim demais e nada podia ser aproveitado. Diante isso várias propriedades foram criadas para ajudar a vida dos desenvolvedores.

“Em que as propriedades ajudaram ajudou? As coisas a meu ver só melhoraram depois da vinda do Sass”.

 As novas propriedades mudaram muita coisa tanto na forma de desenvolvimento das folhas estilos e até mesmo em questões de UI / UX.

“Como assim melhoras UI e UX?”

  Lembra-se daquelas animações em Flash que fazia o site demorar a carregar? Pois hoje podemos fazer muitas daquelas animações usando apenas CSS e o melhor não pesa muita coisa em seu projeto.

Indo mais além

 Como não basta-se as novas propriedades do CSS3 que nos permitiram banir as imagens de plano de fundo (fundos gradientes), bordas arredondadas, apresentar transições e efeitos para criar animações de vários tipos, no ano passado (2017) surgiu as novas propriedades Grid layout a possibilidade de usar variáveis no CSS e o @supports onde permite especificar declarações que dependem do suporte de um navegador para um ou mais recursos CSS específicos.

 Muita coisa! Umas das coisas que podemos destacar nessas novidades e que vai cair no exemplo do uso da API que ire mostrar são as variáveis. Imagine você ter que se lembrar de um nome de uma cor toda hora ou até mesmo nome de fontes, isso se torna chato ao longo do desenvolvimento. Caso ainda não saiba como usar mostrarei abaixo um exemplo.

 Exemplo simples de uso da var:

p{

--destaque: yellow;

color: var(--name);

}

Forma adequada de uso:

:root{

--destaque: yellow; 

}

 p{color: var(--name);}

 Essa maneira é a recomendável, pois, pode acontecer de você querer usar as variáveis de fontes e cores em outros elementos.

Propriedades Personalizadas

 Então chegou a hora de em fim falarmos da nossa grande estrela no assunto a propriedade personalizada.  Para usar as propriedades personalizadas é necessário adotar o uso de prefixos e da função var, abaixo um exemplo de uso dessas propriedades. 

Código JavaScript que registra a propriedade personalizada:
  

<script>

CSS.registerProperty({

    name: "--stop-color",

    syntax: "<color>",

    inherits: false,

    initialValue: "rgba(0,0,0,0)"

});

</script>

Código CSS com as propriedades personalizadas:

<style>

.button {

    --stop-color: red;

    background: linear-gradient(var(--stop-color), black);

    transition: --stop-color 1s;

}

.button:hover {  --stop-color: green;}

</style>

 Caso queira ver a execução desse código, este é o link: https://codepen.io/AndreRodrigues/pen/NMRLLG 

Dicas básicas para escrever uma folha de estilo elegante

•  Não use IDs no CSS! Apesar da leitura se rápida as IDs não são flexíveis. O aconselhável é adotar o uso de classes.
• Como mostrado no exemplo acima coloque os nomes de variáveis dentro do root (:root) para que você possa reaproveitar em outras partes de seu código.
• Separe a estilização de seus objetos. Crie um arquivo chamado main e import às outras folhas de estilo nele, assim ficaram fácil de dar suporte e até mesmo descartar algo no projeto.
•  Versione o arquivo main em seu computador.
•  Estude metodologias como BEM, SMACSS, DRY CSS e Atomic CSS para te ajudar o esqueleto de sua folha de estilo.  

Conclusão

 Para concluir gostaria de dizer que hoje o CSS está nos surpreendendo e vai continuar evoluindo de uma forma que talvez seja possível até chama-lo de linguagem de programação. Se bem que podemos até operações já no CSS usando Calc. Também é importante dizer que escrever uma folha de estilo onde cresça de uma forma “saudável” gasta um tempo de prática, então não tenha medo de praticar as boas práticas com CSS. Espero que tenha gostado desse post, um grande abraço e até próximo J