Arquitetura CSSOOCSS + SMACSS + BEM

Meet Up Front-end CampinasMeet up Front-end Campinas #6

Introdução

● Apresentação Pessoal

● Padrões CSS

● OOCSS

● SMACSS

● BEM

● Caso prático

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

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

Padrões CSSPor que precisamos

deles?

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

OOCSS - Object Oriented CSS

Existem dois princípios fundamentais

OOCSS - 1º princípio - Estrutura

OOCSS - 1° princípio - Visual

OOCSS - exemplo

OOCSS - exemplo - Estrutura

OOCSS - exemplo - Marcação/HTML

OOCSS - exemplo - Diversas Versões

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

OOCSS - exemplo - Contexto x Conteúdo

.sidebar h2 { … } <h2 class=”pt-sans-bold”></h2>

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

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.

SMACSS - estruturaO 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

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.

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

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

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

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;

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.

BEM - bloco

... deve ser único

.block { … }

Exemplo: header, footer, sidebar, content...

BEM - elemento

... o bloco é o todo e os elementos são as partes

.block__element { ... }

.block .block__elem { ... }

div.block__elem { ... }

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>

BEM - exemplo

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>

BEM - exemplo

.menu { … }

.menu__item { … }

.menu__item--active { … }