AI专业者开发社区 1 号成员
  •  0 回帖  •  4 浏览  •  4 个月前
   

CSS规范

前面的话

　　CSS 是网页样式的描述语言，CSS 规范能够使 CSS 代码风格保持一致，使得 CSS 更容易理解和维护。本文将详细介绍 CSS 规范

 

代码风格

【选择器】

　　1、选择器 与 { 之间包含空格

.selector {}

　　2、>、+、~ 选择器的两边各保留一个空格

/* good */
main > nav{}
/* bad */
main>nav {}

【属性风格】

　　1、属性名 与之后的 : 之间不包含空格， : 与 属性值 之间包含空格

margin: 0;

　　2、对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格

font-family: Arial, sans-serif;

　　3、对于只包含一条声明的样式，为了易读性和便于快速编辑，建议将语句放在同一行。对于带有多条声明的样式，应当将声明分为多行

.selector {
    margin: 0;
    padding: 0;
}
.selector { margin: 0;}

 　　4、最后一个属性值也以分号结尾，这样可以减少修改、添加和维护代码时不必要的失误和麻烦

/* good */
.selector {
    margin: 0;
    padding: 0;
}
/* bad */
.selector {
    margin: 0;
    padding: 0
}

【引号】

　　1、文本内容用双引号包围

html[lang|="zh"] q:before {
    font-family: "Microsoft YaHei", sans-serif;
    content: "“";
}

　　2、url() 函数中的路径不加引号

body {background: url(bg.png);}

【省略】

　　1、对于属性值或颜色参数，省略小于 1 的小数前面的 0 

panel {opacity: .8}

　　2、省略值为 0 时的单位，为节省不必要的字节同时也使阅读方便，将 0px、0em、0% 等值缩写为 0

.m-box{margin:0 10px;background-position:50% 0;}

【缩写】

　　1、尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff

　　2、十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分

　　3、在可以使用缩写的情况下，尽量使用属性缩写，它最大的好处就是节省了字节，便于维护，并使阅读更加一目了然

/* good */
.post {
    font: 12px/1.5 arial, sans-serif;
}
/* bad */
.post {
    font-family: arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
}

【媒体查询】

　　将媒体查询 @media 放在尽可能相关规则的附近。不要将它们打包放在一个单一样式文件中或者放在文档底部。如果把它们分开了，将来更容易被遗忘

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

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

 

注释

【单行注释】

　　星号与内容之间保留一个空格，以确保即使在编码错误的情况下也可以正确解析样式

/* 单行注释 */

【块状注释】

　　在必要的情况下，可以使用块状注释，块状注释保持统一的缩进对齐。星号要一列对齐，星号与内容之间保留一个空格

/**
 * 多行注释 1
 * 多行注释 2
 */

【文件注释】

　　文件顶部必须包含文件注释，星号要一列对齐，星号与内容之间保留一个空格，标识符冒号与内容之间保留一个空格

　　用 @name 标识文件说明，@author 标识作者，@description 为文件或模块描述，@update 为可选项，建议每次改动都更新一下

/**
 * @name: 文件名或模块名
 * @description: 文件或模块描述
 * @author: author-name(mail-name@qq.com)
 *          author-name2(mail-name2@qq.com)
 * @update: 2017-07-14 00:00
 */

 

声明顺序

　　1、私有在前，标准在后，即先写带有浏览器私有标志的，后写 W3C 标准的

.m-box {
    -webkit-box-shadow: 0 0 0 #000;
    -moz-box-shadow: 0 0 0 #000;
    box-shadow: 0 0 0 #000;
}

　　2、相关的属性声明应当归为一组，并按照（布局类属性 -> 盒模型属性 -> 文本类属性 -> 修饰类属性）顺序排列

　　布局属性处在第一位，是因为它可以使一个元素脱离正常文本流，并且覆盖盒模型相关的样式。盒模型紧跟其后，因为它决定了一个组件的大小和位置。其他属性只在组件内部起作用或者不会对前面两种情况的结果产生影响，所以它们排在后面

布局类属性     position / top / right / bottom / left / float / display / overflow 等
盒模型属性   border / margin / padding / width / height 等
文本类属性     font / line-height / text-align / word-wrap 等
修饰类属性     background / color / transition / list-style 等

　　另外，如果包含 content 属性，应放在最前面

.sidebar {
    /* formatting model */
    position: absolute;
    top: 50px;
    left: 0;
    overflow-x: hidden;

<span style="color: #008000;">/*</span><span style="color: #008000;"> box model </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
padding</span>:<span style="color: #0000ff;"> 5px</span>;<span style="color: #ff0000;">
border</span>:<span style="color: #0000ff;"> 1px solid #ddd</span>;

<span style="color: #008000;">/*</span><span style="color: #008000;"> typographic </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
font-size</span>:<span style="color: #0000ff;"> 14px</span>;<span style="color: #ff0000;">
line-height</span>:<span style="color: #0000ff;"> 20px</span>;

<span style="color: #008000;">/*</span><span style="color: #008000;"> visual </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
background</span>:<span style="color: #0000ff;"> #f5f5f5</span>;<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> #333</span>;<span style="color: #ff0000;">
-webkit-transition</span>:<span style="color: #0000ff;"> color 1s</span>;<span style="color: #ff0000;">
   -moz-transition</span>:<span style="color: #0000ff;"> color 1s</span>;<span style="color: #ff0000;">
        transition</span>:<span style="color: #0000ff;"> color 1s</span>;



}

 

避免使用

　　1、尽量不使用 !important 声明。 当需要强制指定样式且不允许任何场景覆盖时，通过标签内联和 !important 定义样式

　　2、避免耗性能的属性，如 express 和 filter。不过有时候需求大于一切

/* expression */
.class {width: expression(this.width>100?'100px':'auto');}
/* filter */
.class {filter: alpha(opacity=50);}

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

　　4、避免 sass 中不必要的嵌套, 这是因为虽然可以使用嵌套，但是并不意味着应该使用嵌套。只有在必须将样式限制在父元素内（也就是后代选择器），并且存在多个需要嵌套的元素时才使用嵌套

　　5、尽量避免使用 hack，由于浏览器自身缺陷，无法避开的时候，可以允许使用适当的 Hack。统一使用“*”和“_”分别对 IE7 和 6 进行 Hack

/* IE7 会显示灰色 #888，IE6 会显示白色#fff，其他浏览器显示黑色#000 */
.m-list{
    color:#000;
    *color:#888;
    _color:#fff;
}