Fala pessoal,
Depois de um tempo sem postar aqui, (infelizmente tive uns problemas pessoais, profissionais que precisei focar em algumas coisas para poder ajeitar a vida) volto com a continuação da nossa série sobre Code Style. Hoje vamos abordar a parte de CSS, e aqui tem bastante coisas legais para aprendermos, por isso eu vou separar em 2 post. Nesse primeiro momento irei escrever mais sobre a forma de escrever o CSS e algumas regrinhas que podemos adquirir no nosso dia a dia e no segundo post eu vou falar um pouco a respeito dos padrões que existem hoje para CSS como por exemplo SMACSS, BEM etc…

Se é a primeira vez que você está aqui e quer acompanhar a série desde o início recomendo começar por aqui - Code Style -, depois leia o segundo artigo aqui - Code Style HTML. Se quiser saber de todos os post que já puliquei pode conferir na Home

Bom vamos começar então com o artigo e vamos falar primeiramente da sintaxe do CSS

Sintaxe

  • Use tabulação (tab) com dois espaços de distância.
  • Quando agrupar seletores, mantenha cada seletor único em uma linha.
  • Sempre acrescente um espaço antes de abrir chaves e começar a declaração do bloco de código para ter mais legibilidade.
  • Sempre feche a chaves em uma nova linha;
  • Acrescente um espaço depois dos dois pontos (:) de cada declaração para ter mais legibilidade.
  • Cadad declaração deve estar em uma linha para que seja mais fácil de ler e encontrar erros.
  • Termine todas as declarações com ponto e vírgula (;), a última declaração é opcional, então fica a critério da equipe decidir e optar por colocar ou não e sempre manter o padrão decidido.
  • Não coloque espaço depois das vírgulas para definir valores nas declarações de rgb(), rgba(), hsl(), hsla(), ou rect(). Isto ajuda a diferenciar valores de cores múltiplos de valores de propriedades múltiplos.
  • Use sempre um espaço para separar os os valores de propriedades depois de uma vírgula.
  • Não coloque o 0 como prefixo de valores de cores (ex. .5 melhor que 0.5 e -.5 é melhor que -0.5)
  • Caixa baixa para todos códigos hexadecimais. Ex.: #fff. Letras em caixa baixo são muito mais faceis de dicernir quando estamos olhando um documento com mais de uma forma.
  • Use a forma hexadecimal abreviada quando disponível. Ex.: #fff melhor que #ffffff.
  • Colocar aspas em um atributo em seletores, ex. input[type="text"]. Em alguns casos são opcionais, mas é fortemente recomendado para ter consistência.
  • Evite especificar unidades para o zero, Ex.: margin: 0; melhor que margin: 0px;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* CSS Ruim */
.selector, .selector-secondary, .selector[type=text] {
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0, 0, 0, 0.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}

/* CSS Certo */
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

Ordem de declaração

Declarações de propriedade relacionadas devem ser agrupadas na seguinte ordem:

  1. Posicionamento
  2. Box Model
  3. Tipografia
  4. Visual

Posicionamento vem primeiro porque pode remover um elemento do fluxo do documento e sobreescrever box model relacionado ao estilo. O box model vem depois pois determina dimensões e colocação de um componente.

Todo o resto tem lugar no interior do componente ou não impacta as duas seções anteriores e por isso vem por último.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

Não use @import

Comparada com <link>, o @import é mais lento, adiciona requisições extras, e pode causar outros imprevistos. Evite isso e como alternativa você pode:

  • Usar múltiplos elementos <link>
  • Compilar seu CSS com pré processador com SASS, LESS, Stylus ou algum outro pré processador de sua prefêrencia em apenas um arquivo.

  • Minificar seu arquivo CSS com recursos fornecidos no Rails, Jekyll e outros ambientes.

    1
    2
    3
    4
    5
    6
    7
     <!-- Use link elements -->
    <link rel="stylesheet" href="core.css">

    <!-- Avoid @imports -->
    <style>
      @import url("more.css");
    </style>

Media Queries

Coloque as medias queries o mais perto de suas regras relevantes quanto possível. Não coloque ele todo em um arquivo separado ou no final do documento. Fazendo isso só irá dificultar a manutenção.

1
2
3
4
5
6
7
8
9
 .element { ... }
.element-avatar { ... }
.element-selected { ... }

@media (min-width: 480px) {
  .element { ...}
  .element-avatar { ... }
  .element-selected { ... }
}

Declarações Individuais

