Desenvolver um padrão não é uma tarefa fácil! Até chegar a uma forma de trabalho que traga resultados leva-se um tempo. O artigo de hoje é sobre um padrão que estou trabalhando chamado GLC (Global and Location Control).
A ideia do GLC já não é de hoje, eu sempre me preguntava sobre como poderia organizar ainda mais as folhas de estilo fazendo com que tivesse uma leitura rápida e evitando repetecos em outras regras. Comecei então a estudar e fazer várias refatorações em meu CSS que até então já havia aplicado um pouco da ideia em outra que não deu muito certo, a ideia se chamava ROC. O ROC utilizava como base o Stylus para gerar folhas de estilo de maneira que fossem cleans, mas infelizmente não deu o resultado esperado devido diversos fatores que não permitiam máxima performance. O tempo foi passando e ainda eu ficava naquela de querer melhorar minhas folhas de estilo, as metodologias existentes por mais eficientes ainda me fazia refletir sobre a organização e desempenho. Por fim comecei a ler diversos livros e artigos em busca de algo que me deixa-se satisfeito.
Durante o período de estudo fiz diversas refatorações em minhas folhas de estilo em busca de uma harmonia. Não fiquei satisfeito em apenas me retornar um certo desempenho, ainda me preocupei com a organização de modo que as regras poderiam ser trabalhadas de uma forma flexível. Com base nessa ideia decidi então dividir dois diretórios um de nome global e outro local. Dentro do diretório global teria uma folha de estilo que onde haverá regras válidas para mais de um objeto, são elas: reset, certas orientações e controles de textos globais, na parte local ficaria apenas tipos regras isoladas ao tipo único de objeto como por exemplo a cor de fundo de um botão e larguras para cada container. Um detalhe importante é que na pasta local diferente da global poderá haver diversas folhas de estilo para facilitar suportes futuros.
Desde o meu início com CSS venho lutado bastante para reduzir a quantidade de linhas nas folhas de estilo e torna-las clean. Levando em conta os últimos anos de estudo com CSS, quando eu me toquei que uma folha de estilo bem trabalhada faz toda uma diferença, eu percebi que meu CSS já não era mais o mesmo. Só para se ter uma ideia, eu preparei um gráfico onde mostra meu processo de evolução com a forma de desenvolver folhas de estilo. Veja abaixo.
Nos anos de 2015, eu não sabia muito sobre a questão organização de regras no CSS e acreditava que se mistura-se ids, classes e mandar estilizar certos objetos diretamente não me prejudicaria em nada. Mas o tempo foi passando e nisso comecei a observar que meu CSS estava me dando dores de cabeça, então decidi estudar a fundo CSS. Em 2016 já conseguia trabalhar um pouco melhor com minhas folhas de estilo trabalhando somente com IDs e classes só que ainda não era o que se podia chamar de um grande pulo. Nos anos de 2017 comprei alguns livros de CSS da Casa do código e com eles conheci algumas metodologias e maneiras de trabalhar com CSS que me fizeram mergulhar ainda mais a fundo, eu acredito que foi aí a minha evolução maior onde eu parei de trabalhar definitivamente com IDs no CSS e passei a usar classes que me permitirão criar regras flexíveis. Poderia parar por aí, mas a sede de melhorar meu código ainda continuava! E como já falei lá em cima no post, eu ficava olhando metodologias e me perguntando "Como posso melhorar ainda mais minhas folhas de estilo?" então eu refatorei boa parte de projetos meus conseguindo deixar sem repetecos de propriedades. Se você pensa que eu parei só nisso se enganou! Ainda trabalhei a fundo a separação de cada folha de estilo para isolarem para o objeto certo que ela iria estilizar. Continuei meus estudos até que hoje finalmente tive um resultado que me levou a criação do padrão que separa regras globais das locais permitindo uma boa organização e uma boa performance. Abaixo um exemplo de como seria a distribuição dos diretórios.
Para concluir este post, eu gostaria de dizer que um código bem escrito e organizado faz toda uma diferença. Aprender CSS e escrever uma folha de estilo qualquer, isso qualquer desenvolvedor faz! Mas desenvolver uma folha de estilo que cresce de maneira saudável e que não precisa refazer tudo do zero isso são poucos que conseguem. No em tanto a partir de hoje irei trabalhar no padrão GLC para que ele possa ajudar a comunidade Front-End. Espero que tenham gostado do post. Até o próximo.
