Palestra trilha web TDC POA 2016

1. Arquitetando CSS para
aplicações Web robustas

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

3. - Estilos duplicados
- Código muito
específico
- Difícil de manter

4. CSS é muito fácil e não damos a devida atenção a ele.

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

7. Uma boa arquitetura CSS é ...
- Previsível
- Reutilizável
- Sustentável
- Escalável

8. Frameworks CSS

9. E a identidade visual?

10. Construa seu próprio framework

11. Como construir um framework ?

12. Componentização

13. Pré-processadores

15. POR QUE USAR UM PRÉ-PROCESSADOR?

16. Particionamento de arquivos

17. Variáveis

18. Mixins

19. Placeholders

20. Maps

21. Construção de regras de estilo automatizadas

23. DRY
-Jeremy Clarke, @jeremyclarke

24. - DON’T REPEAT YOURSELF -
Nunca duplique um estilo/definição de propriedade que
você pode evitar

25. - Manter o estilo separado do
conteúdo
- Evitar a especificidade

26. Usar variáveis e mixins para reúso

27. - Junte os grupos de
propriedades
reutilizáveis
- Nomeie estes
grupos logicamente
- Adicione os
seletores aos grupos

28. OOCSS
-Nicole Sullivan, @stubbornella

29. Separar a estrutura do visual

34. Separar container e conteúdo

36. SMACSS
-Jonathan Snook, @snookca

37. - base
- layout
- module
- state
- theme

38. ➔Base

39. ➔Layout

40. ➔Module

41. ➔State
-hover
-disabled
-active

42. ➔Theme

43. B E M
- Development by Yandex

44. .Block__Element--Modifier { ... }

45. .tab__item--active { ... }

46. ITCSS
-Harry Roberts, @csswizardry

48. ➔Settings

49. ➔Tools

50. ➔Generic

51. ➔Base

52. ➔Objects

53. ➔Components

54. ➔Trumps

55. ATOMIC DESIGN
-Brad Frost, @brad_frost

57. ➔Atoms

58. ➔Moléculas

59. ➔Organismo

60. ➔Template

61. ➔Página

64. !important Nunca use !important;

65. Use reset ou normalize

66. Pare de usar números mágicos

67. Não use ID para estilizar

68. Nomeie suas classes, variáveis e mixins de
acordo com a sua funcionalidade. Nunca use a
apresentação visual para nomeação.

69. Cuidado com o aninhamento de seletores

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

71. Padronize seu código. Tenha um CSS guideline

72. Modularize o seu código
“Ao separar um sanduíche em pedaços menores, você pode
rapidamente e eficientemente criar uma infinidade de variedades.
Assim que as classes deveriam ser baseadas. Em vez de
“#sanduiche” agora temos
“.pao.alface.queijo.salame.tomate.maionese” e isso é incrível!
Não gosta de tomate? É fácil deixá-lo fora ... Classes baseadas em
estruturas é como comer no Subway (só que melhor).
– Harry Roberts, @csswizardry

73. Divida seu código em pequenas peças

74. Construa um showcase com os seus componentes

75. Indo além ...

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