Normas de Codificação CSS do Bootstrap

gramática

• Use dois espaços em branco em vez de tabulações (tab). -- Este é o único método que garante uma apresentação consistente em todos os ambientes.
• Quando agrupar selectores, coloque os selectores individuais em linhas separadas.
• Para melhor legibilidade do código, adicione um espaço em branco antes do fecho de chave esquerda de cada bloco de declaração.
• O fecho de chave direita do bloco de declarações deve estar em uma linha separada.
• Cada declaração deve estar em uma linha separada. : deve ser inserido um espaço em branco.
• Para obter relatórios de erro mais precisos, cada declaração deve ocupar uma linha.
• Todas as declarações devem terminar com um ponto e vírgula. O ponto e vírgula após a última declaração é opcional, mas, se omitido, seu código pode ser mais propenso a erros.
• Para valores de propriedade separados por vírgula, insira um espaço em branco após cada vírgula (por exemplo,box-sombra).
• Não use rgb(),rgba(),hsl(),hsla() ou rect() do valorinternoinsira um espaço em branco após a vírgula. Isso facilita a distinção entre várias cores (apenas vírgulas, sem espaços).
• Para valores de propriedade ou parâmetros de cor, omita a vírgula antes do < 1 O zero antes da casa decimal (por exemplo,.5 em vez de 0.5;-.5px em vez de -0.5px).
• Os valores hexadecimais devem ser todos minúsculos, por exemplo,#fff。No exame do documento, os caracteres minúsculos são mais fáceis de distinguir, pois sua forma é mais fácil de diferenciar.
• Use preferencialmente a forma abreviada dos valores hexadecimais, por exemplo, use #fff em vez de #ffffff.
• Adicione aspas duplas às propriedades do seletor, por exemplo,input[type="text"].é opcional em algumas situaçõesmas, para consistência no código, é recomendável adicioná-las entre aspas duplas.
• Evite especificar unidade para valores 0, por exemplo, use margem: 0; em vez de margem: 0px;.

Tem alguma dúvida sobre os termos usados aqui? Consulte a Wikipedia: Tabela de estilos em cascata - gramática.

/* CSS ruim */
.selector, .selector-secundário, .selector[type=text] {
  paddin:15px;
  margem:0px 0px 15px;
  fundo-cor:rgba(0, 0, 0, 0.5);
  box-sombra:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}
