CSS: Boas práticas e metodologias

Palestra sobre boas práticas e metodologias utilizadas no desenvolvimento CSS.

Apresentada no DevInCompany | http://devincompany.org/ em Belo Horizonte.

Transcript

1. CSS Boas práticas & Metodologias DevInCompany, Belo Horizonte, 30 Novembro 2013
2. Carolina Bigonha carolinabigonha@gmail.com | @carolinabigonha zahpee.com | @zahpee
3. por que se preocupar?
4. Manutenção Escalabilidade Desempenho
5. "CSS doesn't suck. You're just doing it wrong!"
6. um minuto de revisão
7. Tudo | regra p | seletor color: #663; | declaração font-size | propriedade 16px | valor
8. .list-item | key selector ou seletor chave
9. Há quatro categorias de regras: #main | regras de ID .box | regras de classe a | regras de tag * | regras universais
10. vamos às boas práticas
11. 1 prefira classes a ids
12. IDs são únicos em uma página. O estilo dos seus elementos, não.
13. 2 não super-qualifique regras com tags
14. Nem regras de id, nem regras de classe. IDs são naturalmente únicos. Qualificá-los com tags afeta a performance. E se o HTML mudar? Estrutura x estilo NO NO OK
15. 3 reduza a especificidade
17. http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
21. 4 evite hierarquia com tags
22. Browsers interpretam seletores da direita para a esquerda. Procura por todos os elementos a do DOM e verifica qual deles possui pai #home. NO
23. O uso de hierarquia nos seletores pode afetar a performance. Principalmente se houver hierarquia em regras de tag. Seja objetivo. As regras de classe mais específicas são mais rápidas de serem processadas. NO OK
24. 5 evite regras de parentesco
25. Tenha cuidado ao utilizar parentesco. Seletores descendentes são de longe os mais caros de serem calculados no CSS. Principalmente para regras universais e de tags. NO AVOID
26. 6 regras devem ter significado semântico
27. Crie regras que façam sentido. O estilo não deve ser afetado por mudanças mínimas no DOM. NO OK
28. Bons nomes não mudam. Os nomes das classes não devem ser afetados pelo seu conteúdo. NO WAY NO
30. 7 utilize uma nomenclatura consistente
31. Utilize somente hífen. Ou somente underline. Tenha um padrão para os elementos. OK NO
32. 8 separe estilo de comportamento
33. Usar nomenclatura específica para classes atreladas a comportamento Javascript. O uso do prefixo js- reduz risco de quebra quando há mudanças. Uma classe com o prefixo js- jamais deve estar dentre os estilos CSS. Regras de classe compartilhadas entre CSS e Javascript devem ter o prefixo is-.
34. 9 ao consertar, remova antes de adicionar
36. 10 não utilize números mágicos
37. Eles provavelmente não fazem sentido. O famoso top:3px que vai resolver o problema no Chrome e estragar em todos os outros browsers. NO
38. * documente documente documente
39. Você não está sozinho. Algum dia alguém vai tentar entender seu código. Algum dia você vai tentar entender seu código.
40. algumas estradas já foram pavimentadas
41. Guias de estilo
42. https://github.com/styleguide/css
43. http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
44. http://make.wordpress.org/core/handbook/coding-standards/css/
45. Escolha um para seu time! Ou documente o seu próprio guia de estilo.
46. Metodologias
47. don't repeat yourself DRY CSS
48. Jeremy Clarke http://vimeo.com/38063798 http://www.slideshare.net/jeremyclarke/wordcamp-nyc-dry-css
49. Single source of truth Andy Hunt e Dave Thomas,The Pragmatic Programmer, 1999 Cada peça de conhecimento deve ter uma única definição em um sistema Uma mudança na regra afeta todo o sistema Não há necessidade de réplica Jeremy Clarke, DRY CSS
50. i mantenha estilo e conteúdo separados
51. ii evite especificidade
52. exemplo como aplicar
53. Agrupe propriedades reusáveis Por exemplo, agrupe estilos de fundo e borda.
54. Dê nomes lógicos aos grupos Uma dica seria utilizar ID e classe com mesmo nome para delimitar os seletores.
55. Adicione seletores aos vários grupos Para cada grupo de regras, você adiciona os elementos que possuem tais características.
56. the good a parte boa
57. Melhoria na performance arquivos de estilo bem menores. Mudanças no estilo não acarretam mudanças no HTML.
58. the bad and the ugly a parte ruim
59. Algumas classes irão aparecer inúmeras vezes no CSS. Difícil de manter. Legibilidade complicada.
60. object oriented CSS OOCSS
61. Nicole Sullivan https://github.com/stubbornella/oocss/wiki http://www.slideshare.net/stubbornella/object-oriented-css
62. i separe estrutura e aparência
63. Defina itens visuais repetíveis: crie aparências "separadas", que formarão os diversos objetos. Objeto modular + sua aparência. Dê nome aos objetos utilizando classes e não apenas utilizando a semântica do HTML.
64. Defina itens visuais repetíveis: crie aparências "separadas", que formarão os diversos objetos. Objeto modular + sua aparência. Dê nome aos objetos utilizando classes e não apenas utilizando a semântica do HTML.
65. ii separe o envólucro do conteúdo
66. Um objeto deve aparecer da mesma maneira não importa onde ele for colocado. Todos os <h2> vão ter a mesma aparência. Todos os elementos com a classe . category vão ter a mesma aparência. Para que .my-object h2 fique com a aparência padrão, não há necessidade de sobrescrever estilo. NO OK
67. * crie uma biblioteca de componentes
68. Componentes genéricos headings | listas | headers | footers | grids | botões Componentes selecionados HTML: composição de componentes.
69. exemplo como aplicar
70. Há itens visuais que podem ser generalizados. NO
71. Há itens visuais que podem ser generalizados. Objeto modular + sua aparência. OK
72. the good a parte boa
73. Melhorias na performance arquivos de estilo significativamente menores "Freebies", o código CSS já está lá Organização, reúso. Fácil manutenção dos módulos.
74. the bad and the ugly a parte ruim
75. O HTML pode ficar "sobrecarregado".
76. scalable and modular architecture for CSS SMACSS
77. Jonathan Snook http://smacss.com http://vimeo.com/61755493
78. i aumentar o valor semântico de uma seção do HTML e do conteúdo
79. diminuir a espectativa de uma estrutura específica ii
80. Organização; Categorização.
81. Base . Layout . Module . Theme . State
82. BASE A configuração default do projeto. Estilo para tags. Toda vez que tal elemento aparecer, ele terá esse aspecto.
83. LAYOUT Grandes componentes de uma página. Geralmente um único seletor. Podem ser afetados por outros fatores. Nomenclatura: l-, layout- ou grid-
84. MODULE Pequenos componentes de uma página Devem funcionar bem independente do envólucro.
85. Subclassing MODULE O mesmo módulo pode estar em vários locais. A primeira intuição é especificar o pai.
86. Subclassing MODULE O mesmo módulo pode estar em vários locais. A primeira intuição é especificar o pai. Se houver muitas variações do módulo, começa a batalha da especificidade. NO NO
87. Subclassing MODULE Diferenciar o que é padrão e o que seria uma sub-classe. No HTML, se aplica tanto a classe base quanto a sub-classe. OK
88. STATE Regras de estado podem ser aplicadas a layout e a module. Indicam uma dependência Javascript Há estados genéricos ou particulares a um módulo.
89. STATE Estados podem mudar em três sentidos: Class-name Pseudo-class Media query
90. STATE Estados podem mudar em três sentidos: Class-name Pseudo-class Media query
91. STATE Estados podem mudar em três sentidos: Class-name Pseudo-class Media query - mesma media query pode ser declarada múltiplas vezes para que a noção de módulo não seja perdida.
92. THEME Define o tema visual. Idealmente, em um arquivo separado, facilita a troca do esquema de cores. Afeta base, modules e state.
93. the good a parte boa
94. Reuso de código; Fácil manutenção dos módulos (objetivos claros); Organização.
95. the bad and the ugly a parte ruim
96. A categorização pode não ser trivial em um primeiro momento. O que é module e o que é layout? Complexo? HTML pode ficar sobrecarregado.
97. TL;DR
98. Manutenção Escalabilidade Desempenho
99. Planejamento Simplicidade Convenções
100. Carolina Bigonha @carolinabigonha | carolinabigonha@gmail.com Obrigada
101. Imagens | CreativeCommons Lego | http://www.flickr.com/photos/chefgue/844400583/sizes/o/ Livros | http://www.flickr.com/photos/hashir/936394705/sizes/l/ Orquestra | http://www.flickr.com/photos/ewang0692/6919870763/sizes/l/ Estrada | http://www.flickr.com/photos/mkrigsman/2852232536/sizes/l/ Cachorro | http://www.flickr.com/photos/byakuchan/4768113295/sizes/l/