Palestra sobre Modular CSS apresentada na QConSP 2012

2. Por que?

3. • Padronizados
• Integrados
• Estilos diferentes

5. Realidade
• Foco no visual
• Produção linear
• Refação

6. De quem é a culpa?
Mas de quem é a culpa?

8. Site ≠ APP

9. Site - Foco em
• Estilo
• Diagramação
• Primeiro impacto

10. APP - Foco em
• Estilo
• Funcionalidades
• Condução

11. GRID 960
LESS Framework
Foundation
Golden Grid
Semantic
Skeleton
Etc.

12. Nãããããããããã
ããããããããããã

13. ããããããããããã
ããããããããããã
ããããããããããã

14. ão.

15. Sei que agora muitos de
vocês estão me odiando…
#mimimimi

16. Diagramação do site engessa o código

17. Vamos voltar um pouquinho no tempo

18. HTML = conteúdo
CSS = estilo

19. Por que então
vamos mudar isso?

20. O que não queremos ver
<div class=”grid_2 omega ">
...
</div>

21. Contras
• .Grid-4-12 = .texto-azul
• Manutenções dolorosas
• Orienta o Design e não o
contrário

22. Ah! Mas e o
Semantic.gs?

23. Ah! Mas e os novos
Mixins para
Blueprint e Sass?

24. Contras
• .Grid-4-12 = .texto-azul
• Manutenções dolorosas
• Orienta o Design e não o
contrário
• Dependência?

25. Framework agiliza
a codificação

26. Usar slicer também

27. Recomendo GRIDs
e Frameworks
para prototipagem

28. Crie seu próprio
Framework

29. Eles criaram:
YUI, Twitter Bootstrap,
Abril Bootstrap, Peixe
Urbano Bootstrap

30. O Negócio deles não é igual ao seu

31. Pensando no seu projeto

32. Evite utilizar herança

33. .widget h2 {}
.widget-tt {}

34. .nav a {}
.nav-link {}

35. Evite utilizar IDs
para estilização

36. #submit {}
.botao {}

37. <form role="search" method="get" id="searchform" action=“">
<div>
<label class="screen-reader-text" for="s">Search for:</
label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search” /
>
</div>
</form>

38. Foque na função e
não no estilo
Nem no conteúdo

40. .bloco-claro {}
.ultimos-pedidos {}
.box {}

41. Pense em reutilização

42. Dicas para reutilização
• Classes globais
• Testar em outro local
• Testar variações
• Documentação

43. A inteligência do seu código

45. Class=“b”
Class=“b b-pri”
Class=“b b-small”
Class=“b b-small b-pri”

46. Tooltip
<div class="tooltip”>
<hgroup class="tooltip-h">
<h2 class="tooltip-tt">Reason:</h2>
</hgroup>
<section class="tooltip-body”></section>
</div>

47. Wizard
<ul class="steps">
<li class="checked"><span>1</span> About your campaign</li>
<li class="active"><span>2</span> Segmentation</li>
<li><span>3</span> Set your budget</li>
<li><span>4</span> Add your creatives</li>
</ul>

48. Standards (padrões)
• Títulos e textos
• Navegações
• Tabs (abas)
• Objetos de formulário

49. Estudo de caso

50. Cenário - Petrobras
• 12 projetos simultâneos
• Mais de 40 programadores
• Equipe com 5 designers/
front-end

51. Motivadores
• 50% formulário, 50% tabela
• Nenhum padrão de código ou
classes
• Nenhuma reutilização
• Sem acesso ao Visual Studio

52. Objetivos
• Fácil diagramação
• Fácil customização por projeto
• Responsive ou fluido
• Boa documentação

53. Framework de
Formulário

59. 30k
downloads

61. DRY CSS
Don’t Repeat Your CSS

62. DRY CSS
• Modularizado
• Facilmente integrado
• Vinculado ao estilo
• Vinculado ao ID
• Lowercase e Uppercase

63. OOCSS
Object oriented cascading style sheet

65. Objected Oriented CSS
• Separação da estrutura e do
estilo
• Criação de elementos globais
• É um processo tácito
• Existe um framework com o
mesmo nome

66. SMACSS
Scalable and Modular Architecture for CSS

68. SMACSS
• Categorização do CSS em: base,
layout, modules, states e theme
• Módulos independentes
• Muito engessado
• Não está aberto

69. BEM
Block Element Modifier

70. BEM
• Módulos independentes
• Muito complexo
• Nomeclatura engessada e falha
(menu__item_state_current)

72. LESS / SASS

74. Aplicações
1. @color, @lnk-color, @active-color, @em-
color, @hover-bg, @active-bg,…
2. @spacing, @spacing-02, @spacing-h,
@spacing-v, .sep, .box-sizing, .clear,…
3. .corner(@radius:
4px), .transition(@transition-type:
all), .sprite(@sprite-h, @sprite-v),…

75. Jeremy Clarke
LESS e SASS criam fantásticos DRY-CSS
1. Foge dos padrões
2. Dependencia de uma biblioteca externa
3. Não é CSS

76. Reutilização sempre

77. Então…

78. 1
Crie um arquivo externo

79. Standards
• Sempre atualizado
• Se um objeto for utilizado em mais
de 2 lugares, transforme-o em um
padrão
• Sempre dê um 360 nos padrões

80. 2
Uma boa nomeclatura vale ouro

81. Harry Roberts
Quebrar em mini classes como se tivesse
pedindo um sanduiche no Subway
#sanduiche
.pao.alface.queijo.tomate.maionese.
Não gosta de tomate, é só remover

82. 3
Envolva sua equipe no processo de padronização

83. 4
Não deixe de inventar coisas

84. http://mzl.la/M0cLQC

85. 5
Prototipe

93. Agora é com vocês! Obrigado! @bernarddeluna