css moderno. as diversas formas do · 13/06/2019 · smacss oocss bem pré-processadores: sass...
TRANSCRIPT
AS DIVERSAS FORMAS DO
CSS Moderno.Uriell Viana
Antes do CSS:
Só que, alguns dosproblemas da época, acontecem até hoje.
3 Problemaspersistentes do CSS:
Namespace global•Arquivos muitograndes
•
Isolamento•
Mas como esses problemas foram resolvidos?
Metodologiascomumenteutilizadas:
SMACSSGuia & boas práticasEscalável & modular
•
OOCSSEstrutura !== aparênciaPrincípio de responsabilidade única
•
BEMEscopo controladoEstrutura simples e robusta
•
Veio a necessidade de fazer MORE with LESS
Pré-processamento de CSS:
SASS sass-lang.com
•
LESS lesscss.org
•
Stylus stylus-lang.com
•
Com isso veio o hype devariáveis, aninhamento,mixins e funções.
Mas nós acabamos duplicando código
Por exemplo...
HTML estruturado com o BEM:
CSS feito na sintaxe do SASS:
Resultado do SASS anterior:
Então, precisamos reduzir nossos estilos!
Pós-processamento de CSS:
PurgeCSSRemoção de código não utilizado.
•
StylelintAnálise estática de código.Indica potenciais problemas.
•
PostCSSUm mundo de transformações eplugins pra estender seu CSS.
•
Mas então...
Metodologias, pré & pós processadoresresolveram os 3 problemas, certo?
Sim, mas e na prática?
CSS no Vue:
CSS Inline no React:
Trazendo pro lado do React, o que é mais popular?
Exemplo do JSS:
Resultado gerado pelo CSS Modules:
CSS in JS:
O que o CSS Funcional resolve:
Agora abra sua mente, essa proposta é umaquebra de paradigmas.
A proposta do CSS Funcional:
Mas nenhuma é melhor que a outra.
E podem ser combinadas:
Concluindo, qual foi o ganho?
Atacamos 3 dos maioresproblemas em qualqueraplicação;
•
Conhecemos a maioriadas soluções relevantesno mercado pra CSS;
•
Descobrimos algunsprós, contras e pontos deatenção na hora deaplicar.
•
Links:Metodologias:
SMACSS
OOCSS
BEM
Pré-processadores:
SASS
LESS
Stylus
Pós-processadores:
PurgeCSS
Stylelint
PostCSS
Bibliotecas:
CSS Modules
CSS in JS 101
CSS Funcional
•
•
•
•
•
•
•
•
•
•
•
•
Obrigado!in.uriell.devgithub.uriell.devmodern-css.uriell.dev