O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

CODE STANDARD: Escrevendo CSS com estilo

323 visualizações

Publicada em

Vamos escrever CSS com estilo? Confira algumas dicas para escrever CSS com qualidade em seus projetos front-end, utilizando code standards como OOCSS, SMACSS e BEM.

Publicada em: Tecnologia
  • Seja o primeiro a comentar

CODE STANDARD: Escrevendo CSS com estilo

  1. 1. CYNTHIA ZANONI cyz.github.io cynthiazanoni cynthiazanoni Ativista Open Source
  2. 2. CSS é fácil. fato?
  3. 3. animation resize background-clip border-image flex align-content background-clip box-shadow transition perspective word-wrap tab-size border-radius opacity justify-content order @media
  4. 4. Caoss.m.(o) Estado de absoluta confusão.
  5. 5. CSS é complexo. fato!
  6. 6. CODE STANDARD Desculpe o transtorno, preciso falar sobre…
  7. 7. A utilização de um padrão de código facilita o processo de desenvolvimento,teste, bugfix e manutenção. CODE STANDARD
  8. 8. A utilização de um padrão de código facilita o processo de desenvolvimento,teste, bugfix e manutenção. CODE STANDARD
  9. 9. METODOLOGIA FRAMEWORKS ou BIBLIOTECAS ≠
  10. 10. Compatibilidade Performance etc…
  11. 11. Crescimento da Audiência Móvel
  12. 12. OOCSS, SMACSS e BEM
  13. 13. Object-Oriented CSS
  14. 14. separação e independência total de elementos. OOCSS e sim, inspirado no paradigma de orientação a objetos.
  15. 15. 1. Separar a estrutura e o skin: não misturar propriedades de estrutura (position, float, margin, …) e estilo (background, color, border…) no mesmo seletor. Nicole Sullivan, 2009. 2. Separar container e conteúdo: o objeto (ou componente) deve ser aplicável em qualquer área.
  16. 16. Estrutura HTML
  17. 17. Estrutura HTML Usar OOCSS não significa que você não possa mais utilizar ID’s.
  18. 18. Estrutura HTML
  19. 19. Estrutura HTML
  20. 20. Considerando o processo de dissociação de elementos, todos já utilizamos OOCSS. Ao menos uma vez.
  21. 21. Style guide consistente Funcionalidades de extensão de estilos de um processador são úteis
  22. 22. } @extend
  23. 23. Scalable and Modular Architecture for CSS
  24. 24. Focusing on creating healthy front-end modules instead of complete pages can help break complex page layouts into reusable solutions. Dave Rupert, 2013.
  25. 25. pequenos pedaços independentes, categorizados e portáveis
  26. 26. Base Layout Module State Theme resets e estilos default.
  27. 27. Base Layout Module State Theme resets e estilos default. grid e componentes principais.
  28. 28. prefix l- ou layout- .l-sidebar .l-footer .l-header .l-col-one .l-col-two
  29. 29. componentes reutilizáveis. Base Layout Module State Theme resets e estilos default. grid e componentes principais.
  30. 30. pequenos pedaços independentes, categorizados e portáveis e.g.: campos de busca, menus, breadcrumbs, etc…
  31. 31. Não é obrigatório o uso de prefixo de nomenclatura Módulos relacionados recebem um prefixo (.box-borda)
  32. 32. componentes reutilizáveis. Base Layout Module State Theme resets e estilos default. grid e componentes principais. estado de um componente. é representado pelo prefixo is
  33. 33. A mudança de state ocorre em: nome da classe: mudança acontece via Javascript. pseudo-class: acontece com elementos que são descendentes ou irmãos do elemento. media query: acontece de acordo com diretrizes definidas por viewport
  34. 34. componentes reutilizáveis. Base Layout Module State Theme resets e estilos default. grid e componentes principais. estado de um componente. camada controladora de um conjunto de estilos.
  35. 35. Estrutura de Arquivos #TIPS
  36. 36. 01. Utilities utilities/_util.scss @import ‘global’; @import ‘functions’; @import ‘mixins’; @import ‘helpers’;
  37. 37. 01. Utilities 02. Libraries libraries/_libs.scss @import ‘font-awesome’; @import ‘pretty-secs’;
  38. 38. base/_base.scss @import ‘normalize’; 01. Utilities 02. Libraries 03. Base
  39. 39. layout/_layout.scss @import ‘grid’; @import ‘header’; 01. Utilities 02. Libraries 03. Base 04. Layout
  40. 40. modules/_modules.scss @import ‘nav’; @import ‘menu’; @import ‘table’; 01. Utilities 02. Libraries 03. Base 04. Layout 05. Modules
  41. 41. states/_states.scss @import ‘states’; @import ‘touch’; 01. Utilities 02. Libraries 03. Base 04. Layout 05. Modules 06. State
  42. 42. Block Element Modifier
  43. 43. The reason I choose BEM over other methodologies comes down to this: it is less confusing than the other methods (i.e. SMACSS) but still provides us the good architecture we want (i.e. OOCSS) and with a recognizable terminology. Mark McDonnell, Maintainable CSS with BEM
  44. 44. Um componente independente e auto-suficiente de uma interface BLOCK
  45. 45. Estrutura HTML
  46. 46. Uma parte interna de um bloco que não pode ser usado fora dela ELEMENT
  47. 47. Estrutura HTML componente__elemento
  48. 48. Uma variação na aparência ou comportamento de um bloco ou um elemento MODIFIER
  49. 49. Estrutura HTML componente__elemento—modifier
  50. 50. Análise é a base de uma boa arquitetura de interface
  51. 51. É possível mesclar os padrões.
  52. 52. Adote processadores
  53. 53. Cuidado com processadores!
  54. 54. 3 milhões de pessoas estão olhando para o seu site, ele está pronto para elas? Mike Taylor, Web Compatibility - a project on behalf of Mozilla
  55. 55. CYNTHIA ZANONI cyz.github.io cynthiazanoni cynthiazanoni OBRIGADX#

×