O documento discute a importância da organização do CSS e recomenda utilizar abordagens como OOCSS, SMACSS e BEM para estruturar estilos de forma escalável e modular. O autor apresenta cada técnica, destacando a nomenclatura e a abstração de componentes, além de sugerir diretrizes para otimizar a utilização de pré-processadores como Sass. A conclusão enfatiza que a organização é crucial para evitar problemas em projetos de frontend.

1. SMACSS e CSS
faz BEM!
By Wellington Dutra
Developer

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. Qual a solução?

4. Organizar seu Trabalho Frontend.

5. Como organizar?
Existem algumas técnicas:
OOCSS
DRY CSS
BEM
SMACSS
BEM e SMACSS

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

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.

9. Who the f*ck is BEM?

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

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

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

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

14. BEM - Exemplo
.human {}
.human__head {}
.human__head__eyes {}
.human__head__eyes__eye {}
.human__head__eyes__eye--left {}
.human__head__eyes__eye--right {}

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

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

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

18. BEM - Como usar, na prática | Modificadores
.articles {}
.articles__article--short {}
.articles__article__image--thumb {}
.articles__article__summary--short {}

19. BEM - Como usar, na prática | HTML

20. BEM - Como usar, na prática
Como usar o BEM com SASS?

21. BEM - Como usar, na prática | SASS
.article {
&__article {
&--short {}
&__title {}
&__subtitle {}
&__image }
&--thumb {}
}
&__summary {
&--short {}
}
&__more {}
}
}

22. BEM - Como usar, na prática
É possível facilitar ainda mais!
Como?
Usando @mixins!
xD

23. BEM - Como usar, na prática | @mixin
@mixin element($element) {
&__#{$element} {
@content;
}
}
@mixin modifier($modifier) {
&--#{$modifier} {
@content;
}
}

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

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

26. BEM - Contradição?
RESPEITA! MAIS DO QUE VOCÊ!
#fkdk

27. BEM - CSS compilado.

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

29. A lot of SMACSS!

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

31. SMACSS - Estrutura
Estrutura de diretórios usando SMACSS:

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

33. SMACSS - Estrutura | Diretório base

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

35. SMACSS - Estrutura | Diretório layout

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

37. SMACSS - Estrutura | Diretório modules/components

38. SMACSS - Estrutura | Diretório states
states: Diretório opcional. Estilos referentes aos estados
de cada um de seus componentes. :hover, :active,
disabled, focus…

39. SMACSS - Estrutura | Diretório states

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

41. SMACSS - Estrutura | Diretório utilities
utilities: Diretório opcional. @mixins e @functions

42. SMACSS - Estrutura | Diretório utilities

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

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

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

46. SMACSS - Como compilar tudo num CSS boladão?

47. Conclusão

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

49. Isso é tudo, pessoal!
Amém?!

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