O documento discute a importância de não subestimar o CSS e dar a ele o devido tratamento como parte fundamental de projetos. Apresenta diversas técnicas para organizar e escrever código CSS de forma mais eficiente e mantenedora, como dividir o código em componentes, usar pré-processadores para variáveis e funções, além de reutilizar estilos o máximo possível.

1. Não subestime seu CSS

2. Rosicléia Frasson
rosicleiafrasson@gmail.com
@rosifrasson
rosicleiafrasson

4. Why is it that CSS is not
treated as a first class citizen
in projects?
Adam Bulmer

6. CSS
Chaotic Style Sheets

7. CSS is simple...It’s simple to understand.
But CSS is not simple to use or maintain.
Chris Eppstein - @chriseppstein

11. Quais problemas
essas metodologias
resolvem?

12. Imutabilidade

13. Imutabilidade
Componentes não podem se romper
involuntariamente

16. Especificidade

17. Especificidade
Mantenha a especificidade
tão baixa quanto possível.
Limite o escopo ao que
você está estilizando.

18. Reuse e
combine
componentes

19. Reuse e combine
componentes
Crie componentes capazes de se adaptar a
diferentes containers.

20. Componentize

21. Construa
pontes com
UX

22. Dividir para
Conquistar

23. Dividir para conquistar
style/
|
| -- base/
| -- components/
| -- constants/
| -- layout/
| -- modules/
| -- pages/
| -- vendors/
| -- components/
| | -- buttons.css
| | -- forms.css
| | -- filters.css
| | -- checks.css
| | -- navigators.css
Organize seu
CSS em uma
estrutura
lógica

24. OOCSS

25. OOCSS
Separar regras de estrutura e visual

26. OOCSS
Separar regras de estrutura e visual

27. OOCSS
Separar regras de estrutura e visual

28. Custom
Properties

29. Custom Properties

30. Custom Properties

31. Padronize seu
código

32. Padronize seu código
Tenha um
CSS
guideline

33. Dê bons nomes
para as suas
classes

34. Dê bons nomes
Nomeie suas classes e variáveis de acordo com a
sua funcionalidade. Nunca use a apresentação
visual para nomeação

35. Magic
Numbers

36. Magic Numbers

37. Extendendo o
CSS

38. POR QUE USAR UM PRÉ-PROCESSADOR?

40. Particionamento de arquivos

41. Variáveis

42. Mixins

43. Placeholders

44. Construção de regras de estilo automatizadas

45. Funções de cores

46. Funções de cores

47. Analize o código de saída do pré-processador

48. Escreva cada vez
menos CSS

49. Escreva cada vez menos CSS
Escrever regras novas deveria ser uma exceção.
É muito provável que você já tenha na sua base de
código o estilo que você precisa.

50. Para ir além ...

51. Obrigada!
rosicleiafrasson@gmail.com
@rosifrasson
rosicleiafrasson