O documento resume três padrões de arquitetura CSS - OOCSS, SMACSS e BEM. OOCSS foca em separar estrutura e apresentação, SMACSS organiza CSS em módulos para reutilização e manutenção, e BEM nomeia classes de forma consistente para componentes reutilizáveis.

1. Arquitetura CSS
OOCSS + SMACSS + BEM
Meet Up Front-end Campinas
Meet up Front-end Campinas #6

2. Introdução
● Apresentação Pessoal
● Padrões CSS
● OOCSS
● SMACSS
● BEM
● Caso prático

3. Danielle Soldera
● 34 anos
● Programadora Front-end na CI&T há 05 anos
● Adoro participar de Congressos, Dojos e Meetups
● Hobbies:
○ Práticar Yoga e Meditação
○ Programas Culturais
○ Viajar

4. Patrícia Silva
● 29 anos
● Desenvolvedora full-stack na MATERA há 2,5 anos
● Apaixonada por boas práticas / adoro aprender novas tecnologias
● Hobbies:
○ Acampar
○ “Rolê” de moto
○ Games

5. Padrões CSS
Por que precisamos
deles?

6. ● Nos ajudam a escrever melhores códigos,
utilizando práticas aprovadas;
● Fornecem um nível de abstração, ajudando na
hora de resolver um problema (deixando de lado
detalhes);
● Melhoram a comunicação, fornecendo um
vocabulário comum entre os desenvolvedores;

7. OOCSS - Object Oriented CSS
Existem dois princípios fundamentais

8. OOCSS - 1º princípio - Estrutura

9. OOCSS - 1° princípio - Visual

10. OOCSS - exemplo

11. OOCSS - exemplo - Estrutura

12. OOCSS - exemplo - Marcação/HTML

13. OOCSS - exemplo - Diversas Versões

14. OOCSS - 2º princípio - Contexto x Conteúdo

15. OOCSS - exemplo - Contexto x Conteúdo
.sidebar h2 { … } <h2 class=”pt-sans-bold”></h2>

16. SMACSS
É um sistema Modular de CSS, que auxilia a deixar seu código
mais Flexivel, Escalável e Fácil de dar manutenção. Parte da
idéia de quebrar o CSS em partes pequenas, que sejam
Independientes entre sí, para que seu reuso seja possível.
O SMACSS não é um Framework. Como seu autor mesmo diz é
um Style Guide, é uma forma de pensar, de olhar para o Layout e
decidir como criar e estruturar divisão do seu CÓDIGO CSS.
Foi criado por Jonathan Snook's. Possui um livro que pode ser
encontrado no endereço http://shop.smacss.com/ e se quiser
saber mais idéia do autor http://snook.ca

17. SMACSS - Objetivo
O objetivo do SMACSS, como em outros exemplos de Arquitetura CSS, não é de
enrijecer a forma de construir o código, dizendo exatamente como deve ser
feito. Mas de auxiliar na forma como devemos organizar o código, de forma
que ele possa crescer de forma escalável e fácil continuação/manutenção.
Organizando os seu CSS em pastas, com propósito cada Pasta, fará com que a
localização de código, arquivos e componentes se dê de forma mais rápida e
global.
Tanto o SMACSS quanto o BEM são baseados Princípio
do DRY - Don't Repeat Yourself.

18. SMACSS - estrutura
O SMACSS segue a seguinte estrutura de pastas:
● Base: Nesse 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 nessa estrutura. Classes para WYSIWYG
e CKEditor também.
● Layout: Estilos relacionados a estrutura de templates, por exemplos,
sistema de grid, estilos de estrutura de regiões genéricas de uma
página, como .header, .footer, .articles, .wrapper e .sidebar.
Layout

19. SMACSS - estrutura
● Modules/Components: podemos definir components como pedaços individuais de HTML.
Para conseguirmos criar componentes modulares devemos pensar em criar-los consistentes
de forma que, não importando aonde for colocado na página, ele sempre será igual. Por
exemplo, com search block.
O Component poderá ter subdiretório (submódulos). Quanto mais complexo o componente,
mais sentido fazer usar subdiretórios.

20. SMACSS - estrutura
● State: Estilos referentes ao estados de cada um de seus
componentes., .is-active, .is-disabled.
● Theme: Usar para organizar estilos referentes ao tema como fontes,
cores, sprites e outros.
Outros diretórios que não constam na documentação oficial mas é
interessante ter:
● Utilities: Nesse diretório serão inseridos as @variables, os @mixins e
@functions
State

21. SMACSS - Pontos Positivos
● Modular
● Reaproveitamento de código (Diga adeus aquele monte de código
duplicado que fazia a mesma coisa.)
● CSS Escalavél
● Organização
● Ganho de produtividade

22. SMACSS - Pontos de Atenção
● Componentes extensos (má abstração)
● Nomes Genéricos dos Componentes
● Pequenos componentes
● Não estilizar TAGs
● Novo Módulo X SubMódulo

23. BEM - Block Element Modifier
O que queremos?
● Um código padronizado e impessoal;
● Um código familiar para a equipe;
● Um código que o time entende e escreve mais rápido;
● Um código legível;
● Um código sustentável ao longo do tempo;

24. BEM - Block Element Modifier
…basicamente a ideia gira em torno desses três pilares:
● Bloco: é relativo a um componente.
● Elemento: parte de um bloco, este não existe sozinho, ele(s) são
semanticamente ligados ao seu bloco.
● Modificador: Use-o para alterar a aparência ou comportamento de um
dos dois itens anteriores.

25. BEM - bloco
... deve ser único
.block { … }
Exemplo: header, footer, sidebar, content...

26. BEM - elemento
... o bloco é o todo e os elementos são as partes
.block__element { ... }
.block .block__elem { ... }
div.block__elem { ... }

27. BEM - modificador
... pode ser usado no bloco e no elemento
.block--modifier { ... }
.block__element--modifier { … }
<div class="block block--modifier">...</div>
<div class="block block--size-big block--shadow-yes">...</div>

28. BEM - exemplo

29. BEM - exemplo
<ul class="menu">
<li class="menu__item">Tab 1</li>
<li class="menu__item">Tab 2</li>
<li class="menu__item menu__item--active">Tab 3</li>
<li class="menu__item">Tab 3</li>
</ul>

30. BEM - exemplo
.menu { … }
.menu__item { … }
.menu__item--active { … }