Get best of the week

Desenvolvedores de CSS - por que o mundo precisa deles?

A versão em áudio em russo (Yandex.Music) / iTunes

Nos últimos dez anos, o CSS cresceu exponencialmente ao adicionar mais e mais recursos, tornando-se gradualmente bastante complicado e confuso. O CSS de nossos dias é muito diferente do CSS da década 2001-2010.

Antes de começar a explicar por que o mundo precisa de desenvolvedores de CSS, precisamos voltar e examinar a história do CSS.

Capa de pato amarelo

Disclaimer:
.
 .
 , , .


CSS


Na década de 2001 a 2010, quando a Internet estava conquistando o mundo, o CSS parou. O Internet Explorer 6-7-8 foi o principal navegador. A Microsoft naquela época não prestava muita atenção às especificações de CSS, não mostrava nenhum interesse em adicionar novos recursos a ela. O CSS permaneceu na versão 2.1 por todos esses anos.

Desde 2007, os navegadores modernos Firefox e Chrome começaram a aparecer. Mesmo nesse momento, ainda precisávamos oferecer suporte ao Internet Explorer. Isso atrasou o nosso desenvolvimento. Como principal navegador da época, o IE instalou uma velocidade de desenvolvimento de CSS quase inexistente e quase nula. Era a "idade das trevas" da Internet.

Dark CSS CSS illustration

Eventos fundamentais da nova era do CSS


Eu era desenvolvedor na época e, portanto, vi dois eventos importantes que mudaram o mundo do CSS e da Web como um todo:

  1. O início da era dos smartphones (29 de junho de 2007) - tudo começou com o lançamento do primeiro iPhone. Esta versão exigia o suporte de novos recursos de CSS que se encaixariam na nova categoria de dispositivos da web.
  2. Versão do navegador Chrome (2 de setembro de 2008) - O Chrome era um novo navegador iniciado como um aplicativo de desktop. Até então, o Internet Explorer era o principal governante da Internet e ditava seu desenvolvimento.

Navegador Chrome e Steve Jobs com iPhone na conferência de 2007, colagem

Por que os desenvolvedores de front-end lidam com CSS e JavaScript


Naquela época, a idéia de que os desenvolvedores do Frontend deveriam gerenciar todos os recursos do cliente era bastante comum. Depois, havia apenas algumas regras CSS. O CSS agora se expandiu e essa visão não é mais relevante.

CSS 3, HTML 5 e JavaScript: uma nova era


É difícil dizer exatamente quando o CSS 3 surgiu, desde que foi desenvolvido desde 1999. O verdadeiro apoio na Internet começou em 2011. Chrome e Firefox estavam aumentando sua participação de mercado na época. Os smartphones se tornaram muito populares. Com seus próprios navegadores, todos começaram a oferecer suporte aos primeiros novos recursos do CSS 3.

Essas alterações reduziram a popularidade do Internet Explorer. Naquela época, ainda era um navegador significativo, no entanto, a Microsoft percebeu que deveria começar a prestar atenção às especificações e ao desenvolvimento de CSS. Eles lançaram o Internet Explorer 9.

Novo CSS


O CSS 3 agora tem 10 anos, por que não o CSS 4? O CSS 3, ao contrário do CSS 2.1, é um padrão aberto. Graças a isso, é constantemente atualizado. Não há necessidade de nomear a nova versão “CSS 4”, pois o CSS 3 é um desenvolvimento contínuo, uma versão para todos os tempos.
imagem

Desde 2011, todas as atualizações do navegador incluem novos recursos de CSS. Nos últimos anos, a maioria dos navegadores - Chrome, Firefox, Opera, Edge - é atualizada quase todo mês (o Safari é atualizado principalmente uma vez por ano). Essa frequência significa que obtemos novos recursos de CSS quase assim que aparecem.

Novidades do CSS nos últimos 10 anos


Nos últimos dez anos, muitas novas especificações apareceram para diferentes tipos
de módulos CSS, por exemplo:

  1. Layout — , Flexbox, CSS-, , writing mode ;
  2. Typography — , font-variant, line-breaking;
  3. Shapes & Graphics — , , blend-mode, clip-path, shapes ..
  4. Animations & Transforms — CSS/SVG , transitions, transforms, will-change.
  5. Units — viewport vw/vh/vmin/vmax, rem, calc(), contain, fit-content, min-content, max-content;
  6. CSS preprocessor — sass, less, stylus, postCSS
  7. — SVG, @support, CSS .