/* Boa CSS */
.selector,
.selector-secundário,
.selector[type="text"] {
  paddin: 15px;
  margem-baixo: 15px;
  fundo-cor: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

Ordem de declaração

As declarações de propriedades relacionadas devem ser agrupadas e organizadas na seguinte ordem:

Posicionamento

Modelo de caixa

Tipográfico

Visual

Devido à localização(positioning) que pode remover elementos do fluxo normal do documento e ainda cobrir estilos relacionados ao modelo de caixa(box model), ele é colocado em primeiro lugar. O modelo de caixa é colocado em segundo lugar, pois determina o tamanho e a posição do componente.

outras propriedades afetam apenas o componenteinterno(inside)ou que não afetam os dois primeiros conjuntos de atributos, portanto, são colocados no final.

A lista completa de atributos e sua ordem de arrangement pode ser consultada em Recess.

.declaração-ordem {
  /* Posicionamento */
  posição: absoluta;
  superior: 0;
  direita: 0;
  inferior: 0;
  esquerda: 0;
  z-índice: 100;
  /* Caixa-modelo */
  exibição: bloco;
  flutuante: direita;
  width: 100px;
  height: 100px;
  /* Tipografia */
  fonte: normal 13px "Helvetica Neue", sans-serif;
  linha-height: 1.5;
  cor: #333;
  texto-alinhamento: centro;
  /* Visual */
  fundo-cor: #f5f5f5;
  border: 1px sólido #e5e5e5;
  borda-radius: 3px;
  /* Misc */
  opacity: 1;
}

Não usar @import

com <link> etiquetas em comparação com@import Mandamentos são muito mais lentos, não só aumentam o número de solicitações adicionais, mas também podem causar problemas inesperados. As alternativas incluem:

• Usar vários <link> Elemento
• Através de preprocessores CSS como Sass ou Less, compile vários arquivos CSS em um único arquivo
• Através de funções de combinação de arquivos CSS fornecidas por sistemas como Rails, Jekyll ou outros

Consulte Artigo de Steve SoudersSaiba mais.

<!-- Use elementos link -->
<link rel="stylesheet" href="core.css">
<!-- Evitar @imports -->
<style>
  @import url("more.css");
</style>

Localização da consulta de mídia (Media query)

Coloque as consultas de mídia o mais próximo possível das regras relacionadas. Não as empacote em um único arquivo de estilo ou coloque no final do documento. Se as separarem, no futuro só serão esquecidas. Abaixo está um exemplo típico.

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

Atributos com prefixo

Quando usar atributos com prefixo de fabricantes específicos, alinhar os valores de cada atributo verticalmente por meio de recuo, facilitando a edição em várias linhas.

No Textmate, usar Texto → Editar Cada Linha da Seleção (⌃⌘A). In Sublime Text 2 In, use Selection → Add Previous Line (⌃⇧↑) and Selection → Add Next Line (⌃⇧↓).

/* Prefixed properties */
.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
          box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

single-line rule declarations

ForContains only one declarationstyles, for readability and ease of quick editing, it is recommended to place statements on the same line. For styles with multiple declarations, it is still recommended to split the declarations into multiple lines.

The key factor for this is error detection -- For example, the CSS validator points out that in 183 Line has syntax error. If it is a single-line single declaration, you will not ignore this error; if it is a single-line multiple declarations, you need to analyze carefully to avoid missing errors.

/* 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;
  fundo-image: url(../img/sprite.png);
}
.icon           { background-position: 0 0; }
.icon-home      { background-position: 0 -20px; }
.icon-account   { background-position: 0 -40px; }

shorthand property declarations

In cases where it is necessary to set all values explicitly, it is recommended to limit the use of shorthand property declarations as much as possible. Common misuse of shorthand property declarations includes the following:

• padding
• margem
• font
• fundo
• borda
• borda-radius

In most cases, we do not need to specify all values for shorthand property declarations. For example, the heading element of HTML only needs to set the values of the top and bottom margins (margin), so, when necessary, only these two values need to be overridden.

MDN (Mozilla Developer Network) has a very good article aboutshorthand properties The article is very useful for users who are not familiar with shorthand property declarations and their behaviors.

/* Exemplo ruim */
.element {
  margin: 0 0 10px;
  background: red;
  fundo: url("image.jpg");
  borda-radius: 3px 3px 0 0;
}
/* Exemplo bom */
.element {
  margem-baixo: 10px;
  fundo-cor: vermelha;
  fundo-image: url("image.jpg");
  borda-cima-esquerda-radius: 3px;
  borda-cima-direita-radius: 3px;
}

Aninhamento em Less e Sass

Evite aninhamento desnecessário. Isso porque, embora você possa usar aninhamento, não significa que você deve usá-lo. Use aninhamento apenas quando for necessário restringir o estilo ao elemento pai (isto é, selector de descendente), e quando houver múltiplos elementos que precisam ser aninhados.

// Sem aninhamento
.table > thead > tr > th { … }
.table > thead > tr > td { … }
// Com aninhamento
.table > thead > tr {
  > th { … }
  > td { … }
}

comentários

O código é escrito e mantido por humanos. Certifique-se de que seu código seja auto-descriptivo, bem comentado e fácil de entender por outros. Boas anotações de código podem transmitir o contexto e o propósito do código. Não simplesmente reitere o nome do componente ou da class.

Para comentários longos, certifique-se de escrever frases completas; para anotações gerais, pode-se escrever frases concisas.

/* Exemplo ruim */
/* Cabeçalho do modal */
.modal-header {
  ...
}
/* Exemplo bom */
/* Elemento de envoltura para .modal-título e .modal-fechar */
.modal-header {
  ...
}

nomeação de classes

• Os nomes das classes podem conter apenas caracteres minúsculos e hífen (dashe) (não sublinhado, nem camelCase). O hífen deve ser usado na nomeação de classes relacionadas (semelhante a um espaço de nomes) (por exemplo,.btn e .btn-perigo).
• Evite abreviações arbitrárias excessivas..btn representa buttonmas .s Não deve expressar qualquer significado.
• Os nomes das classes devem ser o mais curtos possível e de significado claro.
• Use nomes significativos. Use nomes organizados ou com propósito claro, não use nomes que descrevem a forma (presentational).
• Use a class pai mais recente ou a class básica (base) como prefixo para a nova class.
• usar .js-* class para identificar comportamento (em oposição ao estilo) e não inclua essas classes no arquivo CSS.

Também pode ser referido os padrões listados acima ao nomear variáveis do Sass e Less.

/* Exemplo ruim */
.t { ... }
.red { ... }
.header { ... }
/* Exemplo bom */
.tweet { ... }
.important { ... }
.tweet-header { ... }

Seletor

• Use class para elementos genéricos, o que facilita a otimização do desempenho de renderização.
• Evite usar seletores de atributo para componentes que aparecem frequentemente (por exemplo,[class^="..."]). O desempenho do navegador pode ser afetado por esses fatores.
• Os seletores devem ser o mais curtos possível e limitar o número de elementos que compõem o seletor, é recomendável não ultrapassar 3 .
• ApenasRestrinja a class apenas ao elemento pai mais próximo, quando necessário (ou seja, use seletores de descendentes), por exemplo, sem usar class com prefixo. -- Os prefixos são semelhantes a namespaces).

Leia mais:

• Scope as classes CSS com prefixos
• Parar a cascata

/* Exemplo ruim */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }
/* Exemplo bom */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }

Organização do código

• Organize os trechos de código em função do componente.
• Estabeleça um padrão consistente para os comentários.
• Use espaços em branco consistentes para separar o código em blocos, o que facilita a visualização de documentos grandes.
• Se você usar vários arquivos CSS, quebre-os em função do componente e não da página, pois a página será reorganizada, enquanto o componente será apenas movido.

/*
 * Título da seção do componente
 */
.element { ... }
/*
 * Título da seção do componente
 *
 * Às vezes, você precisa incluir contexto opcional para todo o componente. Faça isso aqui se for importante o suficiente.
 */
.element { ... }
/* sub contextual-componente ou modificador */
.element-heading { ... }

Configuração do editor

Configure seu editor conforme a seguir para evitar problemas comuns de inconsistência e diferenças no código:

• Use dois espaços em branco em vez do tabulação (soft tab).-tab é representado pelo espaço em branco).
• Remova os espaços em branco ao final do arquivo ao salvar.
• Defina a codificação do arquivo como UTF-8.
• Adicione uma linha em branco no final do arquivo.

Referencie o documento e adicione essas informações de configuração ao projeto .editorconfig no arquivo. Por exemplo:exemplo .editorconfig no Bootstrap. Para mais informações, consulte sobre EditorConfig.