CSS规范

一、命名规范

  • 1、从类名可以清晰区分出其功能作用,使页面结构清晰【命名空间、标识符】;
  • 2、以组件、模块的思想去写一个区块的结构,强化结构的模块化【BEM模块思想】;
  • 3、减少多人合作、项目耦合等情况下的命名冲突【命名空间】;
  • 4、项目如果没使用样式局部作用域框架(如vue),则使用BEM命名规则。

  • 【强制】 区块、模块、组件等一个整个的结构遵循BEM命名思想;

    • .block 代表了更高级别的抽象或组件;
    • .block__element 代表.block的后代,用于形成一个完整的.block的整体;
    • .is- | .has- | .ext- 代表.block的修饰符,不使用双中划线--。
    • BEM—源自Yandex的CSS 命名方法论
    • BEM官网
  • 【强制】 用中划线连接多个单词,例如:news-list;

  • 【推荐】 在合适的地方使用命名空间;

    • 状态:以is为命名空间,表示动态的、具有交互性质的状态,例如:.is-open、.is-active、.is-selected 等;
    • 组件:以ui或者mod为命名空间,表示可复用、移植的组件模块,例如:.ui-slider、.mod-drop-menu等;
    • 扩展:以ext为命名空间,表示对组件基类的视觉形态的扩展,例如:.ext-cover等;
  • 【推荐】 一般区块都可以划分为头部、身体和尾部,因此建议给你的区块分别以 hd、bd、ft来划分;

.ui-card__hd {
    margin: 0;
}

.ui-card__bd {
    margin: 0;
}

.ui-card__ft {
    margin: 0;
}

