css3代码书写规范

最新推荐文章于 2021-08-13 09:27:24 发布

weixin_33744854

最新推荐文章于 2021-08-13 09:27:24 发布

阅读量95

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/2393989/blog/3026325

版权

2019独角兽企业重金招聘Python工程师标准>>>

不要使用 @import 与 <link> 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。

1，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;
}

2，16进制颜色代码缩写

# Bad    
.color{#ff0000;}
# Good
.color{#f00;}

3，连字符CSS选择器命名规范

1>.长名称或词组可以使用中横线来为选择器命名。 2>.使用有意义的字母组合为选择器命名 3>.避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。

4,不要随意使用Id id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。

5，将同一区块的样式写在一起，方便后期查找修改。

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

6，媒体查询（Media query）的位置将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。

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

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

7，带前缀的属性当使用特定厂商的带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。

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

8,注释代码是由人编写并维护的。请确保你的代码能够自描述、注释良好并且易于他人理解。好的代码注释能够传达上下文关系和代码目的。不要简单地重申组件或 class 名称。

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

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

转载于:https://my.oschina.net/u/2393989/blog/3026325