css com sass e smacss faz bem
TRANSCRIPT
By Wellington DutraWeb Developer
CSSSASSSMACSSBEM!
come
faz
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á!
CSS pode ser uma 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;
… uma bagunça
Qual a solução?
Organizar seu Projeto Frontend.
Como organizar?
Existem algumas técnicas:● OOCSS● DRY CSS● BEM● SMACSS● Atomic Design
BEM e SMACSS
Mas antes, para o seu BEM, conheça a Abstração
Abstraindo um 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.
Who the f*ck is BEM?
BEM
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.
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;
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{...}
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{...}
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{...}
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{...}
BEM - Exemplo
.head {}
.head__eyes {}
.head__eyes__eye {}
.head__eyes__eye--red {}
.head__eyes__eye--green {}
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.
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.
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 {}
BEM - Como usar, na prática | Modificadores
.articles--short {}
.articles--short__article {}
.articles--short__article__image {}
.articles--short__article__summary {}
BEM - Como usar, na prática | HTML
Parece muita coisa pra escrever...
BEM - Como usar, na prática
Como usar o BEM com SASS?
BEM - Como usar, na prática | SASS.articles { &__article { &__title {} &__subtitle {} &__image {} &__summary {} &__more {} } &--short { &__article { &__title {} &__image {} &__summary {} } }}
Tá tranquilo, tá favorável...
BEM - Como usar, na prática
É possível facilitar um pouco mais! Como?
Usando @mixins!
BEM - Como usar, na prática | @mixin
@mixin element($element) {&__#{$element} {
@content;}
}
@mixin modifier($modifier) {&--#{$modifier} {
@content;}
}
BEM - Como usar, 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) {}
}}
}
BEM - Contradição?
Mas e 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?
BEM - Contradição?
RESPEITA! MAIS DO QUE VOCÊ!#fkdk
BEM - CSS compilado.
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.
A lot of SMACSS!
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.
SMACSS - Estrutura
Estrutura de diretórios usando SMACSS:
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.
SMACSS - Estrutura | Diretório base
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.
SMACSS - Estrutura | Diretório layout
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.
SMACSS - Estrutura | Diretório modules/components
SMACSS - Estrutura | Diretório states
states: Diretório opcional. Estilos referentes aos estados de cada um de seus componentes. :hover, :active, disabled, focus…
SMACSS - Estrutura | Diretório states
SMACSS - Estrutura | Diretório themes
themes: Diretório opcional. Estilos de fontes e cores. Você pode dividir os temas por pasta.
SMACSS - Estrutura | Diretório themes
SMACSS - Estrutura | Diretório utilities
utilities: Diretório opcional.
@mixins, @functions e @extends
SMACSS - Estrutura | Diretório utilities
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
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;● 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.
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.
SMACSS - Como compilar tudo num CSS boladão?
Get started BEM, SMACSS and SASS
Exemplo no Github
Link da palestra
CSS com SASS e SMACSS faz BEM
Conclusão
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.
Isso é tudo, pessoal!
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
