Latest web development tutorials

Bootstrap Standards CSS Coding

gramática

  • Com dois espaços em vez de separadores (separador) - Esta é a única maneira de garantir uma abordagem coerente para mostrar em todos os ambientes.
  • Quando o seletor é agrupados separadamente em um seletor de linha.
  • Para facilitar a leitura do código, na frente do bloco de cada cinta declaração para adicionar um espaço.
  • declaração bloco cinta por si só deveria fazer a viagem.
  • Cada instrução é a declaração : depois deve inserir um espaço.
  • A fim de obter o relatório de erros mais precisos, cada instrução deve ser uma linha separada.
  • Todos instrução de declaração deve terminar com um ponto e vírgula. Ponto e vírgula por trás última instrução de declaração é opcional, mas se você omitir o ponto e vírgula, seu código pode ser mais errado.
  • Para valores de propriedade separados por vírgulas, cada vírgula deve ser inserido em um espaço (por exemplo, box-shadow ).
  • Não rgb() , rgba() , hsl() , hsla() ou rect() atrás dos valores internos vírgula inserir um espaço. Tais benefícios de uma pluralidade de valores de atributos (também dois vírgula e espaço) para distinguir entre uma pluralidade de valores de cor (somente uma vírgula, sem espaços).
  • Para o valor de atributo ou parâmetro omitido cor inferior a 1 na frente do decimal 0 (por exemplo, .5 em vez de 0.5 ; -.5px substituído -0.5px ).
  • valores hexadecimais devem estar em minúsculas, por exemplo, #fff . Ao digitalizar um documento, caracteres minúsculos fáceis de distinguir, porque sua forma é mais facilmente distinguíveis.
  • Tente usar uma forma abreviada do valor hexadecimal, por exemplo, com #fff vez de #ffffff .
  • Adicionar aspas duplas para a seleção de uma propriedade, por exemplo, input[type="text"] . Apenas em certas circunstâncias é opcional , no entanto, à apresentação de propostas de código consistência entre aspas duplas.
  • 0 unidades para o valor especificado para evitar, por exemplo, com um margin: 0; em vez de margin: 0px; .

Para termos aqui utilizados tem dúvidas? Consulte a Wikipedia em Cascading Style Sheets - gramática . 

/* Bad CSS */
.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
}

/* Good CSS */
.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 propriedades relacionadas com devem ser agrupados e organizados na seguinte ordem:

  1. posicionamento
  2. modelo de caixa
  3. tipográfico
  4. visual

Como o posicionamento (posicionamento) pode remover o elemento do fluxo de documentos normal, e também abranger o modelo de caixa (box model) relacionado ao estilo, então na primeira linha. O modelo de caixa em segundo lugar, uma vez que determina o tamanho ea posição dos componentes.

Outras propriedades afetam apenas os componentes internos (dentro) ou não afeta atribuem os dois primeiros grupos, por isso na parte de trás.

lista completa de propriedades e sua ordem referem-se a Recess . 

.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 utilize @import

E <link> tag comparação, @import comandar muito mais lento, não só aumenta o número de pedidos adicionais, mas também levar a problemas inesperados. Existem várias alternativas:

  • Utilizando múltiplos <link> elemento
  • Por Sass ou menos como CSS pré-processamento de vários arquivos CSS são compilados em um único arquivo
  • Por Rails, Jekyll ou outro sistema, desde que o recurso de mala arquivo CSS

Consulte o artigo Steve Souders para obter mais informação. 

<!-- Use link elements -->
<link rel="stylesheet" href="core.css">

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

consultas de mídia (consulta de mídia) Posição

As consultas de mídia colocado o mais próximo possível as regras pertinentes. Não embalá-los em um único arquivo de estilo, ou na parte inferior do documento. Se você desmontá-los, e no futuro todos serão esquecidos. Aqui está um exemplo típico. 

.element { ... }
.element-avatar { ... }
.element-selected { ... }

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

Com atributos prefixo

Quando o uso de atributos específicos do fornecedor prefixados por recuo, o que permite que o valor de cada propriedade estão alinhados na direcção vertical, é fácil de edição multi-linha.

Em Textmate, usando Texto → Editar Cada linha Selection ( ^ ⌘A). No texto Sublime 2, use a Seleção → Adicionar linha anterior (^ ⇧ ↑ ) e Seleção → Adicionar Linha seguinte (^ ⇧ ↓ ). 

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

declaração regra de linha única

Para os estilos que contêm apenas uma declaração, a fim de facilitar a legibilidade e edição rápida, recomendamos que a declaração sobre a mesma linha. Para um número de estilos com uma declaração ou declaração deve ser dividida em várias linhas.

Um fator chave para fazer isso é para detectar erros - por exemplo, CSS validador apontou que 183 linha tem um erro de sintaxe. Se é uma linha única instrução única, você não vai ignorar este erro e, se ele é mais do que uma declaração de uma única linha, você deve analisar cuidadosamente os erros para evitar perder. 

