vlambda博客
学习文章列表

△ 是新朋友吗？记得先点web前端学习圈关注我哦～

一.命名规范(BEM规范)

BEM规范是一种主流的css命名规范，BEM分别对应的是block ， element 和 modifier，为的是结束混乱的命名方式，达到一个语义化的CSS命名方式。

1.1 什么是Block

在BEM规范中，block（块）表示一个组件的意思，假设你要写一个按钮的组件，只需要设置一个 .button 类的按钮，然后可以在任何按钮上使用该类，就可以生成该组件的传统样式。在BEM 中，块被写为和 class 的名字一样，如下所示：

.button {}
.header {}

BEM 使用 .button 而不是直接使用<button>元素的原因是因为类名具有无限的可复用性。举个例子，如果将 <button> 元素的背景颜色设置为红色，则所有  都将被强制继承红色背景。如果你要给你页面上某个按钮设置不同的颜色，你必须通过覆盖你的 <button> 元素来修复代码，这种方式不仅仅会使你的css代码杂乱无章，并且可能会让各个<button>元素之互相影响。

/* good */.button { background-color: red; }.button--secondary { background-color: blue; }
/* bad */button { background-color: red; }.parent button { background-color: blue;}

如上正确示范代码所示，如果设置了一个 .button 类的按钮，则可以在任何 <button> 元素上选择是否使用 .button 类。那么，如果你需要一个不同的背景颜色，你所做的就是改成一个新的 class，比如说 .button--secondary，而这里的--secondary，其实就是下面会讲到的修饰符（modifier）。

1.2 什么是Element

元素是块的子节点，元素表示的是目的，而不是状态。块与元素之间用一个双下划线隔开，所以，如果你看到一个例如.form__row这样的类名 ，你会马上知道 .form 块中有一个 row 元素。

/* good */.form__row {
}
/* bad */.form .row {
}

要特别注意的是，对于Element来说，不能脱离Block父级单独使用，如下代码所示：

/* good */<header class="header"> <p class="header__body"></p></header>
/* bad */<header> <p class="header__body"></p></header>

1.3 什么是Modifier

修饰符是改变某个块的外观的标志。要使用修饰符，用一个双短横线线隔开，从上面1.1的示例中可以看到，修改的按钮将被命名为 .button--secondary,--secondary就是一个修饰符，

.header--first {
}
.header__button--selected {
}

同样要特别注意的是，对于Modifier来说，不能脱离Block和Element父级单独使用，如下代码所示：

 /* good */<p class="header"> <p class="header__body"> <button class="header__button header__button--primary"></button> <button class="header__button header__button--default"></button> </p></p>
/* bad */<p> <p> <button class="header__button--primary"></button> <button class="header__button--default"></button> </p></p>

二.属性值

2.1 数值

当数值为 0 - 1 之间的小数时，建议省略整数部分的 0。

/* good */.panel { opacity: .8}
/* bad */.panel { opacity: 0.8}

2.2 长度

当长度为 0 时建议省略单位。

/* good */.list { padding: 0 5px;}
/* bad */.list { padding: 0px 5px;}

2.3  颜色

建议不使用命名色值。

/*

 good */.button--success { color: #90ee90;}
/* bad */.button--success { color: lightgreen;5.2 字重[强制] font-weight 属性必须使用数值方式描述。

2.4 清除浮动

建议当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。

2.5 !important

除公共样式之外，在业务代码中尽量不能使用 !important

2.6 z-index

建议将 z-index 进行分层，对文档流外绝对定位元素的视觉层级关系进行管理。

三.字体排版

3.1 字号

因为 Windows 的字体渲染机制，小于 12px 的文字显示效果极差、难以辨认。所以在 Windows 平台显示的中文内容，其字号应不小于 12px。

3.2 字重

font-weight 属性建议使用数值方式描述。

 /* good */h1 { font-weight: 700;}
/* bad */h1 { font-weight: bold;}

3.3 行高

line-height 在定义文本段落时，应使用数值。将line-height 设置为数值，浏览器会基于当前元素设置的 font-size 进行再次计算。在不同字号的文本段落组合中，能达到较为舒适的行间间隔效果，避免在每个设置了 font-size 都需要设置line-height。如果line-height 用于控制垂直居中，应该设置成与容器高度一致。

 /* good */ .container { line-height: 1.5; }

/* bad */.container { line-height: 15px; }

四.选择器相关

4.1 不要为 id、class 选择器添加类型选择器

既不太美观之外，同时也会影响性能。

/* good */#error,.message { font-color: #c00;}
/* bad */input#error,p.message { font-color: #c00;}