Arquitetura e boas práticas de CSS 2.0

Transcript

1. Arquitetura e boas práticas de CSS Glauber Ramos
2. Agenda Metodologias Dicas Ferramentas
3. METODOLOGIAS
9. Nomenclatura SUIT
10. DICAS
11. USAR NOMES SEMÂNTICOS .three-of-eight .button-blue .container .button-primary Estilo para CSS, função para HTML BAD GOOD
12. TAGS SEMÂNTICAS .component { .link { } } .component { a { } } BAD GOOD
13. .component { .component-child { a { } } } NESTING Não mais que 3 níveis .component { } .component-child { a { } } BAD GOOD
14. NÃO USAR ID'S #submit-button { } .primary-button { } BAD GOOD
16. Z-INDEX .primary-button { z-index: 9999; } .primary-button { z-index: 10; } Valores entre 0 e 20 BAD GOOD
18. CUIDAR O CSS GERADO
19. FERRAMENTAS
21. FLEXBOX VS GRIDS
27. PARKER
28. Melhorias https://github.com/aceleradora-TW/HemoHeroes Arquivos vazios: 3 (donators.scss, users.scss, demand_blood_banks.scss) Cores: 17 cores diferentes Importants: 275
29. LInks https://github.com/sotayamashita/awesome-css#code-style-guideline-book https://github.com/airbnb/css https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06#.ehy9y3gut https://hackernoon.com/css-at-bbc-sport-part-1-bab546184e66#.p5ix83wv1 https://medium.com/javascript-and-opinions/state-of-the-art-javascript-in-2016-ab67fc68eb0b #.363ylsknl http://markdotto.com/2014/07/23/githubs-css/ http://ianfeather.co.uk/css-at-lonely-planet/ https://github.com/suitcss/suit https://www.sitepoint.com/bem-smacss-advice-from-developers/ http://www.hongkiat.com/blog/css-writing-methodologies/ http://sixrevisions.com/css/css-methodologies/ http://maintainablecss.com/ http://www.universalmind.com/blog/css-modules%E2%80%8A-%E2%80%8Asolving-the-challenges-of-c ss-at-scale/ http://thesassway.com/advanced/modular-css-naming-conventions http://acss.io/ smacss.com/book/ https://github.com/jareware/css-architecture