vlambda博客
学习文章列表

吐血整理的前端代码规范系列 -- css规范

 是新朋友吗?记得先点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;}

源自:https://juejin.im/post/6862187926849159182

感谢 · 转发欢迎大家留言