CSS em Larga Escala

Transcript

1. CSS em larga escala CSS em larga escala (e porque larga escala não quer dizer "projeto grande") (e porque larga escala não quer dizer "projeto grande")
2. Filipe Kiss Especialista em interfaces e interações, manutenção de projetos de longo prazo e codebases enormes @filipekiss
3. Os Problemas do CSS
4. Culpa do CSS • Pouco expressivo • Muito solto • Cascata e Herança • Especificidade
5. Nossa culpa • Falta de documentação • Falta de estrutura e garantia de qualidade • Falta de conhecimento (seja sobre o CSS ou sobre o projeto em si) • Estilos diferentes de organização, preferências e modo de escrever • Incapacidade de saber o que já existe • Adicionar novos estilos no fim dos arquivos
6. CSS é uma árvore de dependências gigantes
7. CSS é uma árvore de dependências gigantes Toda regra do CSS precisa saber tudo que vem antes dela e tudo que vem depois
8. Como ordenar sua folha de estilos Seguindo o fluxo da página Separar por componentes/temas - tipografia, botões, forms, etc Simplesmente colocar no fim da folha de estilos
9. projeto.css
10. projeto.css
11. Desfazendo CSS: Escrever mais CSS pra desfazer uma regra definida anteriormente
12. Falta de ordenação combinada com estilos herdados levam a um desperdício e/ou redundância
13. Especifididade
14. Não importa o quanto você pense na ordem; o quão corretamente você utilize a cascata; quais convenções de nomenclatura você use; especificidade pode desfazer tudo isso
15. Specificity Graph
16. cssstats.com - gráfico de especificidade do Facebook Especificidade Posição na folha de Estilos
17. cssstats.com - gráfico de especificidade do Facebook Especificidade Posição na folha de Estilos
18. cssstats.com - gráfico de especificidade do Facebook Especificidade Posição na folha de Estilos
19. Como resolver isso?
20. cssstats.com - gráfico de especificidade do StackOverflow Especificidade Posição na folha de Estilos
21. tl;dr: Escrever CSS por ordem de especificidade
24. Necessidades • Um ambiente saudável, acessível para várias pessoas • Conseguir organizar e controlar a ordem das regras e a cascata • Ter um lugar apropriado para todas as coisas (novas e antigas) • Diminuir repetição e desgaste
25. ITCSS
26. ITCSS: Inverted Triangle CSS
27. ITCSS • Não é um framework, é uma maneira de pensamento • Altamente escalável • Facilmente gerenciável • Não depende de pre-processador, padrão de nomenclatura e é incrivelmente simples
29. ALCANCE
30. ALCANCE Genérico Explícito
31. ALCANCE Genérico Explícito Menos Específico Mais Específico
32. Definições Ferramentas Genéricos Base Objetos Components Helpers Etc
33. Camadas Padrão Definições: Variáveis Globais, Configurações Ferramentas: Mixins e funções Genericos: Resets e normalizes, box-sizing Base: Estilos de tags HTML (a, h1, p, ul, li) Objetos: Definições estruturais sem aparência Components: Componentes desenhados, pedaços da UI Helpers: Classes reativas como '.hidden', '.open'
34. Definições Configurações globais Cores da marca "font-family"
35. Definições Configurações globais Cores da marca "font-family"
36. Ferramentas Mixins do projeto Mixins de Terceiros Funções de ajuda
37. Ferramentas
38. Genéricos Estilos de Reset Estilos de Normalização Seletor *
39. Genéricos
40. Base Elementos HTML sem classe H1-H6, links básicos, lists, etc Última camada onde aparecem 'type selectors' (a {}, blockquote{}, ul{}, etc)
41. Base
42. Objetos OOCSS Padrões de Design Somente classes Nomes abstratos (.ui-nav {}, .ui-list {})
43. Objetos
44. Components Elementos desenhados da UI Ainda utilizando apenas classes Nomes de classes mais específicos (.products-lists {})
45. Components
46. Helpers Classes reativas, normalmente utilizadas pelo JavaScript Afeta apenas um elemento do DOM por vez Normalmente possuem !important
47. Helpers
48. Pontos Principais Especificidade aumenta gradativamente a cada camada Cada camada afeta menos partes do DOM por vez Estilos são adicionados progressivamente; Nunca são desfeitos
50. Cada camada é mais detalhada e explícita do que a anterior
51. Resultados Cada regra tem um lugar específico As pessoas sabem onde procurar cada regra Diminuição de redundância Maior escalabilidade Fim das brigas por especificidade
52. Escalando o CSS Muito mais fácil de escalar o código Fácil também de escalar a arquitetura
53. Definições Ferramentas Genéricos Base Objetos Components Helpers Etc Precisa de um Tema? Tema Adicione uma camada
54. Definições Ferramentas Genéricos Base Objetos Components Helpers Etc Precisa fazer Teste A/B? Teste Adicione uma camada
55. Adicionando camadas Adicione camadas sempre no lugar correto Especificidade dos seletores vai definir onde essa camada entra Mantenha o gráfico de especificidade (sempre crescente)
56. Outras dicas Diminua as falhas humanas Os pontos de entrada são "índices" do conteúdo Mantenha o padrão do código alto Evite seletores aninhados Faça comentários úteis
58. Outras dicas Diminua as falhas humanas Os pontos de entrada são "índices" do conteúdo Mantenha o padrão do código alto Evite seletores aninhados Faça comentários úteis
61. Outras dicas Diminua as falhas humanas Os pontos de entrada são "índices" do conteúdo Mantenha o padrão do código alto Evite seletores aninhados Faça comentários úteis
63. Resumo Escreva CSS em ordem de especificidade Mantenha o gráfico de especificidade crescente Todas as regras devem apenas adicionar e herdar das regras anteriores Organize as folhas de estilos das mais abrangentes para as mais localizadas Remova e adicione camadas, mas somente no lugar certo
64. Lembre-se Não é porque você leu um post, assistiu um vídeo ou participou de um meetup que você deve chegar no seu trabalho amanhã e refatorar a sua codebase inteira. Converse com seu time, entenda a necessidade e faça isso de forma gradual
65. Obrigado! Filipe Kiss - @filipekiss filipekiss.com.br/talks/meetup-css-2018-07-10