二、代码风格

  • 【强制】 选择器 与 { 之间必须包含空格;
/* Not so great */
.selector{
}

/* Better */
.selector {
}
  • 【强制】 >、+、~ 选择器的两边各保留一个空格;
/* Not so great */
main>nav {
    padding: 10px;
}
label+input {
    margin-left: 5px;
}
input:checked~button {
    background-color: #69C;
}

/* Better */
main > nav {
    padding: 10px;
}
label + input {
    margin-left: 5px;
}
input:checked ~ button {
    background-color: #69C;
}
  • 【强制】 属性名 与之后的 : 之间不允许包含空格, : 与 属性值 之间必须包含空格;
/* Not so great */
margin :0;

/* Better */
margin: 0;
  • 【强制】 列表型属性值 书写在单行时,, 后必须跟一个空格;
/* Not so great */
font-family: Arial,sans-serif;
box-shadow: 0 0 2px rgba(0,128,0,.3);

/* Better */
font-family: Arial, sans-serif;
box-shadow: 0 0 2px rgba(0, 128, 0, .3);
  • 【强制】 当一个 rule 包含多个 selector 时,每个选择器声明必须独占一行;
/* Not so great */
.post, .page, .comment {
    line-height: 1.5;
}

/* Better */
.post,
.page,
.comment {
    line-height: 1.5;
}
  • 【强制】 属性定义必须另起一行;
/* Not so great */
.selector { margin: 0; padding: 0;}

/* Better */
.selector {
    margin: 0;
    padding: 0;
}
  • 【强制】 属性定义后必须以分号结尾;
/* Not so great */
.selector {
    margin: 0
}

/* Better */
.selector {
    margin: 0;
}

三、属性

  • 【建议】 同一 rule set 下的属性在书写时,应按功能进行分组,并以 Positioning Model > Box Model > Typographic > Visual 的顺序书写,以提高代码的可读性。

    • 1、Positioning Model 布局方式、位置;相关属性包括:position / top / right / bottom / left / z-index / display / float / ...
    • 2、Box model 盒模型;相关属性包括:width / height / padding / margin / border / overflow / ...
    • 3、Typographic 文本排版;相关属性包括:font / line-height / text-align / word-wrap / ...
    • 4、Visual 视觉外观;相关属性包括:color / background / list-style / transform / animation / transition / ...
    • 5、如果包含 content 属性,应放在最前面;
    • 注:Positioning 处在第一位,因为他可以使一个元素脱离正常文本流,并且覆盖盒模型相关的样式。盒模型紧跟其后,因为他决定了一个组件的大小和位置。其他属性只在组件 内部 起作用或者不会对前面两种情况的结果产生影响,所以他们排在后面。 详情请查看
  • 【强制】 属性选择器中的值必须用双引号包围。不允许使用单引号,不允许不使用引号。

/* Not so great */
article[character='juliet'] {
    voice-family: "Vivien Leigh", victoria, female
}

/* Better */
article[character="juliet"] {
    voice-family: "Vivien Leigh", victoria, female
}

四、值与单位

  • 【强制】 文本内容必须用双引号包围,不允许使用单引号;
/* Not so great */
html[lang|=zh] q:before {
    font-family: 'Microsoft YaHei', sans-serif;
    content: '“';
}

/* Better */
html[lang|="zh"] q:after {
    font-family: "Microsoft YaHei", sans-serif;
    content: "“";
}
  • 【强制】 当数值为 0 - 1 之间的小数时,省略整数部分的 0;
/* Not so great */
.selector {
    opacity: 0.8;
}

/* Better */
.selector {
    opacity: .8;
}
  • 【强制】 长度为 0 时须省略单位 (也只有长度单位可省);
/* Not so great */
.selector {
    margin: 0px 10px;
}

/* Better */
.selector {
    margin: 0 10px;
}
  • 【强制】 url() 函数中的路径不加引号;
/* Not so great */
.selector {
    background: url("bg.png");
}

/* Better */
.selector {
    background: url(bg.png);
}
  • 【强制】 RGB颜色值必须使用十六进制记号形式 #rrggbb,不允许使用 rgb(),带有alpha的颜色信息可以使用 rgba();颜色值不允许使用命名色值;
/* Not so great */
.selector {
    box-shadow: 0 0 2px rgba(0,128,0,.3);
    border-color: rgb(0, 128, 0);
    color: gray;
}

/* Better */
.selector {
    box-shadow: 0 0 2px rgba(0, 128, 0, .3);
    border-color: #008000;
    color: #999;
}
  • 【建议】 颜色值中的英文字符采用小写,至少要保证同一项目内一致;
/* Not so great */
.selector {
    color: #0073AA;
}

/* Better */
.selector {
    color: #0073aa;
}
  • 【强制】 必须同时给出水平和垂直方向的位置;
/* Not so great */
.selector {
    background-position: top; /* 50% 0% */
}

/* Better */
.selector {
    background-position: center top; /* 50% 0% */
}
  • 【强制】 font-weight 属性必须使用数值方式描述;
    • CSS 的字重分 100 – 900 共九档,但目前受字体本身质量和浏览器的限制,实际上支持 400 和 700 两档,分别等价于关键词 normal 和 bold。浏览器本身使用一系列启发式规则来进行匹配,在 >700 时一般匹配字体的 Regular 字重,>=700 时匹配 Bold 字重。但已有浏览器开始支持 =600 时匹配 Semibold 字重 (见此表),故使用数值描述增加了灵活性,也更简短。
/* Not so great */
.selector {
    font-weight: bold;
}

/* Better */
.selector {
    font-weight: 700;
}

五、变换与动画

  • 【强制】 使用 transition 定义属性时应遵循以下顺序:
    • [ transition-property ]:检索或设置对象中的参与过渡的属性;
    • [ transition-duration ]:检索或设置对象过渡的持续时间;
    • [ transition-timing-function ]:检索或设置对象中过渡的动画类型;
    • [ transition-delay ]:检索或设置对象延迟过渡的时间;
    • transition:[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]
    • 如果顺序错乱,在某些安卓浏览器上会让动画失效。
/* Not so great */
.selector {
    transition: color .2s 0 ease-in;
}

/* Better */
.selector {
    transition: color .2s ease-in 0;
}
  • 【建议】 尽可能在浏览器能高效实现的属性上添加过渡和动画:
    • transform: translate(npx, npx);
    • transform: scale(n);
    • transform: rotate(ndeg);
    • opacity: 0..1;

六、注释

  • 【强制】 星号与内容之间必须保留一个空格;
/* 新闻中心表格隔行变色 */
  • 【强制】 星号要一列对齐,星号与内容之间必须保留一个空格;
/**
 * Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
 */
  • 【强制】 文件顶部必须包含文件注释,用 @file 标识文件说明。星号要一列对齐,星号与内容之间必须保留一个空格,标识符冒号与内容之间必须保留一个空格;
/**
 * @file: 文件概要描述
 * @author: author-name(mail-name@domain.com)
 *          author-name2(mail-name2@domain.com)
 * @update: 2015-04-29 00:02:45
 */
注:详情查看
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里属于IT工程师。