Arquitetura CSS na AMARO

Apresentação sobre arquitetura CSS em aplicações de larga escala utilizando o nosso case na AMARO como um exemplo de que, nem sempre, só seguir uma metodologia atende todas as nossas necessidades.

Transcript

1. ARQUITETURA CSS AMARO
2. ARQUITETURA CSS NA AMARO DISCLAIMER ▸ Não é a verdade absoluta ▸ Cada projeto possui suas necessidades específicas ▸ Tudo funciona na teoria CSS MEETUP #18
3. C S S I S A W E S O M E
4. U N T I L I T ' S N O T
5. ARQUITETURA CSS NA AMARO AGENDA ▸ Arquitetura x Framework x Toolkit ▸ Problemas comuns com CSS ▸ Como resolver esses problemas? ▸ Arquitetura CSS na AMARO CSS MEETUP #18
6. ARQUITETURA FRAMEWORK TOOLKIT HOJE VAMOS FALAR DE ARQUITETURA
7. ARQUITETURA CSS NA AMARO ARQUITETURA CSS MEETUP #18
8. ARQUITETURA CSS NA AMARO ARQUITETURA ▸ Plano sobre como estruturar uma aplicação. CSS MEETUP #18
9. ARQUITETURA CSS NA AMARO ARQUITETURA ▸ Plano sobre como estruturar uma aplicação. CSS MEETUP #18 FRAMEWORK
10. ARQUITETURA CSS NA AMARO ARQUITETURA ▸ Plano sobre como estruturar uma aplicação. CSS MEETUP #18 FRAMEWORK ▸ Implementação de uma arquitetura que pode ser utilizado como base para construção de uma aplicação.
11. ARQUITETURA CSS NA AMARO ARQUITETURA ▸ Plano sobre como estruturar uma aplicação. CSS MEETUP #18 FRAMEWORK ▸ Implementação de uma arquitetura que pode ser utilizado como base para construção de uma aplicação. TOOLKIT / COMPONENT LIBRARY
12. ARQUITETURA CSS NA AMARO ARQUITETURA ▸ Plano sobre como estruturar uma aplicação. CSS MEETUP #18 FRAMEWORK ▸ Implementação de uma arquitetura que pode ser utilizado como base para construção de uma aplicação. TOOLKIT / COMPONENT LIBRARY ▸ Coleção de componentes e padrões que podem ser utilizados para construir uma aplicação.
13. PROBLEMAS COMUNS COM CSS VOCÊ JÁ PASSOU POR ISSO OU AINDA VAI PASSAR
14. ARQUITETURA CSS NA AMARO PROBLEMAS COMUNS COM CSS CSS MEETUP #18
15. ARQUITETURA CSS NA AMARO PROBLEMAS COMUNS COM CSS ▸ Manutenabilidade CSS MEETUP #18
16. ARQUITETURA CSS NA AMARO PROBLEMAS COMUNS COM CSS ▸ Manutenabilidade ▸ Especificidade CSS MEETUP #18
17. ARQUITETURA CSS NA AMARO PROBLEMAS COMUNS COM CSS ▸ Manutenabilidade ▸ Especificidade ▸ Organização CSS MEETUP #18
18. ARQUITETURA CSS NA AMARO MANUTENABILIDADE CSS MEETUP #18
19. ARQUITETURA CSS NA AMARO MANUTENABILIDADE ▸ O tamanho do CSS tende ao infinito em uma aplicação de larga escala. CSS MEETUP #18
20. ARQUITETURA CSS NA AMARO MANUTENABILIDADE ▸ O tamanho do CSS tende ao infinito em uma aplicação de larga escala. ▸ Vários desenvolvedores alterando o mesmo código. CSS MEETUP #18
21. ARQUITETURA CSS NA AMARO MANUTENABILIDADE ▸ O tamanho do CSS tende ao infinito em uma aplicação de larga escala. ▸ Vários desenvolvedores alterando o mesmo código. ▸ Encontrar uma regra específica que precisa ser alterada. CSS MEETUP #18
22. ARQUITETURA CSS NA AMARO ESPECIFICIDADE CSS MEETUP #18
23. ARQUITETURA CSS NA AMARO ESPECIFICIDADE ▸ É como o browser vai resolver conflitos nas suas regras de CSS. CSS MEETUP #18
24. ARQUITETURA CSS NA AMARO ESPECIFICIDADE ▸ É como o browser vai resolver conflitos nas suas regras de CSS. ▸ Quanto mais específica uma regra CSS menor sua reutilização. CSS MEETUP #18
25. ARQUITETURA CSS NA AMARO ESPECIFICIDADE ▸ É como o browser vai resolver conflitos nas suas regras de CSS. ▸ Quanto mais específica uma regra CSS menor sua reutilização. ▸ Regras muito abstratas podem causar conflitos indesejados. CSS MEETUP #18
26. ARQUITETURA CSS NA AMARO ESPECIFICIDADE ▸ É como o browser vai resolver conflitos nas suas regras de CSS. ▸ Quanto mais específica uma regra CSS menor sua reutilização. ▸ Regras muito abstratas podem causar conflitos indesejados. ▸ Excesso de especificidade causa verbosidade desnecessária no projeto. CSS MEETUP #18
27. ARQUITETURA CSS NA AMARO ESPECIFICIDADE ▸ É como o browser vai resolver conflitos nas suas regras de CSS. ▸ Quanto mais específica uma regra CSS menor sua reutilização. ▸ Regras muito abstratas podem causar conflitos indesejados. ▸ Excesso de especificidade causa verbosidade desnecessária no projeto. ▸ Faz com que os componentes não funcionem como o esperado em ambientes diferentes. CSS MEETUP #18
28. ARQUITETURA CSS NA AMARO ORGANIZAÇÃO CSS MEETUP #18
29. ARQUITETURA CSS NA AMARO ORGANIZAÇÃO ▸ Uma única pasta para todos os arquivos CSS. CSS MEETUP #18
30. ARQUITETURA CSS NA AMARO ORGANIZAÇÃO ▸ Uma única pasta para todos os arquivos CSS. ▸ Estilos em tags <style> CSS MEETUP #18
31. ARQUITETURA CSS NA AMARO ORGANIZAÇÃO ▸ Uma única pasta para todos os arquivos CSS. ▸ Estilos em tags <style> ▸ Estilos inline. CSS MEETUP #18
32. RESOLVENDO ESSES PROBLEMAS CSS GOOD PRACTICES
33. ARQUITETURA CSS NA AMARO RESOLVENDO ESSES PROBLEMAS CSS MEETUP #18
34. ARQUITETURA CSS NA AMARO RESOLVENDO ESSES PROBLEMAS ▸ Adote boas práticas que se apliquem a realidade da aplicação CSS MEETUP #18
35. ARQUITETURA CSS NA AMARO RESOLVENDO ESSES PROBLEMAS ▸ Adote boas práticas que se apliquem a realidade da aplicação ▸ Tenha um code standard / style guide. CSS MEETUP #18
36. ARQUITETURA CSS NA AMARO RESOLVENDO ESSES PROBLEMAS ▸ Adote boas práticas que se apliquem a realidade da aplicação ▸ Tenha um code standard / style guide. ▸ Defina metas e métricas claras. CSS MEETUP #18
37. ARQUITETURA CSS NA AMARO BOAS PRÁTICAS CSS MEETUP #18
38. ARQUITETURA CSS NA AMARO BOAS PRÁTICAS ▸ Evite markup (divs, spans, etc) desnecessários. CSS MEETUP #18
39. ARQUITETURA CSS NA AMARO BOAS PRÁTICAS ▸ Evite markup (divs, spans, etc) desnecessários. ▸ Evite usar seletores com #ids. CSS MEETUP #18
40. ARQUITETURA CSS NA AMARO BOAS PRÁTICAS ▸ Evite markup (divs, spans, etc) desnecessários. ▸ Evite usar seletores com #ids. ▸ Não faça nest no seu CSS. CSS MEETUP #18
41. ARQUITETURA CSS NA AMARO BOAS PRÁTICAS ▸ Evite markup (divs, spans, etc) desnecessários. ▸ Evite usar seletores com #ids. ▸ Não faça nest no seu CSS. ▸ Modularize seus componentes CSS MEETUP #18
42. ALL CODE IN ANY CODE-BASE SHOULD LOOK LIKE A SINGLE PERSON TYPED IT, EVEN WHEN MANY PEOPLE ARE CONTRIBUTING TO IT. Nicolas Gallagher ARQUITETURA CSS NA AMARO CSS MEETUP #18
43. ARQUITETURA CSS NA AMARO CODE STANDARD / STYLE GUIDE CSS MEETUP #18
44. ARQUITETURA CSS NA AMARO CODE STANDARD / STYLE GUIDE ▸ Você não precisa concordar com um code standard. Mas você tem que seguí-lo. CSS MEETUP #18
45. ARQUITETURA CSS NA AMARO CODE STANDARD / STYLE GUIDE ▸ Você não precisa concordar com um code standard. Mas você tem que seguí-lo. ▸ O código terá um padrão único em todo o projeto. CSS MEETUP #18
46. ARQUITETURA CSS NA AMARO CODE STANDARD / STYLE GUIDE ▸ Você não precisa concordar com um code standard. Mas você tem que seguí-lo. ▸ O código terá um padrão único em todo o projeto. ▸ Facilita a adaptação de novos desenvolvedores. CSS MEETUP #18
47. ARQUITETURA CSS NA AMARO CODE STANDARD / STYLE GUIDE ▸ Você não precisa concordar com um code standard. Mas você tem que seguí-lo. ▸ O código terá um padrão único em todo o projeto. ▸ Facilita a adaptação de novos desenvolvedores. ▸ Defina metas e métricas claras. CSS MEETUP #18
48. ARQUITETURA CSS NA AMARO METAS CSS MEETUP #18
49. ARQUITETURA CSS NA AMARO METAS ▸ Ter um padrão. CSS MEETUP #18
50. ARQUITETURA CSS NA AMARO METAS ▸ Ter um padrão. ▸ Não começar do zero toda vez. CSS MEETUP #18
51. ARQUITETURA CSS NA AMARO METAS ▸ Ter um padrão. ▸ Não começar do zero toda vez. ▸ Possuir uma arquitetura flexível e escalável. CSS MEETUP #18
52. ARQUITETURA CSS NA AMARO MÉTRICAS CSS MEETUP #18
53. ARQUITETURA CSS NA AMARO MÉTRICAS ▸ As métricas devem ser mensuráveis. CSS MEETUP #18
54. ARQUITETURA CSS NA AMARO MÉTRICAS ▸ As métricas devem ser mensuráveis. ▸ Elas devem se adequar a realidade da aplicação. CSS MEETUP #18
55. ARQUITETURA CSS NA AMARO CSS MEETUP #18 ARQUITETURA CSS NA AMARO
56. ARQUITETURA CSS NA AMARO ARQUITETURA CSS NA AMARO CSS MEETUP #18
57. ARQUITETURA CSS NA AMARO ARQUITETURA CSS NA AMARO ▸ Guidelines CSS MEETUP #18
58. ARQUITETURA CSS NA AMARO ARQUITETURA CSS NA AMARO ▸ Guidelines ▸ Metas CSS MEETUP #18
59. ARQUITETURA CSS NA AMARO ARQUITETURA CSS NA AMARO ▸ Guidelines ▸ Metas ▸ Convenções CSS MEETUP #18
60. ARQUITETURA CSS NA AMARO ARQUITETURA CSS NA AMARO ▸ Guidelines ▸ Metas ▸ Convenções ▸ Organização CSS MEETUP #18
61. ARQUITETURA CSS NA AMARO ARQUITETURA CSS NA AMARO ▸ Guidelines ▸ Metas ▸ Convenções ▸ Organização ▸ Toolbox CSS MEETUP #18
62. ARQUITETURA CSS NA AMARO GUIDELINES CSS MEETUP #18
63. ARQUITETURA CSS NA AMARO GUIDELINES ▸ Baixa especificidade nos seletores. CSS MEETUP #18
64. ARQUITETURA CSS NA AMARO GUIDELINES ▸ Baixa especificidade nos seletores. ▸ Nomenclatura fácil de entender. CSS MEETUP #18
65. ARQUITETURA CSS NA AMARO GUIDELINES ▸ Baixa especificidade nos seletores. ▸ Nomenclatura fácil de entender. ▸ O código de desenvolvimento deve possuir boa legibilidade. CSS MEETUP #18
66. ARQUITETURA CSS NA AMARO GUIDELINES ▸ Baixa especificidade nos seletores. ▸ Nomenclatura fácil de entender. ▸ O código de desenvolvimento deve possuir boa legibilidade. ▸ Automatize o que for possível. CSS MEETUP #18
67. ARQUITETURA CSS NA AMARO GUIDELINES ▸ Baixa especificidade nos seletores. ▸ Nomenclatura fácil de entender. ▸ O código de desenvolvimento deve possuir boa legibilidade. ▸ Automatize o que for possível. ▸ Codifique como se fosse 2020. CSS MEETUP #18
68. ARQUITETURA CSS NA AMARO METAS CSS MEETUP #18
69. ARQUITETURA CSS NA AMARO METAS ▸ Adotar uma consistência de código através de toda a plataforma. CSS MEETUP #18
70. ARQUITETURA CSS NA AMARO METAS ▸ Adotar uma consistência de código através de toda a plataforma. ▸ Facilitar a manutenção. CSS MEETUP #18
71. ARQUITETURA CSS NA AMARO METAS ▸ Adotar uma consistência de código através de toda a plataforma. ▸ Facilitar a manutenção. ▸ Garantir a qualidade de código em toda a aplicação. CSS MEETUP #18
72. ARQUITETURA CSS NA AMARO METAS ▸ Adotar uma consistência de código através de toda a plataforma. ▸ Facilitar a manutenção. ▸ Garantir a qualidade de código em toda a aplicação. ▸ Guiar facilmente novos desenvolvedores pela plataforma. CSS MEETUP #18
73. ARQUITETURA CSS NA AMARO CONVENÇÕES CSS MEETUP #18
74. ARQUITETURA CSS NA AMARO CONVENÇÕES ▸ Nomear classes seguindo a metodologia BEM. CSS MEETUP #18
75. ARQUITETURA CSS NA AMARO CONVENÇÕES ▸ Nomear classes seguindo a metodologia BEM. ▸ Mantém uma especificidade baixa e permite reutilização. CSS MEETUP #18
76. ARQUITETURA CSS NA AMARO CONVENÇÕES ▸ Nomear classes seguindo a metodologia BEM. ▸ Mantém uma especificidade baixa e permite reutilização. ▸ Diminui muito a necessidade de "nested selectors". CSS MEETUP #18
77. ARQUITETURA CSS NA AMARO CONVENÇÕES ▸ Nomear classes seguindo a metodologia BEM. ▸ Mantém uma especificidade baixa e permite reutilização. ▸ Diminui muito a necessidade de "nested selectors". ▸ Seletores se tornam mais legíveis. CSS MEETUP #18
78. ARQUITETURA CSS NA AMARO CONVENÇÕES ▸ Nomear classes seguindo a metodologia BEM. ▸ Mantém uma especificidade baixa e permite reutilização. ▸ Diminui muito a necessidade de "nested selectors". ▸ Seletores se tornam mais legíveis. ▸ O relacionamento entre os componentes torna-se mais explícito. CSS MEETUP #18
79. ARQUITETURA CSS NA AMARO CONVENÇÕES ▸ Nomear classes seguindo a metodologia BEM. ▸ Mantém uma especificidade baixa e permite reutilização. ▸ Diminui muito a necessidade de "nested selectors". ▸ Seletores se tornam mais legíveis. ▸ O relacionamento entre os componentes torna-se mais explícito. ▸ Os estilos se tornam mais modularizados. CSS MEETUP #18
80. ARQUITETURA CSS NA AMARO CONVENÇÕES ▸ Nomear classes seguindo a metodologia BEM. ▸ Mantém uma especificidade baixa e permite reutilização. ▸ Diminui muito a necessidade de "nested selectors". ▸ Seletores se tornam mais legíveis. ▸ O relacionamento entre os componentes torna-se mais explícito. ▸ Os estilos se tornam mais modularizados. ▸ Só manipular JavaScript através de classes .js-* CSS MEETUP #18
81. ARQUITETURA CSS NA AMARO CONVENÇÕES ▸ Nomear classes seguindo a metodologia BEM. ▸ Mantém uma especificidade baixa e permite reutilização. ▸ Diminui muito a necessidade de "nested selectors". ▸ Seletores se tornam mais legíveis. ▸ O relacionamento entre os componentes torna-se mais explícito. ▸ Os estilos se tornam mais modularizados. ▸ Só manipular JavaScript através de classes .js-* ▸ Os estados dos componentes devem ser manipulados com classes .has-* e .is-* CSS MEETUP #18
82. ARQUITETURA CSS NA AMARO ORGANIZAÇÃO CSS MEETUP #18
83. ARQUITETURA CSS NA AMARO ORGANIZAÇÃO ▸ Grande inspiração do SMACSS. CSS MEETUP #18
84. ARQUITETURA CSS NA AMARO ORGANIZAÇÃO ▸ Grande inspiração do SMACSS. ▸ Separar componentes, do layout, e das páginas. CSS MEETUP #18
85. ARQUITETURA CSS NA AMARO ORGANIZAÇÃO ▸ Grande inspiração do SMACSS. ▸ Separar componentes, do layout, e das páginas. ▸ Modularização. CSS MEETUP #18
86. ARQUITETURA CSS NA AMARO ORGANIZAÇÃO ▸ Grande inspiração do SMACSS. ▸ Separar componentes, do layout, e das páginas. ▸ Modularização. ▸ Módulos pequenos são mais fáceis de manter. CSS MEETUP #18
87. ARQUITETURA CSS NA AMARO ORGANIZAÇÃO ▸ Grande inspiração do SMACSS. ▸ Separar componentes, do layout, e das páginas. ▸ Modularização. ▸ Módulos pequenos são mais fáceis de manter. ▸ Parar de desenvolver páginas e desenvolver os componentes. CSS MEETUP #18
88. ARQUITETURA CSS NA AMARO ORGANIZAÇÃO ▸ Grande inspiração do SMACSS. ▸ Separar componentes, do layout, e das páginas. ▸ Modularização. ▸ Módulos pequenos são mais fáceis de manter. ▸ Parar de desenvolver páginas e desenvolver os componentes. ▸ Módulos combinados formam uma página. CSS MEETUP #18
89. ARQUITETURA CSS NA AMARO ORGANIZAÇÃO ▸ Grande inspiração do SMACSS. ▸ Separar componentes, do layout, e das páginas. ▸ Modularização. ▸ Módulos pequenos são mais fáceis de manter. ▸ Parar de desenvolver páginas e desenvolver os componentes. ▸ Módulos combinados formam uma página. CSS MEETUP #18
90. ARQUITETURA CSS NA AMARO TOOLBOX ▸ Sass ▸ webpack ▸ Sass loader ▸ Style loader CSS MEETUP #18 + =
91. CONCLUSÃO
92. ARQUITETURA CSS NA AMARO CONCLUSÃO ▸ Mantenha as coisas pequenas e simples. CSS MEETUP #18
93. ARQUITETURA CSS NA AMARO CONCLUSÃO ▸ Mantenha as coisas pequenas e simples. ▸ Pense em componentes. CSS MEETUP #18
94. ARQUITETURA CSS NA AMARO CONCLUSÃO ▸ Mantenha as coisas pequenas e simples. ▸ Pense em componentes. ▸ Organize os arquivos e diretórios da melhor forma para o projeto. CSS MEETUP #18
95. ARQUITETURA CSS NA AMARO CONCLUSÃO ▸ Mantenha as coisas pequenas e simples. ▸ Pense em componentes. ▸ Organize os arquivos e diretórios da melhor forma para o projeto. ▸ Reorganize e refatore quando necessário. CSS MEETUP #18
96. OBRIGADO! ESTAMOS CONTRATANDO: github.com/amaroteam/front-end-challenge