Arquitetura CSS

ARQUITETURA CSS
@rafaelrinaldi

ⓞ https://magnetis.com.br
Estamos contratando!

ⓞ https://sp.femug.com
FEMUG

Não vou utilizar o gif to Peter Griffin durante a palestra!
peter_griffin_css.gif

Desenvolver interfaces para a web é muito mais do que um
problema exclusivo do CSS

Conteúdo
Apresentação (e agora também animações)
Comportamento e interações mais complexas
ⓞ http://alistapart.com/article/understandingprogressiveenhancement

CSS funciona. Poderia ser muito pior!

Técnicas ≠ Frameworks / Bibliotecas

OOCSS
ⓞ https://github.com/stubbornella/oocss/wiki

Object Oriented CSS
ⓞ https://github.com/stubbornella/oocss/wiki

Influenciado pelo paradigma da orientação a objetos
Técnicas → OOCSS

CSS “object”
Técnicas → OOCSS

Padrão visual que se repete
e que pode ser abstraído em um contexto próprio
Técnicas → OOCSS

Separar estrutura de marcação de variações visuais
Técnicas → OOCSS

Separar o conteúdo seu contexto
Técnicas → OOCSS

Scalable and Modular Architecture for CSS
ⓞ http://smacss.com

Feito para resolver problemas específicos do Yahoo! Mail
Técnicas → SMACSS

›❯ Base;
›❯ Layout;
›❯ Module;
›❯ State;
›❯ Theme.
Técnicas → SMACSS

SMACSS → Base
Técnicas → SMACSS → Base

Regras padrão de estilo

html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
background: #bada55;
}
input[type=text] {
border: 2px solid #444;
}

SMACSS → Layout
Técnicas → SMACSS → Layout

›❯ Utilizado por elementos fixos da aplicação;
›❯ Seletor único, não reutilizável;
›❯ Variações são representadas por classes com o prefixo l .

#header {
font-size: 2em;
color: fuchsia;
width: 100%;
height: 15em;
line-height: 1.5; /* dica: não precisa especificar unidade aqui */
}
#sidebar {
font-size: .75em;
color: gray;
float: right;
}
.l-inverse #sidebar {
float: left;
}

SMACSS → Modules
Técnicas → SMACSS → Modules

›❯ Trechos de código reutilizáveis;
›❯ Partes modulares do design;
›❯ Padrões.
Técnicas → SMACSS → Modules

SMACSS → State
Técnicas → SMACSS → State

›❯ Como os módulos irão se apresentar em estados específicos;
›❯ Representado por classes com o prefixo is .

.sidebar.is-expanded {
opacity: 1;
}
.button.is-disabled {
cursor: not-allowed;
background: lightgray;
opacity: .75;
pointer-events: none; /* capeta */
}

SMACSS → Theme
Técnicas → SMACSS → Theme

Utilizado apenas em aplicações que possuem
opções de variação visual

/* No arquivo do componente botão */
.button {
border: 1px solid;
}
/* No arquivo de tema do botão */
.button {
border-color: fuchsia;
background: seagreen;
font-family: 'Ubuntu Mono', monospace;
}

Block Element Modifier
ⓞ http://bem.info

Feito para resolver problemas específicos do Yandex
Técnicas → BEM

›❯ Facilitar a manutenção de projetos de longa duração;
›❯ Facilidade de entendimento do código;
›❯ Diminuir curva de aprendizado em novos membros do time;
›❯ Reutilização de código.
Técnicas → BEM

BEM → Block
Técnicas → BEM → Block

Entidade independente que é capaz de conter outros blocos
Técnicas → BEM → Block

BEM → Element
Técnicas → BEM → Element

›❯ Parte de um bloco com uma função específica;
›❯ Não possui um contexto próprio.
Técnicas → BEM → Element

BEM → Modifier
Técnicas → BEM → Modifier

Uma propriedade de um bloco ou elemento
que altera seu comportamento

