arquitetura css - smacss + oocs + bem
TRANSCRIPT
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 { … }