不要使用 @import 与 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。
# Bad
p{padding-top:20px; padding-bottom:20px; padding-left:20px;padding-right:20px;}
# Good
p{padding:20px}
/* 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;
}
# Bad
.color{#ff0000;}
# Good
.color{#f00;}
.video_file{position: relative;display: inline-block;width:100%;height:180px;}
.video_file .video_img,.video_file video{position:absolute;left:0;top:0;right:0;bottom:0;width: 100%;height: 100%; transform: translate(0,0);-webkit-transform: translate(0,0);}
.video_file .video_img{z-index: 10;}
.video_file video{z-index:8;}
.video_file button{background: url(http://static.kaiba315.com/video_bg.png) no-repeat;background-size: 100%;position: absolute;left: 50%;top:50%;width:3rem ;height:3rem ;margin-left:-1.5rem;margin-top: -1.5rem;text-indent: -999px;z-index: 99;border: none;}
.element { ... }
.element-avatar { ... }
.element-selected { ... }
@media (min-width: 480px) {
.element { ...}
.element-avatar { ... }
.element-selected { ... }
}
.selector {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
/* Bad example */
/* Modal header */
.modal-header {
...
}
/* Good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
...
}
服务热线 19970861797
