English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
: debe insertarse un espacio.box-sombra).rgb(),rgba(),hsl(),hsla() o rect() del valorinternoinserta un espacio en la coma después de la coma para separar múltiples valores de atributo (con comas y espacios) de múltiples valores de color (solo comas, sin espacios)..5 en lugar de 0.5;-.5px en lugar de -0.5px).#fffen el proceso de escaneo del documento, las letras minúsculas son fáciles de distinguir porque su forma es más fácil de distinguir.#fff en lugar de #ffffff.input[type="text"].solo es opcional en ciertos casospero, para la consistencia del código, se recomienda que todos incluyan comillas dobles.margen: 0; en lugar de margen: 0px;.¿Tienes alguna duda sobre los términos utilizados aquí? Consulta Wikipedia. Hoja de estilo en cascada - Gramática.
/* CSS malo */
.selector, .selector-secundario, .selector[type=text] {
padding:15px;
margen:0px 0px 15px;
fondo-color:rgba(0, 0, 0, 0.5);
box-sombra:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}
/* Buen CSS */
.selector,
.selector-secundario,
.selector[type="text"] {
padding: 15px;
margen-abajo: 15px;
fondo-color: rgba(0,0,0,.5);
box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}
Las declaraciones relacionadas deben agruparse en un grupo y colocarse en el siguiente orden:
Debido a que la ubicación (ubicación) puede quitar elementos del flujo de documento normal y aún puede cubrir las estilos relacionados con el modelo de caja (modelo de caja), se coloca en primer lugar. El modelo de caja se coloca en segundo lugar, porque determina el tamaño y la ubicación del componente.
otras propiedades solo afectan a los componentesinternoo que no afecta a los primeros dos grupos de propiedades, por lo que se colocan al final.
La lista completa de propiedades y su orden se puede consultar Recesión.
.declaración-orden {
/* Posicionamiento */
posición: absoluta;
arriba: 0;
derecha: 0;
abajo: 0;
izquierda: 0;
z-índice: 100;
/* Caja-modelo */
mostrar: bloque;
flotar: derecha;
width: 100px;
height: 100px;
/* Tipografía */
fuente: normal 13px "Helvetica Neue", sans-serif;
línea-height: 1.5;
color: #333;
texto-alineación: centro;
/* Visual */
fondo-color: #f5f5f5;
border: 1px sólido #e5e5e5;
borde-radio: 3px;
/* Misc */
opacity: 1;
}
@importcon <link> etiquetas en comparación con@import Las instrucciones son mucho más lentas, no solo aumentan el número de solicitudes adicionales, sino que también pueden causar problemas imprevistos. Las alternativas incluyen lo siguiente:
<link> ElementoConsulte Artículo de Steve SoudersPara obtener más información.
<!-- Usar elementos link -->
<link rel="stylesheet" href="core.css">
<!-- Evitar @imports -->
<style>
@import url("more.css");
</style>
Colocar las consultas de medios lo más cerca posible de las reglas relacionadas. No las empaqueten en un solo archivo de estilo o al final del documento. Si las separan, en el futuro solo serán olvidadas. A continuación, se muestra un ejemplo典型.
.element { ... }
.element-avatar { ... }
.element-selected { ... }
@media (min-width: 480px) {
.element { ...}
.element-avatar { ... }
.element-selected { ... }
}
Al usar propiedades con prefijo de fabricantes específicos, alinear verticalmente cada valor de propiedad mediante sangría, lo que facilita la edición en múltiples líneas.
En Textmate, usar Texto → Editar Cada Línea de la Selección (⌃⌘A)。在 Sublime Text 2 中，使用 Selection → Add Previous Line (⌃⇧↑) 和 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);
}
对于只包含一条声明的样式，为了易读性和便于快速编辑，建议将语句放在同一行。对于带有多条声明的样式，还是应当将声明分为多行。
这样做的关键因素是为了错误检测 -- 例如，CSS 校验器指出在 183 行有语法错误。如果是单行单条声明，你就不会忽略这个错误；如果是单行多条声明的话，你就要仔细分析避免漏掉错误了。
/* 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;
fondo-image: url(../img/sprite.png);
}
.icon { background-position: 0 0; }
.icon-home { background-position: 0 -20px; }
.icon-account { background-position: 0 -40px; }
在需要显示地设置所有值的情况下，应当尽量限制使用简写形式的属性声明。常见的滥用简写属性声明的情况如下：
paddingmargenfontfondobordeborde-radius大部分情况下，我们不需要为简写形式的属性声明指定所有值。例如，HTML 的 heading 元素只需要设置上、下边距（margin）的值，因此，在必要的时候，只需覆盖这两个值就可以。过度使用简写形式的属性声明会导致代码混乱，并且会对属性值带来不必要的覆盖从而引起意外的副作用。
MDN（Mozilla Developer Network）上一篇非常好的关于shorthand properties 的文章，对于不太熟悉简写属性声明及其行为的用户很有用。
/* Malo ejemplo */
.element {
margin: 0 0 10px;
background: red;
fondo: url("image.jpg");
borde-radio: 3px 3px 0 0;
}
/* Buen ejemplo */
.element {
margen-abajo: 10px;
fondo-color: rojo;
fondo-image: url("image.jpg");
borde-arriba-izquierda-radio: 3px;
borde-arriba-derecha-radio: 3px;
}
evitar anidamientos innecesarios. Esto se debe a que, aunque puedes usar anidamientos, no significa que debas usarlos. Úsalos solo cuando necesites limitar los estilos al elemento padre (es decir, los selectores de descendiente) y existan varios elementos que necesiten anidarse.
// Sin anidamiento
.table > thead > tr > th { … }
.table > thead > tr > td { … }
// Con anidamiento
.table > thead > tr {
> th { … }
> td { … }
}
el código es escrito y mantenido por personas. Asegúrate de que tu código sea autoexplicativo, bien comentado y fácil de entender para otros. Buenas anotaciones de código pueden transmitir la relación contextual y el propósito del código. No repitas simplemente nombres de componentes o class.
para comentarios más largos, asegúrate de escribir frases completas; para anotaciones generales, puedes escribir frases breves.
/* Malo ejemplo */
/* cabecera del modal */
.modal-header {
...
}
/* Buen ejemplo */
/* elemento envolvente para .modal-título y .modal-cerrar */
.modal-header {
...
}
.btn y .btn-danger)..btn representa buttonpero .s no puede expresar ningún significado..js-* class para identificar comportamientos (en contraste con los estilos) y no incluir estas class en archivos CSS.También puedes seguir las normas enumeradas anteriormente al nombrar variables de Sass y Less.
/* Malo ejemplo */
.t { ... }
.red { ... }
.header { ... }
/* Buen ejemplo */
.tweet { ... }
.important { ... }
.tweet-header { ... }
[class^="..."]). El rendimiento del navegador se verá afectado por estos factores.Leer más:
/* Malo ejemplo */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }
/* Buen ejemplo */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }
/*
* Encabezado de sección del componente
*/
.element { ... }
/*
* Encabezado de sección del componente
*
* A veces es necesario incluir contexto opcional para todo el componente. Hazlo aquí si es lo suficientemente importante.
*/
.element { ... }
/* sub contextual-componente o modificador */
.element-heading { ... }
Configura tu editor según la siguiente configuración para evitar la incoherencia y las diferencias comunes en el código:
refiérase al documento y agregue esta información de configuración al .editorconfig en el archivo. Por ejemplo:ejemplos de .editorconfig en Bootstrap. Para más información, consulte acerca de EditorConfig.