Você pode perceber que muitos novos recursos são de responsabilidade do desenvolvedor de front-end. Isso significa que ele deve ganhar experiência em todos eles. Mas essa nem é uma lista completa.

Na vida real, é quase impossível um desenvolvedor web ter um nível básico de entendimento de todos esses novos recursos. Além disso, o JavaScript foi desenvolvido em paralelo. E ele desenvolveu, talvez até mais que CSS. Isso torna ainda mais difícil para uma pessoa acompanhar todos os desenvolvimentos.

Grande erro na indústria da web


Essa situação, na qual os desenvolvedores de front-end não conseguiram lidar com a nova complexidade do CSS, criou um novo movimento chamado "Como não aprender CSS".
Um novo movimento chamado "Não aprenda CSS"

Os primeiros frameworks CSS


Este erro começou com estruturas como o Bootstrap e o Foundation. O primeiro lançamento de cada um deles ocorreu em 2011. Essa data em particular não é acidental - esses foram os primeiros anos de CSS3, design responsivo, sites para celular e tipografia em vários navegadores.

Nunca tentei me aprofundar no Bootstrap, pois nunca gostei de sua convenção de nomenclatura CSS semântica. Ajudando outros desenvolvedores da web na comunidade , percebi rapidamente que o Bootstrap é adequado apenas para os casos em que você o utiliza como está, sem tentar personalizá-lo.

Captura de tela da marcação de inicialização
Bootstrap HTML - a maioria das classes não é semântica.

Angular 2: a primeira estrutura compatível com JavaScript


O novo Angular foi o primeiro a introduzir estilos encapsulados. Era uma maneira de livrar o desenvolvedor web inexperiente da necessidade de entender a cascata de CSS. Usando esse método, você pode criar estilos globais e ainda ter estilos locais para cada componente.

De todas as várias idéias de desenvolvimento, a ideia de estilos encapsulados é, na minha opinião, boa porque você ainda pode criar estilos globais e estilos encapsulados para componentes. Além disso, ainda temos uma separação de preocupações com CSS / SASS, HTML e JavaScript. Podemos desfrutar de uma maneira simples de baixar apenas os estilos necessários.

Captura de tela da estrutura de arquivos em um projeto com Angular

Reagir - a morte da semântica!


O React leva essa idéia adiante e grava todo o HTML e CSS dentro do JavaSscript. O objetivo de criar estilos reutilizáveis ​​morreu com o React. Ele gera automaticamente nomes de classe CSS; portanto, o código se torna ilegível e impossível de entender, devido aos nomes das classes CSS e ao HTML não semântico. Do meu ponto de vista, isso é semelhante à forma como o CSS e o HTML foram escritos no início da Internet, quando não importava a aparência do CSS ou HTML enquanto eles estavam trabalhando.

Imagem da reação da marcação de código
React - nomes de classes CSS ilegíveis

Por que é tão ruim? Quando você tem um problema de CSS real e um desenvolvedor de front-end regular não pode resolvê-lo e precisa de um desenvolvedor de CSS experiente, o código React confuso atrapalha. Sim, ambos os desenvolvedores da Web podem resolver isso juntos, mas leva tempo de dois desenvolvedores da Web experientes.

Acorde!


Os desenvolvedores de front-end não arrastam CSS! Alguém tem que dizer em voz alta! Sim, eu sei que isso é uma generalização grosseira e, portanto, não é 100% correta, mas não estou tentando ser 100% correta.
Antes de continuar, você deve saber um pouco mais sobre mim.

Galo no fundo do sol nascente, fotografia
Acorde - os desenvolvedores de front-end não usam CSS!

Quem sou eu


Comecei como desenvolvedor frontend no início de 2007.
No início de 2012, eu parei quase completamente de escrever JavaScript, o principal motivo era que eu amava muito o CSS e o JavaScript era muito menor.

De 2012 até o presente, como me concentrei apenas em CSS, desenvolvi uma vantagem nessa área. Ao longo dos anos, escrevi muitos artigos sobre CSS , fundei a comunidade local de CSS com 5.000 membros e mantive inúmeras conversas em reuniões, seminários e conferências.

Estou com um microfone em uma conferência, fotografo
Falo no ConFrontJS 2019 em Varsóvia, Polônia.Por

