O documento discute como o CSS evoluiu desde seus primórdios até os dias atuais, passando de um código complexo e cheio de "hacks" para contornar limitações dos navegadores para uma linguagem mais poderosa e suportada nativamente pelos browsers modernos. Também aborda o uso e desafios dos frameworks CSS, enfatizando a importância de aprender CSS puro para dominar suas funcionalidades.

1. CSS - pare de só usarCSS - pare de só usar
frameworks e atualize-frameworks e atualize-
sese
Uma leve discussUma leve discussão sobre o passado e oão sobre o passado e o
presente do CSSpresente do CSS

2. Julio Vedovatto
30 anos
Graduado em Tecnologia em Informação pela
UFPR
Pós em Design de Interação
Web Developer
Apaixonado pela web e surfar nela desde seu
primeiro computador com acesso a Internet, em
1998
http://linkedin.com/in/vdvtt
http://github.com/juliovedovatto
http://www.konnng.com

3. 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.

5. MSN.com em 2003 #HALP

6. Globo.com em 2003 #HALP

7. 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

8. • 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.

9. Vamos pular um pouco no tempo

10. 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

11. Problemas de antigamente
Caso 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 **/ }

12. Problemas de antigamente
Caso 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; }

13. Problemas de antigamente
Caso 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%; }

14. 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, ...)

15. CSS Frameworks
Um 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 similar
O 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)

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

17. 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

18. 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

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

20. 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.

21. 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."

22. 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)

23. DONE!
Momento reflexões internas, auto descobrimento
e leve discussão.
"The road to enlightenment”