border-radius: 3px;
margin: 10px;
float: rightright;
overflow: hidden;
/* Typographic */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
text-align: center;
/* Visual */
background-color: #f5f5f5;
color: #fff;
opacity: .8;
/* Other */
cursor: pointer;
}
引号使用
url()、属性选择符、属性值使用双引号。 参考 Is quoting the value of url() really necessary?
CSS Code复制内容到剪贴板
/* Not recommended */
@import url(//www.google.com/css/maia.css);
html {
font-family: ‘open sans’, arial, sans-serif;
}
/* Recommended */
@import url("//www.google.com/css/maia.css");
html {
font-family: "open sans", arial, sans-serif;
}
.selector[type="text"] {
}
媒体查询（Media query）的位置
将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。
CSS Code复制内容到剪贴板
.element { … }
.element-avatar { … }
.element-selected { … }
@media (max-width: 768px) {
.element { …}
.element-avatar { … }
.element-selected { … }
}
不要使用 @import
与<link>相比，@import 要慢很多，不光增加额外的请求数，还会导致不可预料的问题。
替代办法：
使用多个 元素；
通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件；
其他 CSS 文件合并工具；
参考 don’t use @import；
链接的样式顺序：
CSS Code复制内容到剪贴板
a:link -> a:visited -> a:hover -> a:active（LoVeHAte）
