Sopa de Letrinhas CSS | Alphabet soup CSS

- Lambda Sorocaba #4 (20/04/2019)
- 5º meetup Caelum (27/08/2019)

Transcript

1. Sopa de Letrinhas CSS
2. Juliana Negreiros 2
3. OS PROBLEMAS Por que muitas pessoas não gostam de mexer com CSS?
4. Retrospectiva ⊙ Arquivo único + framework ⊙ Manutenção ⊙ Inspecionar o elemento ⊙ Muito código inútil e difícil manutenção 4
5. Aprender CSS ⊙ É fácil de aprender ⊙ Soluções na internet ⊙ Fácil de desandar 5
6. Problemas ⊙ Conflito de nomenclatura ⊙ Não reaproveitamento de classes ⊙ Nomes que não dizem nada ⊙ Arquivos quilométricos ⊙ Código inútil 6
7. Medo! 7
8. O QUE GOSTARÍAMOS? 8
9. Mundo ideal ⊙ Menos CSS ⊙ CSS mais limpo ⊙ Sabemos onde mexer sem medo ⊙ Saber o que está acontecendo 9
10. ALGUMAS SOLUÇÕES 10
11. Pensar antes de fazer 11
12. BEM Block Element Modifier http://getbem.com/
13. O que é? Exemplo ⊙ Bloco ⊙ Elemento ⊙ Modificador 13
14. Resumo ⊙ Separação de conceitos ⊙ Princípio de responsabilidade única ⊙ Você sabe o que está alterando ⊙ Especificidade ⊙ MUITO verboso 14
15. Styled-components https://www.styled-components.com/
16. O que é? Exemplo ⊙ Estilos por componente para React 16
17. Resumo ⊙ Carrega pouco CSS ⊙ Especificidade e nomenclatura de classes ⊙ Reutilização ⊙ Similar a pré-processadores 17
18. CSS Funcional Ou Atomic Design
19. O que é? Exemplo ⊙ Pequenos css baseados na sua funcionalidade visual ⊙ Tailwind, BassCSS, Tachyons, etc 19
20. Frameworks ⊙ Não vamos criar essas classes na mão ⊙ Tailwind, BassCSS, Tachyons, etc ⊙ Personalizável ⊙ Extrair componentes 20
21. Mas não é style inline? ⊙ Media queries ⊙ Opções e variáveis ⊙ Especificidade ⊙ :before e :after ⊙ Múltiplos elementos ⊙ Triste de escrever 21
22. Resumo ⊙ Quase não escreve CSS ⊙ Não precisa pensar em nomear coisas ⊙ Velocidade ⊙ Consistência ⊙ Efeito cascata não existe ⊙ Tamanho do CSS pouco muda ⊙ Fácil manutenção ⊙ Perda de reusabilidade 22
23. OOCSS Object-Oriented CSS http://oocss.org/ 23
24. Conceitos ⊙ Objetos ⊙ Skins e estruturas ⊙ Container e conteúdo ⊙ Evitar especifidade 24
25. SMACSS Scalable and Modular Architecture CSS http://smacss.com/ 25
26. Conceitos ⊙ Base ⊙ Layout ⊙ Module ⊙ State ⊙ Theme 26
27. RSCSS Reasonable System for CSS https://rscss.io/ 27
28. Conceitos ⊙ Child selector > ⊙ Componentes e variações 28
29. FINALIZANDO 29
30. Use o que a ferramenta te oferece <3 30
31. Variáveis 31 $teko: 'Teko', sans-serif; $primary-font: $teko; $aqua: #19f3ff; $primary-color: $aqua; $desktop-width: 1024px;
32. Mixins 32 @mixin desktop { @media (min-width: #{$desktop-width}) { @content; } }
33. Funções 33 @function px-to-rem($value, $base: $default-font-size) { @return #{$value/$base}rem; }
34. Links ⊙ https://johnpolacek.github.io/the-case -for-atomic-css/ ⊙ https://adamwathan.me/css-utility-cla sses-and-separation-of-concerns/ ⊙ https://hackernoon.com/full-re-write- with-tachyons-and-functional-css-a- case-study-part-1-635ccb5fb00b ⊙ https://willianjusten.com.br/falando-s obre-rscss 34
35. Obrigada! @juunegreiros bit.ly/sopa-letrinhas-css 35