CSS Sustentável

Escreva CSS sem se preocupar se estilos pré-existentes causarão problemas.

Talita Pagani

@talitapagani

Talita Pagani

Designer e Front-end na Nexaas

Faz-tudo na Utilizza - Design de Interação

Trabalho com Web há 12 anos

Autora no Tableless e UX.BLOG

Entusiasta de Acessibilidade Web e membro do grupo de especialistas do W3C Brasil

Abordagens de CSS

BEM

OOCSS

SMACSS

DRY CSS

IT CSS

Problema dessas abordagens

Podem ser mais complexas para aprender (curva de aprendizado)

Sintaxe específica para escrever CSS

Regras nem sempre aplicáveis

MaintainableCSS

Criado por Adam Silver

Não é uma metodologia, mas um guia de boas práticas

Não impede que seja usado em conjunto com alguma outra abordagem

20 minutos de leitura

http://maintainablecss.com

CSS Sustentável

Tradução autorizada do MaintainableCSS

http://csssustentavel.com.br

CSS Sustentável

Sustentável: pode sofrer mudanças sem grande impacto na estrutura geral do estilo.

Escalável: mesmo aumentando de tamanho, o CSS continua sendo de fácil manutenção.

Modular: combinações atômicas para formar uma estrutura complexa.

http://csssustentavel.com.br

Alguns princípios...

Semântica

Classes de fácil leitura

<div class="vermelho pull-left pb3">
<div class="grid row">
<div class="col-xs-4">

<div class="pb3 pb4-ns pt4 pt5-ns 
mt4 preto-70 fl-l w-50-1">
	<h1 class="f4 fw6 f1-ns 
            lh-titulo medida mt0">Título</h1>
	<p class="f5 f4-ns fw4 b 
            medida dib-m lh-copy">Parágrafo</p>
</div>

Semântica

Classes de fácil leitura

<div class="carrinho"></div>

<div class="produto"></div>

<div class="resultadosBusca"></div>

<div class="artigo">
	<h1 class="artigo-titulo">Título</h1>
	<p class="artigo-paragrafo">Parágrafo</p>
</div>

Semântica

Classes de fácil leitura

<div class="ui two column stackable center 
            aligned grid segment">
    <div class="column">
      <div class="ui button">A</div>
    </div>
    <div class="ui vertical divider">or</div>
    <div class="column">
      <div class="teal ui button">B</div>
    </div>
  </div>
</div>

Semantic UI

https://semantic-ui.com/

Semântica

Classes de fácil leitura

• Essas classes são fáceis de ler. Não é necessário mapear nada.
• O conteúdo aparece com mais clareza.
• Conseguimos ver onde o módulo começa e onde ele termina.
• A inspeção dos elementos se torna muito mais fácil.
• O HTML fica com metade do tamanho.
• São mais fáceis de achar.
• São melhores para layouts responsivos.

Reuso

Cuidado com o DRY e tente reutilizar módulos tangíveis

.classeAuxiliar {
    font-weight: 900;
    line-height: 1.6em;
    background: #CC0000;
}

<p class="carrinho classeAuxiliar">...</p>

<section class="listaProdutos classeAuxiliar">...</section>

Reuso

Cuidado com o DRY e tente reutilizar módulos tangíveis

.carrinho-selecionado,
.listaProdutos-selecionado {
    font-weight: 900;
    line-height: 1.6em;
    background: #CC0000;
}

.carrinho-selecionado {
    border-radius: 50%;
}

<p class="carrinho carrinho-selecionado">...</p>

<section class="listaProdutos listaProdutos-selecionado">...</section>

Convenções

Facilitando a legibilidade do código

.<módulo>[-<componente>][-<estado>] {}

/* Container do Módulo */
.resultadosBusca {}

/* Componente */
.resultadosBusca-cabecalho {}

/* Estado */
.resultadosBusca-carregando {}

Resultados da Busca