/* 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ções de propriedade de taquigrafia

Na necessidade de definir explicitamente o valor de todos os casos, devemos tentar limitar o uso de declarações de propriedade de taquigrafia. Situação comumente abusado propriedade estenográfica declarado como segue:

  • padding
  • margin
  • font
  • background
  • border
  • border-radius

Na maioria dos casos, não é necessário especificar todos os valores para a forma abreviada declaração de atributo. Por exemplo, HTML dirigindo elementos apenas na set top margens inferior e valor (margem), portanto, quando necessário, apenas cobrindo estes dois valores pode ser. O uso excessivo a forma abreviada da declaração de propriedade pode levar a um código confuso, valor da propriedade e traria sobreposição desnecessária causando efeitos colaterais inesperados.

MDN (Mozilla Developer Network) em uma ideia muito boa sobre propriedades abreviadas do artigo, para o comportamento de declaração de propriedade e de uso de taquigrafia menos familiar é útil. 

/* 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;
}

Menos e Sass aninhados

Evitar assentamento desnecessária. Isto porque embora você possa usar o ninho, mas isso não significa que você deve usar aninhada. Só no estilo que você deve limitar dentro do elemento pai (ou seja descendente selector), e só precisa de uma pluralidade de elementos aninhados usando aninhados existem. 

// Without nesting
.table > thead > tr > th { … }
.table > thead > tr > td { … }

// With nesting
.table > thead > tr {
  > th { … }
  > td { … }
}

nota

O código é escrito e mantido pelo povo. Por favor, certifique-se de que seu código pode ser auto-descrição, bem comentado e fácil de compreender os outros. comentários bom código pode transmitir contexto e finalidade do código. Não basta reiterar componente ou nome da classe.

Para comentários mais longos, não se esqueça de escrever uma frase completa; para comentários gerais, pode escrever frases simples. 

/* Bad example */
/* Modal header */
.modal-header {
  ...
}

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

nome da classe

  • nomes de classe pode aparecer somente caracteres minúsculos e travessões (Dashe) (não sublinhado, nem nomenclatura corcunda). Traço deve ser utilizada para a classe relevante denominado (como espaços de nomes) (por exemplo, .btn e .btn-danger ).
  • Evite taquigrafia arbitrária excessiva. .btn representantes botão, mas .s não expressar qualquer significado.
  • nome da classe deve ser o mais curto e significado claro.
  • Use nomes significativos. utilização organizado ou proposital do nome, não use expressões nome (apresentação).
  • Com base na classe pai mais próximo ou classe básica (base) como um prefixo para a nova classe.
  • Use .js-* classe para identificar o comportamento (em oposição ao estilo), e não contêm estes classe para o arquivo CSS.

Sass e menos para nomenclatura de variáveis ​​é também ler todas as especificações acima listadas. 

/* Bad example */
.t { ... }
.red { ... }
.header { ... }

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

seletor

  • Para elementos comuns usar classe, tão propício para otimizar o desempenho de renderização.
  • Para componentes, muitas vezes evitar o uso de seletores de propriedade (por exemplo, [class^="..."] ). o desempenho do navegador será afetado por esses fatores.
  • Seletores tão curtos quanto possível, e tentar limitar o número de elementos do selector, recomenda-se não exceder 3.
  • Só quando é necessário limitar na última aula do elemento pai (ou seja descendente selector) (Por exemplo, não use a classe com o prefixo - namespace prefix é similar).

Leitura complementar: 

/* Bad example */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }

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

Organização de código

  • Componente-unidade de código de organização.
  • Desenvolvimento de especificação anotação consistente.
  • Use espaços em branco consistente separados em blocos de código, tão propício para digitalizar documentos grandes.
  • Se mais de um arquivo CSS, sob a forma de montagem de spin-off, em vez de a página, porque a página será reorganizado, ea montagem será movido. 
/*
 * Component section heading
 */

.element { ... }


/*
 * Component section heading
 *
 * Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
 */

.element { ... }

/* Contextual sub-component or modifer */
.element-heading { ... }

editor de configuração

Seu editor de acordo com as seguintes definições de configuração para evitar inconsistências de código comuns e diferenças:

  • Dois espaços em vez de separadores (por tabulação suave que é representativo de caracteres de tabulação com espaços).
  • Quando você salvar um arquivo para remover o espaço em branco à direita.
  • Definir a codificação de arquivo para UTF-8.
  • No final do arquivo adicionar uma linha em branco.

Referindo-se ao documento e adicionar as informações de configuração para o projeto .editorconfig arquivo. Por exemplo: em Bootstrap no exemplo .editorconfig . Para mais informações, por favor consulte o EditorConfig Sobre .