Transferir como PDF, PPTX
Carregado porWellington Dutra
CSS com SASS e SMACSS faz BEM
O documento discute técnicas de organização de projetos frontend, destacando a metodologia BEM (Block Element Modifier) e SMACSS (Scalable and Modular Architecture for CSS). BEM oferece uma estrutura de nomenclatura que facilita a compreensão e manutenção do código, enquanto SMACSS fornece diretrizes para organizar arquivos e estilos. Ambas as metodologias visam melhorar a eficiência e a escalabilidade de estilos em projetos de desenvolvimento web.
CSS com SASS e SMACSS faz BEM
- 1. By Wellington Dutra WebDeveloper CSS SASS SMACSS BEM! com e faz
- 2. Wellington Dutra | ●Web Developer há 8 anos ● Ativo como backend (PHP, Ruby), mas prefiro frontend ● Apaixonado por CSS e JS ● Não gosto de Twitter, não me procurem por lá!
- 3. CSS pode seruma bagunça! O resultado final quase sempre é... • Não importa o quanto você acha o seu código limpo, organizado; • Se você usa SASS, LESS, PostCSS ou se você acredita em Deus;
- 4.
- 5.
- 6. Organizar seu ProjetoFrontend.
- 7. Como organizar? Existem algumastécnicas: ● OOCSS ● DRY CSS ● BEM ● SMACSS ● Atomic Design
- 8.
- 9. Mas antes, parao seu BEM, conheça a Abstração
- 10. Abstraindo um layoutem 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.
- 18. Who the f*ckis BEM? BEM
- 19. BEM - Oque 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.
- 20. BEM - Benefícios ●Facilita a compreensão da função de um seletor CSS, simplesmente interpretando 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;
- 21. 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. Exemplos .article{...} .slide{...} .box{...}
- 22. BEM - Estrutura.block__element--modifier ● __element é o elemento filho de um componente. Podemos ter mais de um elemento, e ainda elementos dentro de elementos. Exemplos .artigo__titulo{...} .slide__imagem__creditos{...} .box__texto{...}
- 23. BEM - Estrutura.block__element--modifier ● --modifier é uma característica que um elemento ou bloco pode ter que o diferencia do padrão estabelecido. Exemplos .artigo__titulo--destaque{...} .slide__imagem__creditos--topo{...} .box__texto--azul{...}
- 24. 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; Exemplos .artigo__titulo--destaque{...} .slide__imagem__creditos--topo{...} .box__texto--azul{...}
- 25. BEM - Exemplo .head{} .head__eyes {} .head__eyes__eye {} .head__eyes__eye--red {} .head__eyes__eye--green {}
- 26. BEM, sem limites! Nãohá limites para o nome de uma classe, e o equilíbrio depende do nível de abstração que você aplicar ao seu componente.
- 27. BEM - Comousar, 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.
- 28. BEM - Comousar, na prática | Blocos e Elementos .articles {} .articles__article {} .articles__article__title {} .articles__article__subtitle {} .articles__article__image {} .articles__article__summary {} .articles__article__more {}
- 29. BEM - Comousar, na prática | Modificadores .articles--short {} .articles--short__article {} .articles--short__article__image {} .articles--short__article__summary {}
- 30. BEM - Comousar, na prática | HTML
- 31. Parece muita coisapra escrever...
- 32. BEM - Comousar, na prática Como usar o BEM com SASS?
- 33. BEM - Comousar, na prática | SASS .articles { &__article { &__title {} &__subtitle {} &__image {} &__summary {} &__more {} } &--short { &__article { &__title {} &__image {} &__summary {} } } }
- 34. Tá tranquilo, táfavorável...
- 35. BEM - Comousar, na prática É possível facilitar um pouco mais! Como? Usando @mixins!
- 36. BEM - Comousar, na prática | @mixin @mixin element($element) { &__#{$element} { @content; } } @mixin modifier($modifier) { &--#{$modifier} { @content; } }
- 37. BEM - Comousar, na prática | @mixin .articles { @include element(article) { @include element(title) {} @include element(subtitle) {} @include element(image) {} @include element(summary) {} @include element(more) {} } @include modifier(short) { @include element(article) { @include element(title) {} @include element(image) {} @include element(summary) {} } } }
- 38. BEM - Contradição? Mase quanto a esses seletores profundamente aninhados? Esse sujeito de BEM não respeita a regra de especificidade máxima de 3 níveis para um seletor CSS?
- 39. BEM - Contradição? RESPEITA!MAIS DO QUE VOCÊ! #fkdk
- 40. BEM - CSScompilado.
- 41. 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.
- 42. A lot ofSMACSS!
- 43. SMACSS - Smacks?!<3 ● Scalable and Modular Architecture for CSS não é um framework, nem uma biblioteca, mas sim um guia para estruturar 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.
- 44. SMACSS - Estrutura Estruturade diretórios usando SMACSS:
- 45. 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 aqui.
- 46. SMACSS - Estrutura| Diretório base
- 47. SMACSS - Estrutura| Diretório layout layout: Estilos relacionados a estrutura de templates, por exemplo, um sistema de grid, estilos de regiões genéricas da página, como .header, .footer, .articles, .secondary- articles, .wrapper, .sidebar.
- 48. SMACSS - Estrutura| Diretório layout
- 49. SMACSS - Estrutura| Diretório modules/components modules/components: ● Subdiretórios podem ser definidos para separar cada componente; ● Depende do nível de abstração que você aplicar. Quanto mais complexo o componente, mais sentido faz usar subdiretórios para dividí-lo em partes.
- 50. SMACSS - Estrutura| Diretório modules/components
- 51. SMACSS - Estrutura| Diretório states states: Diretório opcional. Estilos referentes aos estados de cada um de seus componentes. :hover, :active, disabled, focus…
- 52. SMACSS - Estrutura| Diretório states
- 53. SMACSS - Estrutura| Diretório themes themes: Diretório opcional. Estilos de fontes e cores. Você pode dividir os temas por pasta.
- 54. SMACSS - Estrutura| Diretório themes
- 55. SMACSS - Estrutura| Diretório utilities utilities: Diretório opcional. @mixins, @functions e @extends
- 56. SMACSS - Estrutura| Diretório utilities
- 57. 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
- 58. SMACSS - Comocompilar 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; ● Uma das desvantagens é 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.
- 59. SMACSS - Comocompilar 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.
- 60. SMACSS - Comocompilar tudo num CSS boladão?
- 61. Get started BEM,SMACSS and SASS Exemplo no Github Link da palestra CSS com SASS e SMACSS faz BEM
- 62.
- 63. Organizar para agilizar! Organizaçãoé a chave para evitar problemas graves em projetos de Frontend. A maioria dos BUGs gerados são por falta de organização e padronização dos projetos.
- 64. Isso é tudo,pessoal!
- 65.