Como construir um sistema de design eficiente para seu projeto Web

    Quando vou trabalhar em qualquer projeto HTML, evito trabalhar diretamente no arquivo CSS. Isso por diversos motivos, muitas decisões de regras em em cima de fundamentos reais, que são decisões que vem de algum lugar. Desta forma, escrever os arquivos CSS é como escrever diretamente um Assembly de um programa. Isso só diz o quanto você entende da arquitetura do sistema. O problema é que, se a arquitetura muda, toda as decisões de como deve ser escrito o CSS mudam também. Para resolver este problema, existem os processadores de CSS, alguns deles são: Less e o Sass e o Scss. Todos frameworks modernos atualmente possuem suporte para pelo menos um processador de CSS.  Sendo os seus System Designs a maioria sendo escrito em alguns deles. 

    Antigamente era comum os processadores de CSS virem embutidos com o fonte que o escreve. Tornando de uso estrito para programadores. Eu venho vendo uma abordem em uso de libs mais independentes e sistemas escritos quase que apenas com arquivos de estilos. Mas é comum alguns arquivos de configuração ou mesmo algoritmos estarem escritos em outra linguagem de suporte ao desenvolvedor. 

    Esses pré-processadores de CSS não são coisa nova, mas pretendo escrever um pouco aqui sobre algumas abordagens que podemos fazer com seu uso para garantir uma certa padronização na customização de nossos sistemas, sites e softwares que possuem interface gráfica renderizada com uso de folhas de estilos.

    As folhas de estilos são uma boa decisão de uso por parte do sistema de renderização de uma interface gráfica. Ela permite a alteração visual de um sistema por uso de seletores de elementos visuais. Permitindo a manipulação da interface sem alteração do código fonte. Existem sim brechas que permitem execução arbitrária de ECMAScript através da camada CSS. E isso é um problema. Sistemas antigos web costumavam abrir o CSS para edição do usuário. Até o momento que sistemas inteiros começaram a ser hackeados através desta camada. Com isso, todos sistemas desabilitaram qualquer possibilidade de execução direta, e os que permitem, verificam cada um de alguma forma se este CSS é seguro. Porém, isso é um esforço complexo. Para simplificar a customização de um sistema, talvez uma alternativa seja os processadores de CSS que permitem com  que poucos parâmetros customizem completamente a plataforma em desenvolvimento, sem riscos de execução indevida de códigos dentro da plataforma.

    Então como podemos iniciar no desenvolvimento de uma novo projeto? Primeiramente precisamos escolher qual tecnologia utilizar. Para isso pesquise quais alternativas existem e escolha a que melhor se adapte ao seu projeto em questão. Para tomar como exemplo, vou escolher o SCSS, acho mais agradável, apesar de exigir um editor mais complexo devido aos brackets e o pontos-e-virgulas acho mais organizado, pois é muito comum endentações se perderem pois um prefere 2 espaços, outro 4, outro 8, em meio aos commits, essas endentações criam interpretações erradas quando esses são misturados, e a ideia do processamento de CSSé permitir agrupar regras e seletores a reduzir a escrita. Então Sass é muito bom quando você vai escrever tudo de um mesmo editor. Na prática não é isso que acontece. É muito comum você precisar acessar seu código de um segundo terminal, e mesmo com 1 editor é possível cair neste erro.

Com isso, existe um pequeno sacrifício de 256MB de ram para ter um editor de texto que trabalhe corretamente com brackets e pontos e virgulas e endentação; Assim, apenas não passaremos por este problema aqui.

    Bom, primeiramente, defina as regras que escrevem seu layout, tipografia e cores do seu sistema. Cada regra deve ser descrita como descrita na realidade da ideia do projeto. Se a margem é 1/4 de alguma coisa, então use estas regras. Os processadores devem dispor de funções que permitem calcular e chegar nos valores finais de cada elemento visual na sua forma final do arquivo CSS. Outra ideia importante é realizar os cálculos de cor junto ao processador. Devemos ter as cores de base, e em cima dela devem ser realizados os cálculos para resultarmos nas cores finais do CSS. Assim, permitindo uma melhor customização dos elementos. 

    Temos também os recursos modernos do CSS a disposição para resolver estes mesmo problemas. Os processadores não tem apenas o objetivo de customizar os elementos por parte dos Clientes, mas também no re-uso e criação de Componentes visuais para os elementos HTML. Então o próprio CSS no HTML5 vai nos trazer outras formas de customizarmos os estilos por parte dos clientes. Uma delas é o inscersão da variável no CSS. Sim, hoje já podemos contar com variáveis no CSS que permitem parametrizar cores e até decidir usar uma variável para determinada propriedade. Assim, permitindo facilmente criar um painel que permita o cliente customizar seu sistema sem risco à plataforma em questão. Porém, seu uso é bem limitado, mas resolve de fato o problema de forma simples. 

 // TODO: este artigo ainda está sendo escrito ... esta é uma prévia