Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sopa de Letrinhas CSS | Alphabet soup CSS

Sopa de Letrinhas CSS | Alphabet soup CSS

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

3e4b321cfe49136ead7cbfcb5d45a8f0?s=128

Juliana Negreiros

August 27, 2019
Tweet

More Decks by Juliana Negreiros

Other Decks in Programming

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