Você precisa de um Framework CSS?
Leia primeiro e conte-me depois ;)
Sim, eu já tive essa experiência \o/
Eu tive meu primeiro contato com um framework CSS desenvolvendo um trabalho da faculdade, lembro que baixei um template e fiz poucas alterações e tharannnn, toda interface estava prontinha em poucos minutos!!!
Mas não adiantava me pedir pra adicionar uma nova funcionalidade ou solicitar que algum componente se comportasse de uma forma diferente, porque eu não iria saber muito o que fazer, a não ser realizar o trabalho que muitoooos devs “fullstackoverflow” faz, ser caçadora de códigos prontos na net, copiar, colar e phaaa, funcionou, tá lindo —”sabe de nada inocente”…
Motivação
Faz pouco mais de um mês que iniciei como desenvolvedora front-end na Epitrack e mesmo sendo meu primeiro emprego como dev, não tive uma reação muito legal quando me sugeriram criar uma aplicação com Bootstrap, na verdade a galera já tinham sacado que eu tenho “toque” com desorganização de códigos e falta de padronização e só queriam tirar um “sarro” com a minha cara rsrssrr…
Mas essa brincadeira gerou uma discussão agradável, e como eu tenho bastante dificuldade em conseguir expor minhas ideias com palavras falada, então me desafiei a montar uma talk pra explicar não só pra galera do trampo, mas pra um público maior, quais os motivos pelo qual prefiro não usar um framework CSS e de bônus melhorar a habilidade de falar em público!
Eu gostei tanto da reação das pessoas após a palestra, que resolvi escrever sobre o assunto, porque tudo que é legal a gente compartilha ❤
O que é um Framework CSS?
É um conjunto básico de componentes que constituem uma estrutura pré-pronta de elementos para construir uma aplicação web. Na imagem abaixo apresento alguns dos mais populares atualmente.
Por que usar?
Sempre que faço essa pergunta pra alguém as respostas parecem ter sido combinadas:
Porque é mais fácil, mais rápido e também já está tudo pronto, por que perder tempo refazendo, se posso ganhar agilidade e aplicar melhor meus esforços em outras funcionalidades da aplicação?
O que algumas pessoas não conseguem perceber, é que na maioria das vezes, refazendo aquele template que você baixou “prontinho”, inicia-se um processo de várias tentativas pra tentar deixar o layout com a “cara” da sua aplicação, e vão surgindo vários bugs que no final exige um esforço maior do que se fosse recriado o layout do zero…
Agora eu te chamo pra uma conversa particular, onde quero apresentar alguns pontos importantes que você precisa ficar atento quando optar por usar um Framework CSS, lembro que são pontos que provavelmente você possa discordar, mas se dê uma oportunidade de entender melhor a ferramenta que você escolhe para aplicar no seu projeto!
Developer Experience
Provavelmente você como desenvolvedor(a) já pegou vários códigos legado e ficou por horas tentando decifrar o enigma de várias linhas de códigos, e se você tivesse o endereço de quem escreveu aquilo, provavelmente gostaria de lhe fazer uma visita nada agradável rsrsrs!
É isso quando eu falo de developer experience, é aquela sensação, aquele impacto que o desenvolvedor(a) tem quando precisa dar manutenção ou adicionar uma nova funcionalidade em uma aplicação, e se no processo inicial de desenvolvimento essa aplicação não foi bem planejada, o resultado é muito parecido com o descrito no parágrafo anterior \o/
De quem é a responsabilidade?
Agora deixa eu te fazer uma pergunta: Onde você deveria definir o tamanho de uma <DIV>? No HTML ou no CSS? Qual a tecnologia é responsável por definir a largura de um elemento? Seria uma linguagem de marcação ou uma linguagem de estilo? Nãoooo, não precisa pensar muito pra responder, a própria definição das tecnologias já respondem isso pra gente…
É no CSS que definimos o tamanho de um elemento, mas a realidade implementada em Frameworks CSS é outra, isso além de retornar uma experiência não muito agradável para o desenvolvedor(a) ainda polui drasticamente seu HTML!
Me responde outra coisinha: E se você precisar mudar como você implementa a marcação da sua aplicação pra usar um template engine tipo PUG? Já parou pra pensar na manutenção disso? Você tem como garantir o controle e a confiança de que todos os componentes irão se comportar perfeitamente ou melhor que antes?
E se você como desenvolvedor(a) descolado que é, adora seguir padrões de arquitetura e nomenclatura do CSS(como alguns apresentados na imagem abaixo) para estruturar e manter a organização do código na sua aplicação?
Quando você opta por usar um Framework CSS, você tem que seguir as regras e os padrões pré-definidos na documentação deles, limitando sua satisfação como desenvolvedor(a), pra pessoas que tem “toques” como eu, isso é como se enfiasse uma faca no coração!!!
Me faz um favor, me explica o que essa criatura tentou fazer no código abaixo:
“ What the Fuck”, queria de fato entender essa necessidade de ser tão específico para alterar a altura e um elemento.
Você já foi curioso o suficiente pra olhar o código do Framwork CSS que você usa? Se você usa Frameworks CSS com toda certeza já se pegou tentando mudar o comportamento de um elemento e simplesmente não funciona, então inicia-se uma jornada de tentativa e erro, encontrando como alternativa o uso de vários “!important”(Zeus tá vendo você colocando os !important ahe no seu CSS viu!!!), na esperança de fazer seu código “pegar”, e de repente…”pegou”… sim, mas o que você fez que “pegou”? Só sei que é melhor não “mexer” porque tá “pegando”…kkkkkkkkk — Quem nunca????
Resumindo, essa experiência de desenvolvimento não é nada agradável, usar um Framwork CSS repassa a sensação de tornar o processo de aprendizado mais rápido pra quem está iniciando, mas na minha concepção se você está começando, você precisa iniciar pela base, o conhecimento que você precisa ter é no básico de CSS e com certeza aos poucos você vai evoluindo o seu background de conhecimento e chega aquele momento do “ahaaa era só isso”!!!
CSS Layouts
Outro ponto que me incomoda bastante é o uso de breakpoints fixos definido pelos Frameworks CSS, abaixo uma imagem de um Framework CSS apresentando os breakpoints definidos na sua documentação!!
O conteúdo da sua aplicação é quem tem que ser o responsável por informar quando será necessário implementar um breakpoint, alterando o layout para que a aplicação seja responsiva e adaptável à diversos tamanho de dispositivos porém mantendo a entrega do mesmo conteúdo ao usuário.
Tudo bem, eu entendo se você já é acostumado e só consegue implementar o layout se baseando em grids. Mas você já tentou implementar seu próprio grid? Antes de ter pensado “essa mina tá de brincadeira”, você já tentou? Te garanto que é mais fácil do que você imagina, estou falando seriamente, e se não acredita eu vou te passar o caminho das pedras pra você tentar, tudo bem? Mas pelo menos TENTA antes de assumir que é mega impossível e que não tem tempo pra isso, TENTAAA!!! Então segura essas dicas abaixo:
- Grids semânticos x não semânticos: Você precisa conhecer o canal do CSS Cast show, lá tem muitaaa dica descolada sobre CSS e esse vídeo explica direitinho a diferença entre um grid semântico x não semântico e se você é realmente fã de grid, no final você vai se certificar que o que falei acima é realmente verdade e vai querer criar seu próprio grid, porque o vídeo também te ensina como criar um :)
- Aprenda Flexbox: Já tentou ler a especificação do flexbox e se sentiu confuso, precisa de um esclarecimento numa linguagem mais popular? Sugiro você a assistir esse vídeo do Afonso Pacifer onde ele explica e exemplifica todas as propriedades da especificação do flexbox. Esse conhecimento vai aumentar bastante seu background, facilitar e te ajudar no desenvolvimento do seu grid. Além do vídeo é muito importante que você leia a especificação do flexbox da W3C e deixo ainda esse artigo que sempre dou uma olhada quando me pego com alguma dúvida sobre Flexbox.
- Aprenda CSS Grid Layout: Você não quer ficar pra trás né? Te apresento o futuro mais incrível pra desenvolver os layouts de suas aplicações web, mas deixa eu te contar algo mais interessante, é que você não precisa esperar muito, porque esse futuro já é o agora \o/ Nesse artigo eu falo o básico dessa novíssima tecnologia, e no momento em que escrevo esse texto ela já roda em boa parte dos navegadores, aguardando apenas ser liberado a implementação no Edge. Não acredita? veja com seus próprios olhos no caniuse e não deixa de conhecer todo o poder dessa maravilha que tem tudo detalhado na especificação da W3C.
Performance
Lógico que eu não poderia deixar de falar de algo com enorme grau de importância para nossas aplicações \o/
Quero iniciar pontuando se você já parou pra verificar quantos bytes tem os arquivos referente a implementação do layout que vem com o Framework CSS? Sem falar que, boa parte do que você baixou provavelmente não será utilizado. Junto com o arquivo baixado, você ainda terá que adicionar um monte de código com as suas alterações, tornando o arquivo final bem maior, isso irá gerar mais processamento e consequentemente lentidão quando sua aplicação for executada…
Outro ponto muito importante é a ordem de leitura dos navegadores, você sabia que os navegadores para renderizar qualquer informação na tela, ele inicia fazendo a leitura de cima para baixo -> da direita para a esquerda como está apresentado na imagem abaixo?
Sabe o que isso tem de interessante em relação à performance? Senta ahe que vou te explicar:
Tomando como exemplo a imagem acima, o navegador irá iniciar a leitura pelo topo e irá descer, assim que encontrar o primeiro dado ele redireciona a leitura pra a direita, então ele captura a tag <a> e irá ter um esforço de processamento para capturar todas as propriedades <a> que tiver na sua aplicação, após isso ele irá procurar todas as propriedades <a> que são filhas de <li>…
O processo explicado acima é realizado para todas as propriedades declaradas na mesma linha de código e só irá encerrar quando ele encontrar o último elemento, que na verdade é o pai de todos os outros que ele encontrou, e só após todo esse processo, ele poderá aplicar o estilo repassado dentro desse bloco.
Agora pensa comigo, quantas tags <a> tem em uma aplicação? Inúmeras não é mesmo? Esse modelo acima escolhido para estilizar um elemento é o que chamamos de especificidade em CSS, isso porque se torna uma forma muito específica para determinar a implementação de um estilo e esse processo não é nada performático.
Então pensa aqui comigo, você já reparou como seu framework estiliza seus elementos? Só pra constar, aquela imagem do código que apresentei lá em cima, na seção de “dev exp” é de um “template prontinho de um framework CSS”, tentar fazer uma leitura dele como se fosse um navegador, pois é, acho melhor você dá uma olhadinha no código que você está usando do seu “template baixado protinho”, porque pode estar cheio de várias declarações iguais a essa \o/ e acredito ser praticamente impossível você melhorar a performance de um código que você não conhece…
Eu entendi muito bem esse conceito quando assisti uma palestra do Bernard De Luna apresentada na BrazilJS 2012(old but gold) e te convido a dedicar uma pequena parcela do seu precioso tempo e dar atenção as dicas incríveis que estão nesse vídeo, garanto que no final vai rolar aquele BOOMMM como aconteceu comigo ❤
Consistência Visual
E não menos importante é o lance do design da sua aplicação ser praticamente idêntico a inúmeras outras aplicações. E adivinha o porquê? Ahhhh claro, assim como você, inúmeras pessoas também baixaram “o template protinho” kkkkkkkkk.
Então você perde de entregar ao usuário final a importância da identidade visual, esse vídeo do Rafael Rinaldi tem altas dicas sobre esse conceito, acho importantíssimo você dá uma olhada :)
Deixo também de brinde esse maravilhoso artigo sobre style guides para que você passe a pensar com atenção e carinho e tome como prioridade a importância do design da sua aplicação ter uma identidade visual única!
Não fui a única a chegar nessa mesma conclusão
E por me achar meio “diferentona”, a que gosta de causar a discórdia rsrssr eu fui buscar opiniões de pessoas que eu considero e admiro muito, mesmo sem conhecê-las pessoalmente(exceto meu namorado — lógico rsrsr) mas acompanho suas contribuições na comunidade e as tenho como referência. Suas respostas me deixou mais aliviada, pois não foge muito dos conceitos que venho construindo e isso indica que estou no caminho certo \o/
Segue abaixo o depoimento de cada um sobre usar um framework CSS:
- Willian Justen(não é o Justin Bieber mas faz o maior sucesso como dev): Frameworks são interessantes e ajudam muito de início, mas tome cuidado para não virar escravo de Framework e não saber o que está acontecendo por trás. Conhecimento é sempre mais valioso que ferramenta.
- Afonso Pacifer(my love ❤): Quando as pessoas não se propõem a aprender a fazer do jeito certo e usam coisas pre-prontas, além de não aprenderem como nada funciona, tendem a se tornar escravas “da tentativa e erro”, algo que não tem vez quando falamos em ser um profissional de verdade.
- Talita Pagani(programadora unicórnio): Frameworks passam e conceitos ficam. Não compreender a base do CSS é como tentar usar uma parafusadeira sem nem saber o que é um parafuso e pra quê serve ou então tentar desenvolver um programa em uma linguagem qualquer sem saber lógica de programação. CSS é a lógica do estilo das páginas!
- Maurício Samy Silva(dinossauro CSS): Quer usar um framework CSS? Use, mas antes crie um. É pouco provável que você continue querendo.
Conclusão
Comecei a entender melhor todos esses conceitos através desse artigo, ele foi a partida inicial pra que eu iniciasse a pensar de forma diferente sobre Frameworks CSS, então nada mais justo que eu inaugure meu medium falando sobre algo que eu acho super interessante e que possa ajudar outras pessoas a pensar na responsabilidade e consequências ao usar um Framework CSS.
Entendo que tem casos que lidam super bem usar essa tecnologia, quando esse uso é feito da forma correta e consciente, porém a maior parte que usufruem dela, não a fazem da melhor forma possível, então deixei aqui registrado os pontos que acho interessante sobre esse assunto.
Deixa aqui no comentário o que você achou e não fica chateado se falei algo que você não gostou. Se você tem um relacionamento intenso com seu Famework CSS, desapega porque tecnologias vem e vão.
O importante mesmo é você entender qual o problema essa tecnologia resolve, então se ela resolve muito bem seu problema continua teu relacionamento “de boas” ❤
Quer mais?
Bata palmas e compartilha que essa é a adrenalina que me motiva a escrever e compartilhar o que eu for aprendendo de legal nesse incrível mundo WEB ❤
Me segue nas redes sociais pra ficar por dentro das próximas publicações e qualquer dia nos esbarramos por ahe ;)
XOXO
