Home

Awesome

Guia de estilo CSS / Sass da Airbnb

Uma abordagem mais razoável para CSS e Sass

Índice

  1. Terminologia
  2. CSS
  3. Sass
  4. Tradução

Terminologia

Declaração de regra

A “declaração de regra” é o nome dado ao seletor (ou a um grupo de seletores) acompanhados de um grupo de propriedades. Segue um exemplo:

.listing {
  font-size: 18px;
  line-height: 1.2;
}

Seletores

Na declaraçao de um regra, os “seletores” são os bits que determinam quais elementos na árvore do DOM serão estilizados pelas propriedades definidas. Os seletores podem ser de elementos HTML, classes, ID ou qualquer um de seus atributos. Seguem alguns exemplos de seletores:

.my-element-class {
  /* ... */
}

[aria-hidden] {
  /* ... */
}

Propriedades

Finalmente, as propriedades definem o estilos dos seletores. As propriedades são pares chave-valor, onde uma declaração de regra pode conter uma ou mais declarações de propriedades.

/* some selector */ {
  background: #f1f1f1;
  color: #333;
}

⬆ voltar ao início

CSS

Formatação

Incorreto

.avatar{
    border-radius:50%;
    border:2px solid white; }
.no, .nope, .not_good {
    // ...
}
#lol-no {
  // ...
}

Correto

.avatar {
  border-radius: 50%;
  border: 2px solid white;
}

.one,
.selector,
.per-line {
  // ...
}

Comentários

OOCSS e BEM

Incentivamos algumas combinações de OOCSS e BEM por estas razões:

OOCSS, ou “Object Oriented CSS”, é uma abordagem para escrita de CSS que o encoraja a pensar sobre as suas folhas de estilo como uma coleção de "objetos": snippets repetitivos reutilizáveis que podem ser usados de forma independente em todo o website.

BEM, ou “Block-Element-Modifier”, é uma convenção de nomes para classes em HTML e CSS. Foi originalmente desenvolvido pela Yandex com grandes bases de código e escalabilidade em mente, e pode servir como um sólido conjunto de diretrizes para a implementação do OOCSS.

Recomendamos uma variante do BEM com os “blocos” no formato PascalCase, que funciona particularmente bem quando combinado com componentes (ex.: React). Underscores e traços continuam a ser utilizados para modificadores e filhos.

Exemplo

// ListingCard.jsx
function ListingCard() {
  return (
    <article class="ListingCard ListingCard--featured">

      <h1 class="ListingCard__title">Adorable 2BR in the sunny Mission</h1>

      <div class="ListingCard__content">
        <p>Vestibulum id ligula porta felis euismod semper.</p>
      </div>

    </article>
  );
}

/* ListingCard.css */
.ListingCard { }
.ListingCard--featured { }
.ListingCard__title { }
.ListingCard__content { }

Seletores ID

Embora seja possível selecionar elementos por ID no CSS, geralmente deve ser considerado um anti-pattern. Seletores ID introduzem um elevado nível de especificidade para as declarações de regra e não são reutilizáveis.

Para mais informações sobre este assunto, leia o artigo CSS Wizardry sobre o tratamento da especificidade.

JavaScript hooks

Evite vincular a mesma classe no CSS e no JavaScript. No mínimo, tal leva ao desperdício de tempo durante o refactoring, por exemplo, quando um programador deve fazer referência cruzada a cada classe que está a alterar e, no pior dos casos, leva os programadores a resistirem a fazer mudanças com receio de romper a funcionalidade.

Recomendamos a criação de classes específicas para JavaScript, com o prefixo .js-:

<button class="btn btn-primary js-request-to-book">Request to Book</button>

Border

Use o 0 em vez de none para especificar que um estilo não tem borda.

Incorreto

.foo {
  border: none;
}

Correto

.foo {
  border: 0;
}

⬆ voltar ao início

Sass

Sintaxe

Ordenação das declarações de regra

  1. Declaração de propriedades

    Listar todas as declarações de propriedades padrão, tudo o que não seja um @include ou um seletor aninhado.

    .btn-green {
  background: green;
  font-weight: bold;
  // ...
}

  2. Declarações @include

    Agrupar os @includes no final torna mais fácil a leitura de todo o seletor.

    .btn-green {
  background: green;
  font-weight: bold;
  @include transition(background 0.5s ease);
  // ...
}

  3. Seletores aninhados

    Os seletores aninhados, se necessário, são colocados no final e nada mais depois deles. Adicione um espaço entre a declaração de regra e os seletores aninhados, assim como entre os seletores aninhados adjacentes. Aplique as mesmas diretrizes acima para os seletores aninhados.

    .btn {
  background: green;
  font-weight: bold;
  @include transition(background 0.5s ease);

  .icon {
    margin-right: 10px;
  }
}

Variáveis

Tenha preferência por nomes de variáveis em dash-case (ex.: $my-variable) em vez de camelCase ou snake_case. É aceitável adicionar um "underscore" como prefíxo nos nomes de variáveis que se destinam a ser usadas dentro do mesmo arquivo (ex.: $_my-variable).

Mixins

Os Mixins devem ser usados para implementar no código o princípio DRY, adicionar clareza ou abstrair-nos da complexidade, assim como as funções bem nomeadas. Os Mixins que não aceitam argumentos podem ser úteis, mas tenha atenção que se não compactar o seu payload (ex.: gzip) isto pode contribuir para duplicação de código desnecessário nos estilos resultantes.

Diretiva Extend

O @extend deve ser evitado porque possui um comportamento não intuitivo e perigoso, especialmente quando usado nos seletores aninhados. Mesmo extendendo os seletores placeholder de nível superior, isto pode causar problemas se a ordem dos seletores mudar mais tarde (ex.: se estiverem noutros arquivos e a ordem de carregamento alternar). Ao usar o Gzip terá a maioria das economias que teria ganho usando @extend, e, além disso, pode tirar partido do princípio DRY através dos mixins.

Seletores aninhados

Não use seletores aninhados com mais de três níveis de profundidade!

.page-container {
  .content {
    .profile {
      // STOP!
    }
  }
}

Quando os seletores se tornam assim tão longos, provavelmente estará a escrever CSS assim:

Mais uma vez: nunca agrupe seletores ID!

Se precisar de utilizar um seletor ID (algo que não deve fazer!), ele nunca deve ser agrupado. Se tal acontecer, é necessário rever o código ou descobrir por que é necessária tal especificidade. Ao escrever corretamente HTML e CSS, nunca deverá ser necessário agrupar seletores ID!

⬆ voltar ao início

Tradução

Este guia de estilo também está disponível noutros idiomas:

⬆ voltar ao início