que estou lhe dizendo tudo isso?Porque ainda sou uma espécie de unicórnio no meu país e na indústria da web. Sim, sou muito obrigado, mas há um grande, mas! Embora isso funcione para mim porque eu sou bem conhecido no setor de web do meu país, é difícil para outros se tornarem o mesmo porque o setor de web ainda está tentando manter o "nome antigo do desenvolvedor do Frontend" (que significa tentar escrever JavaScript e CSS de primeira classe) .

No meu país, conheço os melhores desenvolvedores de Frontend. Como estou interessado em entender o setor da web, sempre pergunto aos principais talentos do Frontend se eles pensam que são bons em CSS. A resposta deles continua me surpreendendo - a maioria deles se sente insegura com o CSS e sempre se surpreende com desenvolvedores como eu, que adoram CSS.

O setor da Web precisa mudar


Apesar de funcionar até 2010, não pode continuar em 2020. A indústria da web mudou e chegou a hora de amadurecer e abandonar os primeiros cargos na indústria da web e passar para um novo posicionamento.
Posicionamento que atenda às necessidades de nosso tempo. A princípio, grandes empresas. Depois para todos os outros.

Fonte bonita de figuras 2020, ilustração

Qual é o interesse das empresas?


Em 2020, o CSS é uma habilidade importante. Enquanto as empresas estão tentando economizar, elas podem acabar gastando mais. Ao longo dos anos trabalhando como desenvolvedor web, vi como os desenvolvedores gastavam muito tempo com o que um desenvolvedor especializado em CSS poderia resolver em 10 minutos e com código mais produtivo.
Em 2020, o CSS é uma habilidade importante.

O que podem ser novos cargos?


Nos últimos oito anos, mudei de posição várias vezes. Fiz isso para explicar minhas habilidades às pessoas que veem meu perfil do LinkedIn .

No começo eu me chamei de CSS Master (pelo nome da comunidade que fundei - CSS Masters Israel ). Foi divertido ver logo após esse anúncio de trabalho com essa manchete. Percebi que existem empresas que precisam de um desenvolvedor de CSS, mas não sabem como nomeá-lo adequadamente.

Uma fotografia de um pedaço de um formulário de pedido de emprego, uma imagem sem sentido

Mais tarde, mudei o nome da minha postagem várias vezes (UI / CSS - Desenvolvedor / Desenvolvedor de Interface / Engenheiro / Arquiteto / Especialista), tentando ajustar minhas habilidades ao nome do trabalho.

Não seja apenas um desenvolvedor de CSS


Atualmente, temos vários tipos de desenvolvedores especializados na parte visual, como CSS e, por exemplo, SVG. Vou tentar definir esses tipos aqui :

Desenvolvedor CSS - Esse nome é para profissionais de nível médio de CSS. Esses são os desenvolvedores que podem assumir o design e convertê-lo facilmente em CSS.

Arquiteto CSS- Esta categoria é destinada a desenvolvedores, como eu, que, além de criar CSS com eficiência, são especialistas no planejamento da separação de CSS e na criação de uma estrutura de construção complexa. Ao contrário dos desenvolvedores de CSS, os arquitetos de CSS são mais experientes e sabem como dimensionar grandes projetos de maneira inteligente, com desenvolvedores de CSS adicionais trabalhando em sua equipe. Além disso, eles se comunicam com outros desenvolvedores da web, gerentes de projeto e web designers.

Muitos diferentes pato de borracha amarelo apresentando uma variedade de profissões, ilustração
A variedade é maravilhosa!

Desenvolvedor de animações CSS - Atualmente, podemos melhorar a experiência do usuário quase sem esforço, usando animações CSS ou SVG, transformando um bom projeto em um fantástico. Este trabalho pode ser adequado para grandes empresas.

Essas são as necessidades mais comuns para 2020, mas existem outros tipos de desenvolvedores especializados, como:


Pode haver mais - as possibilidades são infinitas!

Finalmente


Neste artigo, procurei conscientizar sobre um assunto que, ao que me parece, ainda não foi abordado. Meu objetivo é colocar a indústria da web nos trilhos.

Além do meu artigo, também existem artigos sobre esse tópico de outros pontos de vista:


No final


Se você gostou deste artigo, ficaria grato se você o compartilhasse com outras pessoas para que essa idéia pudesse aumentar a conscientização no setor da web.

Quem sou eu?


Meu nome é Elad Shechter, sou desenvolvedor Web especializado em arquitetura CSS e HTML. Eu trabalho para o investing.com .

Meu twitter e site .

Estou no fundo do projetor, falando sobre o projeto, fotografia

More articles:


All Articles