CSS - pare de só CSS - pare de só usar frameworks e usar frameworks e

atualize-seatualize-seUma leve discussUma leve discussão sobre o passado e o ão sobre o passado e o

presente do CSSpresente do CSS

Julio Vedovatto

30 anosGraduado em Tecnologia em Informação pela UFPRPós em Design de InteraçãoWeb Developer

Apaixonado pela web e surfar nela desde seu primeiro computador com acesso a Internet, em 1998

http://linkedin.com/in/vdvtthttp://github.com/juliovedovattohttp://www.konnng.com

CSS Zen GardenCSS Zen Garden• Criado em 2003.• Era um site que mostrava o que era possível fazer com CSS.• Com um esqueleto HTML padrão, você só podia modificar a folha de

estilo.• Centenas de contribuições ao longo dos anos.• CSS2 + Hacks para se alcançar o objetivo.• IE6 SP1, Safari, Opera e Netscape é o que se tinha na época para

navegar.

MSN.com em 2003 #HALP

Globo.com em 2003 #HALP

Primeira versão em 2008 Primeira versão em 2004

Os 2 foram de grande importância para evolução do CSS, pois prestaram atenção na W3C

• Isso foi só uma introdução para vocês lembrarem/entenderem como era o contexto da Web a mais de 1 década atrás.

• A dificuldade que era manter um site compatível com diversos navegadores.

• Você se via obrigado a saber de diversas técnicas, macetes, hacks, da construção do HTML.

• Ao construir a folha de estilo, você tinha que ir imaginando situações, como contornar, como iria se comportar em navegadores.

• Tinha que resolver algumas questões com Javascript. • Não se tinha Stack Overflow para procurar por ajuda e copiar

soluções.• Início de conversas sobre "tableless", sugerido pela W3C.

Vamos pular um pouco no tempo

CSS - dias atuais• Percebam a quantidade de ferramentas hoje em dia disponíveis para

se construir um site rapidamente. • O pessoal conseguiu trazer a "engenharia" para o frontend. • Lidamos hoje com navegadores que tiram notas altas no Acid Test.• Temos boas chances de ficar pixel perfect nos principais browsers do

Mercado.• IE morreu e virou Edge, mais compat✝ ível com CSS.• Temos hoje o CSS3 quase que totalmente implementado.• Grid Systems <3

Problemas de antigamenteCaso 1: menu dropdown multinível – o pesadelo que era montar um.

.menu ul li { /** mágica vai aqui **/ }

Não se tinha suporte antigamente para descendente direto “>”

Atualmente .menu ul > li { /** mágica vai aqui **/ }

Problemas de antigamenteCaso 2: Opacidade – várias linhas para a mesma coisa.transparent { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5;}

Atualmente – uma instrução apenas

.transparent { opacity: .5; }

Problemas de antigamenteCaso 3: animações – uso de javascript obrigatório

$('.menu a').hover(function () { $(this).stop().animate({ fontSize: '130%' }, 500) }, function() { $(this).stop().animate({ fontSize: '100%' }) })

Atualmente

.menu a { transition: font .5s ease; }

.menu a:hover { font-size: 120%; }

Coisas legais do CSS atualmente• CSS selectors• display: inline-block;• Flexbox <3• CSS Animations• CSS Columns• 3D Transforms• box-sizing: border-box;• Child Selectors • CSS Masks

• calc();• ::before / ::after• Gradients / Multiple Backgrounds• Webfonts• Media Queries – responsividade!!!• data-uri:• @supports• CSS Filters• Vendor attributes sendo cada vez

mais abandonados (-webkit, -moz, -o, ...)

CSS FrameworksUm framework é um conjunto padronizado de conceitos, práticas e critérios para lidar com um tipo comum de problema, que pode ser usado como uma referência para nos ajudar a abordar e resolver novos problemas de natureza similarO objetivo de um framework é fornecer uma estrutura comum para que os devs não tenham que ficar fazendo coisas do zero e podem reutilizar o código depois em outras situações.

Um Framework CSS consiste em um pacote, composto de uma estrutura de arquivos e pastas de código padronizado

(HTML, CSS, documentos JS, etc)

CSS – Frameworks: os mais topzeira• Bootstrap• Materialize CSS• Foundation• Angular Material• Semantic-UI• Susy• Gumby• Pure• BananaCSS

CSS Frameworks - Prós• Eficiência – acelera o tempo de desenvolvimento• Segurança – cuida de questões como "cross browser"• Custo – com o fator eficiência, se reduz tempo de desenvolvimento• Suporte – grande comunidade para dar assistência• Ajuda e ter bons hábitos de web design• Lhe dá layouts limpos e simétricos

CSS Frameworks - Contras• Você aprende o framework, não sua “linguagem”• Limitações• Código é público• A uma restrição de liberdade de código• Adiciona código extra• Força a usar a sua semântica• Você pode potencialmente desperdiçar tempo• Você acaba não tendo noção de como algumas coisas

foram feitas e como funcionam

Mas por que eu devo parar de usá-los? WTF!?

Calma, não é bem assim…• Título da talk foi uma brincadeira, para chamar atenção.• Intenção é fomentar a sua curiosidade de conhecer as nuances do

CSS, saber como foi o passado e como se comportar em cada situação.• Infelizmente, ainda temos navegadores mais antigos sendo usados, é

necessário aprender o crossbrowser.• Antes de pensar em Framework / SASS / LESS / Stylus – aprender a se

"virar na unha”• Ferramentas atuais são maravilindas, mas não vão cobrir todos os

casos. Além de limitar sua criatividade pro jeito deles.

Calma, não é bem assim…• Não estou aqui para criticas, amo e uso muito ferramentas atuais de

CSS. Bootstrap salva vidas para coisas rápidas e bobas.• CSS Zen Garden foi um exemplo para mostrar, que nos "primórdios",

o que se dava para fazer só com uma folha de estilo e muitos hacks, era ”criativo” o código delas.• É necessário para ser um bom ”frontender” ter esse conhecimento

íntimo de CSS, saber seu comportamento e o que é possível fazer.• Saber que algumas coisas não será necessário toda estrutura pra

resolver o problema. Saber usar o “Bom Senso F.C."

Onde ver mais coisas sobre CSS• CSS Tricks - http://css-tricks.com • A List Apart - http://alistapart.com• Smashing Maganize - http://smashingmagazine.com • CSS3.info - http://css3.info/• Can I use - http://caniuse.com • Livros do Maujor <3 (e o seu site)

DONE!Momento reflexões internas, auto descobrimento

e leve discussão.

"The road to enlightenment”