Bootstrap estándares CSS de codificación

Anterior: Bootstrap convenciones de código HTML

gramática

Con dos espacios en lugar de pestañas (pestaña) - Esta es la única manera de garantizar un enfoque coherente para mostrar en todos los ambientes.
Cuando el selector se agrupan por separado en un selector de línea.
Para facilitar la lectura del código, en frente del bloque de cada soporte declaración para añadir un espacio.
sola sentencia de bloque soporte debe hacer el viaje.
Cada instrucción es la instrucción : después debe insertar un espacio.
Con el fin de obtener el informe de errores más precisa, cada declaración debe ser una línea separada.
Toda instrucción de declaración debe terminar con un punto y coma. Punto y coma detrás de la última instrucción de declaración es opcional, pero si se omite el punto y coma, el código puede estar más equivocado.
Para valores de las propiedades separadas por comas, cada coma debe insertarse en un espacio (por ejemplo, box-shadow ).
No rgb() , rgba() , hsl() , hsla() o rect() detrás de los valores internos comas insertar un espacio. Tales beneficios de una pluralidad de valores de atributos (también tanto coma y espacio) para distinguir entre una pluralidad de valores de color (solamente una coma, sin espacios).
Para el valor de atributo de color o parámetro omitido menos de 1 en frente de la decimal 0 (por ejemplo, .5 en lugar de 0.5 ; -.5px sustituye -0.5px ).
Los valores hexadecimales deben estar en minúsculas, por ejemplo, #fff . Al escanear un documento, los caracteres en minúsculas fáciles de distinguir, ya que su forma es más fácil de distinguir.
Trate de usar una forma corta del valor hexadecimal, por ejemplo, con #fff en lugar de #ffffff .
Añadir comillas dobles para la selección de una propiedad, por ejemplo, input[type="text"] . Sólo en ciertas circunstancias, es opcional , sin embargo, para las propuestas de código coherencia entre comillas dobles.
0 unidades al valor especificado para evitar, por ejemplo, con un margin: 0; en lugar de margin: 0px; .

Para conocer los términos utilizados en este documento tienen preguntas? Por favor refiérase a la Wikipedia en 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;
}

orden de la declaración

declaraciones relacionadas con la propiedad deben ser agrupados y organizados en el orden siguiente:

posicionamiento
modelo de caja
tipográfico
visual

A medida que el posicionamiento (posicionamiento) puede eliminar el elemento del flujo de documentos normales, y también cubrir el modelo de caja (modelo de caja) relacionado con el estilo, por lo que en la primera fila. El modelo de caja en el segundo lugar, porque determina el tamaño y la posición de los componentes.

Otras propiedades sólo afectan a los componentes internos (dentro) o no afecta a los dos primeros grupos de atributos, por lo que en la parte posterior.

lista completa de propiedades y su orden se refieren a la hendidura .

.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;
}

No utilice `@import`

Y <link> en comparación etiqueta, @import comando mucho más lento, no sólo aumenta el número de solicitudes adicionales, sino también dar lugar a problemas inesperados. Hay varias alternativas:

El uso de múltiples <link> elemento
Por Sass o menos como en varios archivos CSS CSS preprocesador se compilan en un archivo
Por Rieles, Jekyll u otro sistema proporcionan la característica de combinación de archivos CSS

Consulte el artículo de Steve Souders para obtener más conocimiento.

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

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

Las consultas de medios posición (Media consulta)

Las preguntas de los medios colocarse lo más cerca posible de las normas pertinentes. No paquete de ellos en un solo archivo de estilo, o en la parte inferior del documento. Si se toman aparte, y en el futuro todos serán olvidados. He aquí un ejemplo típico.

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

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

Con atributos prefijo

Al utilizar atributos específicos del proveedor prefijadas por indentación, que permite que el valor de cada propiedad, están alineados en la dirección vertical, es fácil para la edición de múltiples líneas.

En Textmate, usando Texto → Editar cada línea de selección ( ^ ⌘A). En Sublime Text 2, utilice la selección → Añadir línea anterior (^ ⇧ ↑ ) y Selección → Añadir línea siguiente (^ ⇧ ↓ ).

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

declaración regla de una sola línea

Para los estilos que contienen sólo una declaración, con el fin de facilitar la legibilidad y la edición rápida, se recomienda que la declaración en la misma línea. Por una serie de estilos con una declaración o afirmación debe ser dividido en varias líneas.

Un factor clave para hacer esto es la detección de errores - por ejemplo, validador de CSS señalado que 183 línea tiene un error de sintaxis. Si se trata de una sola línea única sentencia, no se omitirá este error, y si es más que una declaración de una sola línea, usted debe analizar cuidadosamente los errores para no perderse.

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

declaraciones de bienes de taquigrafía

En la necesidad de establecer explícitamente el valor de todos los casos, debemos tratar de limitar el uso de declaraciones de propiedades de la taquigrafía. Situación comúnmente consumida propiedad abreviada declara como sigue:

