SMACSS e CSS

faz BEM!

By Wellington DutraDeveloper

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!

Qual a solução?

Organizar seu Trabalho Frontend.

Como organizar?

Existem algumas técnicas:OOCSSDRY CSSBEMSMACSS

BEM e SMACSS

Mas antes, para o seu BEM, conheça a Abstração

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.

Who the f*ck is 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 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;

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

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;

BEM - Exemplo

.human {}

.human__head {}

.human__head__eyes {}

.human__head__eyes__eye {}

.human__head__eyes__eye--left {}

.human__head__eyes__eye--right {}

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 {}

.articles__article--short {}

.articles__article__image--thumb {}

.articles__article__summary--short {}

BEM - Como usar, na prática | HTML

BEM - Como usar, na prática

Como usar o BEM com SASS?

BEM - Como usar, na prática | SASS

.article {&__article {

&--short {}&__title {}&__subtitle {}&__image }

&--thumb {}}&__summary {

&--short {}}&__more {}

}}

BEM - Como usar, na prática

É possível facilitar ainda mais! Como?

Usando @mixins!

xD

BEM - Como usar, na prática | @mixin

@mixin element($element) {&__#{$element} {

@content;}

}

@mixin modifier($modifier) {&--#{$modifier} {

@content;}

}

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) {}

}}

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?

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 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.

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 nete.

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 estrutura de regiões genéricas de uma 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, 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.

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 theme

theme: Diretório opcional. Estilos de fontes e cores. Você pode dividir os temas por pasta. font-family, color, background-color...

SMACSS - Estrutura | Diretório utilities

utilities: Diretório opcional. @mixins e @functions

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;● 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.

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?

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 culpa da falta de organização e padronização dos projetos.

Isso é tudo, pessoal!

Amém?!

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