Isolamento de CSS

- Isolamento básico: https://codepen.io/LFeh/pen/NMwmWK
- RSCSS: https://codepen.io/LFeh/pen/qYVwEp
- BEM: https://codepen.io/LFeh/pen/rvYbVy
- Styled Components: https://codepen.io/LFeh/pen/WJdegz
- Shadow DOM: https://codepen.io/LFeh/pen/LmeYEZ

Transcript

2. Eu?
3. E também Escrevo uns artigos: felipefialho.com/blog Dou umas filosofadas: medium.com/@lfeh Faço uns open-sources: github.com/lfeh
4. E trabalho no cubo.network/jobs
5. Cascading Style Sheets A cascata é amor...
6. Cascading Style Sheets A cascata também é terror...
7. E ai...
8. Onde estavamos?
9. Isolamento básico • Todos os .titles dentro do header serão afetados • Se estilizar diretamente as tags, o isolamento é ainda menor
10. RSCSS • Apenas os .titles filhos diretos do header serão afetados • Diminui a possibilidade de colisão • Mas se o .title não for mais filho direto, precisa adicionar outro elemento, tipo: .header > .container > .title … e ai a performance chora
11. BEM • Garante isolamento total e desacoplamento entre semântica e estilo • Bom para performance • Nome das classes no HTML tende a ficar enorme, tipo <h1 class=”header__title header__title--hightlight”>
12. Onde estamos?
13. CSS Modules • Garante isolamento total e desacoplamento entre semântica e estilo • Bom para performance • Depende de aplicações JavaScript baseadas em componentes para funcionar.
14. Styled Components • Garante isolamento total • Integração incrível entre JavaScript e CSS • CSS deixa de ser CSS e vira praticamente outra linguagem, com metodologia própria
15. Component Styles • Garante isolamento total • Preparado para usar o Shadow DOM nativo • Só funciona com Angular
16. E para onde vamos?
17. Shadow DOM • Garante isolamento total • Sem necessidade de libs externas • Faz parte do ainda distante mundo dos web components • Atualmente, só o Chrome suporta
18. O suporte ainda é péssimo :(
19. Obrigado! @LFeh