padding
margin
font
background
border
border-radius

En la mayoría de los casos, no es necesario especificar todos los valores de la forma abreviada declaración de atributo. Por ejemplo, los elementos de encabezamiento HTML sólo en la parte superior y el conjunto de los márgenes inferiores (margen) de valor, por lo tanto, cuando sea necesario, apenas cubriendo estos dos valores puede ser. El uso excesivo de la forma corta de la declaración de la propiedad puede conducir a código confuso, valor de la propiedad y traería superposiciones innecesarias causando efectos secundarios inesperados.

MDN (Mozilla Developer Network) en una muy buena idea acerca de las propiedades resumidas del artículo, para la declaración de propiedades y el comportamiento del usuario abreviada menos familiar es ú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 y Sass anidado

Que no se peguen innecesaria. Esto se debe a que si bien se puede utilizar el nido, pero eso no significa que usted debe utilizar anidada. Sólo en el estilo debe limitar dentro del elemento padre (es decir, descendiente de selección), y sólo tiene una pluralidad de elementos anidados utilizando anidado existe.

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

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

nota

El código está escrito y mantenido por las personas. Por favor asegúrese de que su código puede ser auto-descripción, bien comentado y es fácil de comprender a los demás. Los buenos comentarios de código pueden transmitir contexto y propósito del código. No se limite a reiterar componente o nombre de la clase.

Para comentarios más largos, asegúrese de escribir una frase completa; para comentarios generales, puede escribir frases simples.

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

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

nombre de la clase

Los nombres de clase pueden aparecer sólo los caracteres en minúsculas y guiones (Dashe) (El subrayado no es, ni nomenclatura joroba). Dash se debe utilizar para la correspondiente clase llamada (como espacios de nombres) (por ejemplo, .btn y .btn-danger ).
Evitar la taquigrafía arbitraria excesiva. .btn representantes botón, pero .s no expresan ningún significado.
nombre de la clase debe ser lo más corta y un significado claro.
Utilice nombres significativos. uso organizado o propósito del nombre, no utilice expresiones nombre (de presentación).
Sobre la base de la clase principal más cercana o clase básica (base) como prefijo para la nueva clase.
Utilice .js-* clase para identificar el comportamiento (en comparación con el estilo), y no contienen estas clases en el archivo CSS.

Sass y Menos para los nombres de variable también se leen todas las especificaciones mencionadas anteriormente.

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

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

selector

Para utilizar elementos comunes de clase, tan propicio para optimizar el rendimiento de la representación.
Para los componentes a menudo evitan el uso de los selectores de propiedades (por ejemplo, [class^="..."] ). rendimiento del navegador se verá afectado por estos factores.
Selectores tan cortos como sea posible, y tratar de limitar el número de elementos del selector, se recomienda que no exceda 3.
Sólo cuando es necesario limitar en la última clase del elemento padre (es decir, el selector descendiente) (Por ejemplo, no utilice la clase con el prefijo - prefijo de espacio de nombres es similar).

Más información:

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

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

Organización código

Componente-unidad de código de la organización.
Desarrollo de la especificación anotación consistente.
Utilice espacios en blanco consistente separada en bloques de código, tan propicio para escanear documentos de gran tamaño.
Si más de un archivo CSS, en forma de conjunto de spin-off en lugar de la página, ya que la página será reorganizada, y el conjunto se moverá.

/*
 * 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 configuración

Su editor, de acuerdo con los siguientes parámetros de configuración para evitar inconsistencias de códigos comunes y diferencias:

Dos espacios en lugar de pestañas (soft-tab que es representativa de los caracteres de tabulación con espacios).
Al guardar un archivo para eliminar el espacio en blanco al final.
Establecer el archivo de codificación a UTF-8.
Al final del archivo añadir una línea en blanco.

En referencia al documento y agregar la información de configuración para el proyecto .editorconfig archivo. Por ejemplo: en la rutina de carga en la instancia .editorconfig . Para obtener más información, consulte el Acerca EditorConfig .

Anterior: Bootstrap convenciones de código HTML

Bootstrap curso

Bootstrap CSS

Bootstrap componentes de diseño

Bootstrap Widget

Bootstrap otro

Bootstrap estándares CSS de codificación

gramática

orden de la declaración

No utilice `@import`

Las consultas de medios posición (Media consulta)

Con atributos prefijo

declaración regla de una sola línea

declaraciones de bienes de taquigrafía

Menos y Sass anidado

nota

nombre de la clase

selector

Organización código

Editor de configuración

Bootstrap curso

Bootstrap CSS

Bootstrap componentes de diseño

Bootstrap Widget

Bootstrap otro

Bootstrap estándares CSS de codificación

gramática

orden de la declaración

No utilice @import

Las consultas de medios posición (Media consulta)

Con atributos prefijo

declaración regla de una sola línea

declaraciones de bienes de taquigrafía

Menos y Sass anidado

nota

nombre de la clase

selector

Organización código

Editor de configuración

No utilice `@import`