Resultados da Busca

Convenções

Por que prefixar módulos? Por que não fazer assim?

<div class="carrinho">
  <div class="titulo">

/* módulo */
.carrinho {}

/* componente de título para o módulo de carrinho */
.carrinho .titulo {}

Convenções

Dois problemas:

1. ao visualizar o HTML, é difícil diferenciar entre um módulo e um componente; e
2. o componente .carrinho .titulo irá herdar os estilos do módulo .titulo, o que causa um efeito colateral não intencional.

Módulos e Componentes

Partes reutilizáveis de código que evitam seletores encadeados

Seu Carrinho de Compras

Título do Produto

Remover

Título do Produto

Remover

Módulos e Componentes

Partes reutilizáveis de código que evitam seletores encadeados

Seu Carrinho de Compras

Título do Produto

Remover

Título do Produto

Remover

Módulo

Módulos e Componentes

Partes reutilizáveis de código que evitam seletores encadeados

Seu Carrinho de Compras

Título do Produto

Remover

Título do Produto

Remover

Componentes

Módulos e Componentes

Partes reutilizáveis de código que evitam seletores encadeados

<div class="carrinho">
  <h1 class="carrinho-titulo">Seu carrinho</h1>
  <div class="carrinho-item">
    <h3 class="carrinho-tituloProduto">
        Título do produto
    </h3>
    <form>
      <input type="submit" 
            class="carrinho-botaoRemover" 
            value="Remover">
    </form>
  </div>
</div>

Módulos e Componentes

Partes reutilizáveis de código que evitam seletores encadeados

.carrinho {}

.carrinho-titulo {}

.carrinho-item {}

.carrinho-tituloProduto {}

.carrinho-botaoRemover {}

Módulos e Componentes

E se tiver módulos parecidos com algumas diferenças de estrutura, posicionamento, etc?

Então não é o mesmo módulo. São módulos diferentes e deve-se criar outro módulo com outra nomenclatura no CSS.

Módulos e Componentes

E botões? São componentes ou módulos?

@mixin button {
  background-color: green;
  padding: 10px;
  color: #fff;
}

.carrinho-botaoRemover,
.outro-botaoLogin,
.outro-botaoExcluir {
  @include button;
}

.carrinho-botaoRemover {
  float: right;
}
.outro-botaoExcluir {
  margin-bottom: 10px;
}

Estados

Classes extras para tratar mudanças de estado

Classes auxiliares prefixadas pelo módulo, porque o vazio de um módulo pode ter um estilo diferente do vazio de outro módulo.

<div class="carrinho carrinho-vazio">

.carrinho-vazio {
  background-color: #eee;
}

Estados

E os atributos ARIA?

Nem todos os estados visuais podem ser representados por um atributo ARIA. Por exemplo, não há atributo para representar temProdutos.

Também, usar um seletor de atributo possui menos suporte. Devemos evitar técnicas que possam excluir usuários.

Use atributos ARIA para tecnologias assistivas, não para estilizar.

Modificadores

Tratando pequenas diferenças em componentes

<div class=”cabecalhoCategoria cabecalhoCategoria--moveis”>

<div class=”cabecalhoCategoria cabecalhoCategoria--tecnologia”>

Modificadores

Tratando pequenas diferenças em componentes

.cabecalhoCategoria {
  padding-top: 50px;
  padding-bottom: 50px;
  /* etc */
}

.cabecalhoCategoria--moveis {
  background-image: url(/caminho/para/moveis.jpg);
}

.cabecalhoCategoria--tecnologia {
  background-image: url(/caminho/para/tecnologia.jpg);
}

Será que isso é para mim?

Se você já penou muito com CSS e/ou se trabalha em um time, esse guia pode te ajudar muito

Hora de debater e tirar dúvidas!

Obrigada!

@talitapagani | contato@talitapagani.com

csssustentavel.com.br

slides.com/talitapagani/csssustentavel