Nos casos em que um conjunto de regras inclui apenas uma declaração, considere remover quebras de linha para facilitar a leitura e a edição mais rápida. Qualquer regra definida com várias declarações deve ser dividida em linhas.

O ponto chave aqui é a detecção de erros, se o validador de CSS disser que tem um erro na linha 183, com apenas uma declaração não há nenhuma dificuldade em encontrar e se forem multiplas como cada uma estará em uma linha, sua sanidade vai agradecer por isso.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }

/* Multiple declarations, one per line */
.sprite {
  display: inline-block;
  width: 16px;
  height: 15px;
  background-image: url(../img/sprite.png);
}
.icon           { background-position: 0 0; }
.icon-home      { background-position: 0 -20px; }
.icon-account   { background-position: 0 -40px; }

Declaração Abreviada

Esforce-se para limitar o uso de declarações abreviadas em caso que você deve definir explicitamente todos os valores disponíveis. Propriedades abreviadas incluem:

  • pading
  • margin
  • font
  • background
  • border

  • border-radius

    Muitas vezes nós não precisamos definir todos os valores de uma propriedade. Por exemplo, um cabeçalho HTML precisa apenas de margin superior e inferior. O uso excessivo de propriedades abreviadas leva o código a substituições desnecessária e efeitos colaterais não intencionais.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
     /* Bad example */
    .element {
      margin: 0 0 10px;
      background: red;
      background: url("image.jpg");
      border-radius: 3px 3px 0 0;
    }

    /* Good example */
    .element {
      margin-bottom: 10px;
      background-color: red;
      background-image: url("image.jpg");
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
    }

Comentários

Código e escrito e mantido por pessoas. Garanta que seu código seja descritivo, bem comentado, e apropriado para os outros. Grandes comentários de código transmitem contexto ou proposito. Não basta reiterar um nome de componente ou de classe.

Esteja certo de escrever sentenças completas para grandes comentários e frases sucintas para notas gerais.

1
2
3
4
5
6
7
8
9
10
11
/* Bad example */
/* Modal header */
.modal-header {
  ...
}

/* Good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
  ...
}

Nome de classes

  • Mantenha as classes em caixa baixa e use hífen no lugar de underline. Hífen serve como quebras naturais em classes relacionadas. Ex.: .btn e .btn-danger.
  • Evite abreviação excessiva, .btn é útil para um botão, mas .s não significa nada.
  • Mantenha as classes o mais curta e sucinta possível.
  • Utilize nomes significativos.
  • Use prefixos nas classes baseado na classe pai ou classe base.

  • Use .js-* para classes com comportamento (em oposição a um estilo), mas mantenha essas classes fora do seu CSS.

    Bom isso é umas dicas bem iniciais e básicas, vamos falar mais sobre isso na segunda parte do CSS Code Style onde estarei abordando mais sobre principalmente como estruturar o código CSS e nomear suas classes de forma apropriada.

    1
    2
    3
    4
    5
    6
    7
    8
    9
     /* Bad example */
    .t { ... }
    .red { ... }
    .header { ... }

    /* Good example */
    .tweet { ... }
    .important { ... }
    .tweet-header { ... }

Seletores

  • Use classes sobre o elemento tag genérico para otimizar a performance de renderização.
  • Evite usar muitos seletores de atributos ex.: [class^="..."] em componentes que ocorrem comumente. O desempenho do navegador é bem afetado por eles.
  • Mantenha os seletores curto e se esforçe para limitar o número de elementos em cada seletor para três.

  • Escopo de classes para aproximar pais apenas quando necessário ex.: quando não estiver usando classes com prefixos.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    /* Bad example */
    span { ... }
    .page-container #stream .stream-item .tweet .tweet-header .username { ... }
    .avatar { ... }

    /* Good example */
    .avatar { ... }
    .tweet-header .username { ... }
    .tweet .avatar { ... }

Referência:
Codeguide
http://codeguide.co/#css

Bom pessoal essa é a primeira parte do Code Style CSS onde vimos algumas regras que podemos implantar em nossa forma de escrever código. Claro que temos muito que ver ainda e vou trazer outras coisas no próximo artigo como disse no início desse post. Mais para frente posso trazer algum post mais básico a respeito de CSS e também cosias mais legais e mudanças que ocorreram com o CSS3, por hora podemos ir usando isso para escrevermos nossos códigos e depois aprenderemos como fazer coisas mais legais em CSS.

Abraços a todos e qualquer dúvida ou sugestões, deixem nos comentários.

Até mais…