Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Arquitetura e boas práticas de CSS 2.0

Arquitetura e boas práticas de CSS 2.0

5716ab9479c715eecc6a9a7f2139da75?s=128

Glauber Ramos

November 01, 2016
Tweet

Transcript

  1. Arquitetura e boas práticas de CSS Glauber Ramos

  2. Agenda Metodologias Dicas Ferramentas

  3. METODOLOGIAS

  4. None
  5. None
  6. None
  7. None
  8. None
  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
  15. None
  16. Z-INDEX .primary-button { z-index: 9999; } .primary-button { z-index: 10;

    } Valores entre 0 e 20 BAD GOOD
  17. None
  18. CUIDAR O CSS GERADO

  19. FERRAMENTAS

  20. None
  21. FLEXBOX VS GRIDS

  22. None
  23. None
  24. None
  25. None
  26. None
  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
  30. None