BEM → Nomenclatura
Técnicas → BEM → Nomenclatura

›❯ Utiliza-se hífen para separar palavras em nomes longos;
›❯ Underscore duplo para separar um bloco de um elemento;
›❯ PascalCase e camelCase são aceitos.

<ul class="list list_size_big list_type_links">
<li class=“list__item”>
<a href="/meetup-css">Meetup CSS</a>
</li>
<li class="list__item list__item_state_active”>
<a href=“/femug-sp">FEMUG-SP</a>
</li>
</ul>

SUIT CSS
ⓞ https://suitcss.github.io

Criado por desenvolvedores do Twitter
numa tentativa de mudar para uma arquitetura
baseada em componentes
Técnicas → SUIT CSS

SUIT CSS → Nomenclatura
Técnicas → SUIT CSS → Nomenclatura

›❯ Utiliza-se camelCase para separar palavras em nomes longos;
›❯ Utilitários devem começar com o prefixo u .

/* Definição de um componente */
.MyComponent {}
/* Definição de um estado */
.MyComponent.is-animating {}
/* Definição de um modificador */
.MyComponent--modifier {}
/* Definição de subelementos */
.MyComponent-part {}
.MyComponent-anotherPart {}

/* Faz o inline de imports procurando por libs instaladas via NPM */
@import "normalize.css";
/* Atalhos para lidar com media queries */
@custom-media --wide-screen (min-width: 80em);
/* Valores default */
:root {
--base-font-size: 16px;
}
@media (--wide-screen) {
html {
/* Utiliza Autoprefixer para lidar c/ vendor prefixes por padrao */
font-size: calc(var(--base-font-size) * 2);
}
}

ⓞ https://github.com/suitcss/components

Utiliza mixins de Sass para definir estilos
Outras Abordagens → csstyle

<a class="button --action +rounded +glass">
Register Now
<span class="button__icon --rocket"></span>
</a>

Register Now
</a>
Component

Register Now
</a>
Option

Register Now
</a>
Tweaks

Register Now
</a>
Parts

@include component(button) {
background: #6bd9ed;
padding: 15px;
@include option(action){
color: #1f1f1f;
background: #a7e040;
padding-top: 0;
}
@include part(icon){
font-size: 34px;
position: relative;
top: 10px;
}
@include tweak(rounded) {
border-radius: 10px;
}
}

Utiliza atributos HTML para definir estilos
Outras Abordagens → AMCSS

<a am-Button>Inscrever-se no Meetup CSS SP</a>

<a am-Button="primary large”>Informações</a>
<a am-Button="info small”>Cancelar inscrição</a>

.btn [am-Button] {}
.btn-primary [am-Button~="primary"] {}
.btn-large [am-Button~="large"] {}

Uma linguagem própria para lidar com interface
Outras Abordagens → uilang

<!doctype html>
<title>Exemplo uilang</title>
<script src=uilang.js></script>
<style>
/* Definição de estilos e transições */
#notification {
transition: .8s
}
#notification.hidden {
opacity: 0
}
</style>
<div id=notification>
<p>Você tem três mensagens não lidas.</p>
<button class=hide>Esconder</button>
</div>
<code>
clicking on ".hide" adds class "hidden" on "#notification"
</code>
Outras Abordagens → uilang

ⓞ http://gridstylesheets.org

Utiliza o algoritmo Cassowary Constraint Solver
para lidar com layouts
Outras Abordagens → Grid Style Sheets

~Cassowary Constraint Solver~

p {
color: purple;
line-height: >= 16;
line-height: <= ::window[height] / 12;
}
#product {
$col-width: == ::[width] / 12 !require;
$col-left: == ::[left] + ::[$col-width];
.price {
left: == ::parent[$col-left];
width: == ::parent[$col-width];
}
.description {
left: == ::parent[$col-left] + ::parent[$col-width];
}
}
.sprite {
z-index: >= #bg[z-index] >= 50;
}

