Smacss e-css-faz-bem

2.378 visualizações

Publicada em

SMACSS e CSS faz BEM, muito BEM! Veja como trabalhar melhor com o seu front-end. Como organizar, como usar padrões e como ser feliz e fazer o BEM usando SMACSS.

Publicada em: Software
0 comentários
10 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
2.378
No SlideShare
0
A partir de incorporações
0
Número de incorporações
889
Ações
Compartilhamentos
0
Downloads
22
Comentários
0
Gostaram
10
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Smacss e-css-faz-bem

  1. 1. SMACSS e CSS faz BEM! By Wellington Dutra Developer
  2. 2. CSS é uma bagunça! Não importa o quanto você acha que o seu CSS é limpo, organizado e comentado; se você usa pré-processadores (SASS, LESS) ou se você acredita em Deus. O resultado final sempre é uma bagunça. Admita!
  3. 3. Qual a solução?
  4. 4. Organizar seu Trabalho Frontend.
  5. 5. Como organizar? Existem algumas técnicas: OOCSS DRY CSS BEM SMACSS BEM e SMACSS
  6. 6. Mas antes, para o seu BEM, conheça a Abstração
  7. 7. Abstrair o layout em componentes/módulos ● Não levar em conta a página como um todo; ● Encontrar padrões de design e disposição de elementos; ● Aplicar estilos orientados a componentes.
  8. 8. Who the f*ck is BEM?
  9. 9. BEM - O que significa? De onde vem? Block Element Modifier é um padrão de nomenclatura para seletores CSS, criado pelos caras da Yandex, uma empresa de internet famosa na Europa.
  10. 10. BEM - Benefícios ● Facilita a compreensão da função de um determinado seletor CSS, simplesmente analisando o nome desse seletor; ● Ótimo para quem trabalha em times; ● Manutenção facilitada, mesmo depois de muito tempo sem contato com o código; ● Pequenas mudanças não alteram o que já está implementando, diminuindo a chance de BUGs;
  11. 11. BEM - Estrutura .block__element--modifier ● .block é o nível de abstração mais alto de um componente. O que podemos entender como o container, wrapper. É a classe pai de um componente. Ex.: .artigo, .slider; ● __element é o elemento filho de um componente. Podemos ter mais de um elemento, e ainda elementos dentro de elementos. Ex.: .artigo__titulo, .artigo__imagem__creditos; ● --modifier é uma característica que um elemento ou bloco pode ter que o diferencia do padrão. Ex.: .artigo--destacado, .artigo__imagem--thumb
  12. 12. BEM - Estrutura .block__element--modifier ● __ Dois underscores são usados para separar a classe pai de seus elementos filho; ● -- Dois hífens são usados para separar a classe pai ou um elemento filho de um modificador;
  13. 13. BEM - Exemplo .human {} .human__head {} .human__head__eyes {} .human__head__eyes__eye {} .human__head__eyes__eye--left {} .human__head__eyes__eye--right {}
  14. 14. BEM, sem limites! Não há limites para o nome de uma classe, e o equilíbrio depende do nível de abstração que você aplicar ao seu componente.
  15. 15. BEM - Como usar, na prática Após a abstração dos componentes de um layout, o próximo passo é criar a marcação e as classes: ● Quanto mais abstração, melhor; ● Quanto mais independente for o componente do contexto em que está, melhor; Essas regras são essenciais, pois o componente pode ser reutilizado em qualquer contexto com pouca ou nenhuma modificação de estrutura.
  16. 16. BEM - Como usar, na prática | Blocos e Elementos .articles {} .articles__article {} .articles__article__title {} .articles__article__subtitle {} .articles__article__image {} .articles__article__summary {} .articles__article__more {}
  17. 17. BEM - Como usar, na prática | Modificadores .articles {} .articles__article--short {} .articles__article__image--thumb {} .articles__article__summary--short {}
  18. 18. BEM - Como usar, na prática | HTML
  19. 19. BEM - Como usar, na prática Como usar o BEM com SASS?
  20. 20. BEM - Como usar, na prática | SASS .article { &__article { &--short {} &__title {} &__subtitle {} &__image } &--thumb {} } &__summary { &--short {} } &__more {} } }
  21. 21. BEM - Como usar, na prática É possível facilitar ainda mais! Como? Usando @mixins! xD
  22. 22. BEM - Como usar, na prática | @mixin @mixin element($element) { &__#{$element} { @content; } } @mixin modifier($modifier) { &--#{$modifier} { @content; } }
  23. 23. BEM - Como usar, na prática | @mixin .article { @include element(article) { @include modifier(short) {} @include element(title) {} @include element(subtitle) {} @include element(image) { @include modifier(thumb) {} } @include element(summary) { @include modifier(short) {} } @include element(more) {} } }
  24. 24. BEM - Contradição? Mas e quanto a esses seletores profundamente aninhados no padrão BEM? Esse sujeito não respeita a regra de especificidade máxima de 3 níveis para um seletor CSS?
  25. 25. BEM - Contradição? RESPEITA! MAIS DO QUE VOCÊ! #fkdk
  26. 26. BEM - CSS compilado.
  27. 27. BEM - Conclusão BEM é a melhor forma de estruturar componentes e estilos. É flexível, de fácil entendimento e sua implementação não é complexa.
  28. 28. A lot of SMACSS!
  29. 29. SMACSS - Smacks?! <3 Scalable and Modular Architecture for CSS não é um framework, nem uma biblioteca, mas sim um guia para estruturar seus estilos de maneira inteligente e escalonável. Não importa o tamanho do projeto, esse padrão de organização combinado com o BEM pode facilitar e agilizar ainda mais o desenvolvimento e manutenção do seu código.
  30. 30. SMACSS - Estrutura Estrutura de diretórios usando SMACSS:
  31. 31. SMACSS - Estrutura | Diretório base base: Neste diretório, são colocados os arquivos com os estilos para elementos base, por exemplo: body, p, a, ul, span. Arquivos de CSS reset também devem ser colocados nete.
  32. 32. SMACSS - Estrutura | Diretório base
  33. 33. SMACSS - Estrutura | Diretório layout layout: Estilos relacionados a estrutura de templates, por exemplo, um sistema de grid, estilos de estrutura de regiões genéricas de uma página, como .header, .footer, . articles, .secondary-articles, .wrapper, .sidebar.
  34. 34. SMACSS - Estrutura | Diretório layout
  35. 35. SMACSS - Estrutura | Diretório modules/components modules/components: Subdiretórios podem ser definidos para separar cada componente, por exemplo: dentro do diretório article, podemos abstrair ainda mais os elementos e criar uma _partial para cada um deles. Isso depende do nível de abstração que você aplicar. Quanto mais complexo o componente, mais sentido faz usar subdiretórios.
  36. 36. SMACSS - Estrutura | Diretório modules/components
  37. 37. SMACSS - Estrutura | Diretório states states: Diretório opcional. Estilos referentes aos estados de cada um de seus componentes. :hover, :active, disabled, focus…
  38. 38. SMACSS - Estrutura | Diretório states
  39. 39. SMACSS - Estrutura | Diretório theme theme: Diretório opcional. Estilos de fontes e cores. Você pode dividir os temas por pasta. font-family, color, background-color...
  40. 40. SMACSS - Estrutura | Diretório utilities utilities: Diretório opcional. @mixins e @functions
  41. 41. SMACSS - Estrutura | Diretório utilities
  42. 42. SMACSS - Estrutura | Diretório shame shame: Diretório opcional. Hacks para o IE, !important e coisas vergonhosas que temos que fazer de vez enquando. xD
  43. 43. SMACSS - Como compilar tudo num CSS boladão? Usando uma ruby gem chamada sass-globbing ● Na raiz do seu diretório sass, crie um arquivo .scss que importará os arquivos de todas as pastas criadas seguindo o modelo do SMACSS; ● A desvantagem é o tempo que a compilação pode levar, dependendo da quantidade de arquivos. São segundos, mas se você usa livereload, vai sentir a diferença.
  44. 44. SMACSS - Como compilar tudo num CSS boladão? Usando arquivos de índice: ● Dentro de cada um dos diretórios definidos seguindo o SMACSS, crie uma _partial chamada _index.scss, e nesse arquivo, importe todos as outras _partials onde se encontra; ● Na raiz do diretório sass, crie um arquivo styles.scss e importe todos as parciais _index.scss de cada um dos diretórios.
  45. 45. SMACSS - Como compilar tudo num CSS boladão?
  46. 46. Conclusão
  47. 47. Organizar para agilizar! Organização é a chave para evitar problemas graves em projetos de Frontend. A maioria dos BUGs gerados são por culpa da falta de organização e padronização dos projetos.
  48. 48. Isso é tudo, pessoal! Amém?!
  49. 49. Follow us www.justdigital.com.br blog.justdigital.com.br instagram.com/justdigitalbr facebook.com/eusigoajust slideshare.com/justdigital @justdigital youtube.com/justdigitalbr follow.justdigital.com.br flickr.com/.justdigital

×