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

CSS Modular — Boas Práticas e Bizus

CSS Modular — Boas Práticas e Bizus

Lightning Talk dado no VTEX Lab em 06/07/2015

5fc5804101f0367b6faeee18a6cebe30?s=128

Daniel Fosco

July 06, 2015
Tweet

Transcript

  1. CSS MODULAR BOAS PRÁTICAS E BIZUS NOTDANIELFOSCO 1

  2. CSS MODULAR 2

  3. UMA COISA É UMA COISA E OUTRA COISA É OUTRA

    COISA 3
  4. 4

  5. BACANA 5

  6. BOSTA 6

  7. REACT 7

  8. UI MATTER 8

  9. COMPONENTES DE UI PADRÃO DA VTEX 9

  10. COMPONENTES DE UI PADRÃO DA VTEX Pode Melhorar 10

  11. Como? 11

  12. MARKUP SEMÂNTICO ! 12

  13. “NO ITEMS YET” UM ÚNICO COMPONENTE... 13

  14. ...MAIS DE UMA CLASSE NO MARKUP <div class="uim-no-items well text-muted

    text-center"> ... </div> .uim-no-items { ... } 14
  15. UMA COISA É UMA COISA E OUTRA COISA É OUTRA

    COISA 15
  16. SOLUÇÃO (COM LESS) <div class="uim-no-items"> ... </div> .uim-no-items { .well;

    .text-muted; .text-center; ... } 16
  17. SOLUÇÃO (COM SCSS) <div class="uim-no-items"> ... </div> .uim-no-items { @extend

    .well; @extend .text-muted; @extend .text-center; ... } 17
  18. SOLUÇÃO (COM SCSS AINDA MELHOR) <div class="uim-no-items"> ... </div> .uim-no-items

    { %extend .well; %extend .text-muted; %extend .text-center; ... } 18
  19. (NUM MUNDO IDEAL, NEM USARÍAMOS MAIS BOOTSTRAP, APENAS ESTILOS CRIADOS

    INTERNAMENTE) 19
  20. NESTING 20

  21. MIGA, APENAS PARE ! 21

  22. PERFORMANCE DO CAPETA ! 22

  23. .card { background: blue; .card-title { font-size: 1.2em; } .card-image

    { img { width: 100px; } } p { font-size: 1em; } } 23
  24. .card { background: blue; } .card .card-title { font-size: 1.2em;

    } .card .card-image img { width: 100px; } .card p { font-size: 1em; } 24
  25. CSS VINCULADO AO HTML... 25

  26. <div class="card"> <h1 class="card-title">Very nice card</h1> <div class="card-image"> <img src="#"

    alt=""> </div> <p>Wow, much nice</p> </div> 26
  27. <h1 class="card-title">Very nice card</h1> <div class="card"> <div class="card-image"> <img src="#"

    alt=""> </div> <p>Wow, much nice</p> </div> 27
  28. QUEBRA NO CSS QUANDO MUDA A ESTRUTURA DO MARKUP !

    28
  29. POR ÚLTIMO... 29

  30. INCEPTION MALDITO ! 30

  31. QUANDO USAR NESTING ! 31

  32. PSEUDO-CLASSES ! 32

  33. .card { background: blue; &:focus {...}; &:hover {...}; &:last-child {...}

    } 33
  34. BOM SENSO ! 34

  35. .card { background: blue; & + & {...}; img {

    ... } } 35
  36. COMO ORGANIZAR SUAS CLASSES? 36

  37. BEM 37

  38. BLOCK ELEMENT MODIFIER 38

  39. BLOCK ELEMENT MODIFIER 39

  40. BLOCK ELEMENT MODIFIER 40

  41. .block {...} .block__element {...} .block--modifier {...} 41

  42. .card { background: blue; } 42

  43. .card { background: blue; } .card__title { font-size: 1.2em; }

    43
  44. .card { background: blue; } .card__title { font-size: 1.2em; }

    .card--big { .card; width: 100%; } 44
  45. .card { background: blue; } .card__title { font-size: 1.2em; }

    .card__text { font-size: 1em; } .card--is-active { .card; opacity: 1; } 45
  46. FUTURO 46

  47. REACT CSS MODULES 47

  48. .card { background: blue; } .card { background: red; }

    48
  49. https://github.com/css-modules 49

  50. OBRIGADO NOTDANIELFOSCO 50