Depende de um runtime (que roda em um web worker)
e de um pré-processador

ⓞ http://getbootstrap.com/css

Framework CSS à frente de seu tempo
Outras Abordagens → Bootstrap

Ensinou e popularizou boas práticas
de arquitetura CSS modular

Conceito de helper classes

Conceito de modificadores incrementais

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>

Conceito de estados

<button class="btn btn-primary btn-lg active">Primary button</button>
<button class="btn btn-default btn-lg" disabled>Button</button>

ⓞ https://github.com/magnetis/styleguide

Uma adaptação das partes que julgamos
boas em algumas técnicas populares
CSS na Magnetis

›❯ Conceito de categorização do SMACSS;
›❯ Conceito de estados do SMACSS;
›❯ Conceito de elementos do BEM;
›❯ Conceito de modificadores do SUIT CSS.
CSS na Magnetis

›❯ Sass com a sintaxe SCSS;
›❯ Autoprefixer;
›❯ Sistema de grid Susy;
›❯ Breakpoint;
›❯ SVG;
›❯ Rails (partials & Sprockets = ❤);
›❯ Bower.
CSS na Magnetis

/* Componente sidebar */
.accordion {}
/* Componente sidebar no estado expandido */
.accordion.is-expanded {}
/* Modificador `big` do componente botão */
.button--big {}
/* Componente `menu` */
.menu {}
/* Componente `menu-item` */
.menu-item {}
/* Para definir estados, utilizamos `is`, `has`, `should` e `can` */
.menu-item.has-icon {}
/* Elemento `icon` dentro do componente `menu` */
.menu-item__icon {}
CSS na Magnetis

Todos no time conseguem falar a mesma língua
Pontos positivos

Facilita o uso de ferramentas
e a criação de um guia de estilo
Pontos positivos

Desenvolvimento de interface baseado em componentes ❤
Pontos positivos

Resolve problemas de “depth of applicability”
Pontos positivos
profundidade de aplicabilidade

Evita depender de como o markup está estruturado
na hora de criar estilos
Pontos positivos

A ideia de componentes pequenos e com pouca responsabilidade
evita problemas de performance na renderização da página e
também problemas com especificidade de seletores
Pontos positivos

Navegadores começam a renderizar a página
antes mesmo do documento estar completamente carregado,
fazendo uma leitura da direita pra esquerda
Pontos positivos

Evitar excesso de detalhes nos seletores
é uma boa prática
Pontos positivos

ul#menu > li {
text-align: right;
}
Pontos positivos

Força uma análise contextual antes de programar
Pontos positivos

Maior flexibilidade na hora de lidar com design responsivo
Pontos positivos

Have a convention, document it, and stick to it.
“
Não existe bala de prata

<div class="nav__bar is-moved-by-drawer headroom headroom--verytop
headroom--top">
<div class="nav nav--main" id="ShopifyMainNav">
<nav class="page-width">
<button type="button" class="icon nav__hamburger">
<span class="visuallyhidden">Mobile Navigation</span>
</button>
<div class="nav__logo-wrapper">
<a class="icon nav__logo--full-color" href="/">
<span class="visuallyhidden">Home</span>
</a>
</div>
</nav>
</div>
</div>

Pense no seu time na hora de tomar decisões de arquitetura

Documente seu código!

/* =================================================================
Grid layout
================================================================= */
/**
* Column layout with horizontal scroll.
*
* This creates a single row of full-height, non-wrapping columns that can
* be browsed horizontally within their parent.
*
* Example HTML:
*
* <div class="grid">
* <div class="cell cell-3"></div>
* </div>
*/

Coisas mudam. O tempo todo.

Seu código precisa ser flexível e adaptável

Foque em processos e resultados,
não em ferramentas ou frameworks

Muito obrigado
@rafaelrinaldi

Arquitetura CSS

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Arquitetura CSS

Arquitetura CSS