CSS Modular — Boas Práticas e Bizus

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

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
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