Organização CSS

Explicando um pouco de como organizo meu CSS, utilizando RSCSS e ITCSS. E como isso é aplicado na mLabs.

Transcript

1. Organização CSS 1
2. Danilo Vaz Front-end na Organizador da Mestre Pokémon Organizador do @_danilovaz /danilovaz 2
3. Cascading Style Sheet Organizado Manutenível Escalável 3
5. O seu CSS é organizado? 5
6. CSS é tão difícil de manter organizado 6
7. Quanto mais você fuça, mais riscos corre 7
8. Qual a solução? Não existe bala de prata Mas podemos melhorar 8
10. RSCSS ITCSS & 10
11. RSCSS Conjunto de regras para ajudar na construção do seu CSS - O que é? 11
12. Quem nunca? - Aumenta a especificidade - Dependencia de tags 12
13. Nesting CSS nativo 13
14. DEMO 14
15. BEM 15
16. DEMO 16
17. Problemas Nesting nativo - Markup limpo - CSS sujo - Difícil de ler BEM - Markup sujo - CSS limpo - Fácil de ler 17
18. RSCSS - Útil ao agradável 18
19. RSCSS - DEMO 19
20. RSCSS - Regra de ouro Tudo é componente 20
21. RSCSS - Nomeando Componentes Os componentes devem ter pelo menos duas palavras, separadas por um traço. Exemplos: Um botão de share = .share-button Um form de busca = .search-form Um preview de post = .preview-post 21
22. RSCSS - Elementos Elementos são os filhos do seu componente 22
23. RSCSS - Nomeando Elementos Os elementos devem ter classes com uma palavra. Exemplos: 23
24. RSCSS - Elementos Seletores Use o seletor filho > sempre que possível. - Previne que a propriedade passe para componentes internos indesejados - Performa melhor que seletores descendentes 24
25. RSCSS - Elementos Multi-palavras Elementos que precisam de uma ou mais palavras, concatene sem traços ou underscore 25
26. RSCSS - Tags Evite usar tags como seletores, pois não são descritivas e há perda de performance 26
27. RSCSS - Variações Componentes e elementos podem ter variações 27
28. RSCSS - Variações em componentes Classes de variações devem ser prefixadas por um traço 28
29. RSCSS - Variações em elementos Também podemos utilizar traços prefixados e não há problema em colocá-lo adjacente 29
32. ITCSS - O que é? Conjunto de regras para uma estrutura CSS sadia e escalável 32
33. ITCSS - Como funciona? Inverted Triangle CSS 33
34. ITCSS - Settings Aqui ficam as variáveis globais que vão definir cores, espaçamentos e outras configurações desejadas para o funcionamento do seu projeto. 34
35. ITCSS - Tools Aqui ficam os mixins e funções necessárias para a construção do layout . 35
36. ITCSS - Generic Camada destinada às propriedades mais genéricas (dã). Aqui ficam seletores com a menor especifidade possível, como os famosos resets. 36
37. ITCSS - Base Estilizações básicas diretamente em tags. Geralmente utilizada para estilizar as tags h1-h6. Mas apenas estilizações básicas 37
38. ITCSS - Objects Pequenos pedaços da interface reutilizáveis por todo o projeto, como botões por exemplo. Aqui só pode usar classes, nada de IDs e tags. Abstraia o máximo que puder 38
39. ITCSS - Components Aqui teremos que ser o mais específicos possível, mas sempre lembrando que um componente deve ser reutilizável. Então nada de positions e magins. 39
40. ITCSS - Trumps OPS! 40
41. ITCSS - Trumps Camada responsável pela maior especificidade de todas, inclusive aqui é plausível o uso de !important 41
42. ITCSS - Recapitulando - A especificidade vai crescendo linearmente e lentamente de camada a camada; - Cada camada é mais detalhada e explícita que a anterior; - Se você cria um objeto genérico, ele pode ser extendido/reutilizado; - Tudo que você cria tem um lugar específico para ficar. 42
43. WAIIIIIIIIIIIIT! TEM MAIS 43
44. ITCSS - Temas Se você utiliza Testes A/B, pode criar uma camada extra chamada Theme, entre Componentes e Trumps. 44
46. Perguntas? 46