前端规范 - css规范

前言：

• css是个神奇的东西，要精通css很难，但是不精通的话，通过各种拼凑，也能写出正常的界面。所以目前css届的前端网红，目前只有张鑫旭
• css有性能一说，但影响不大，除非你使用那些没人使用的filter之类的魔法写法。比如选择器不能过长，但你发现选择器比较长的话，也不会有明显的性能问题
• 团队内部推广css规范，主要目的为2个：可维护性+避免样式污染
• 所以相对于JS，css的规范不是那么多，但也值得注意一下

[推荐] 属性顺序

1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)

备注：
1、顺序原则：影响其余元素的属性，或者引发界面重绘的，放在前面
2、同类属性，严格相邻书写，如 left top、width height

[推荐] 命名规范

使用BEM命名规范，即Block（块）Element（元素）Modifier（修饰器)，

.block{}
.block__element{}
.block__element--modifier{}

# 例子
.el-button--primary{}
.el-input__inner{}
.article__button--primary{}

[强制] 独立作用域，避免样式污染

！！！ 非常重要
使用vue开发的话，单文件组件使用scoped包裹，然后根据组件根节点设置命名

<style lang="scss" scoped>

其余无法使用scoped的，组件根节点设置命名，

return (
	<div class="xxx_main">
		...
	</div>
)

<style>
	.xxx_main{
		# ... 该模块其余所有的样式都被根节点命名包裹起来
	}
</style>

[推荐] 命名尽量独立

如上文，虽然尽量使用独立作用域，但为了避免有隐藏的全局性影响，要避免使用 title 、page、content等复用度比较高的命名方式

[推荐] 常用命名

• disabled 不可用
• x-title 标题类
• -dialog 弹窗类
• -box 外层div包裹类

其余常见命名，可参考当前项目使用的UI组件库
如当前vue项目，使用了element ui，则常见命名参考element ui

关于内联样式

允许单行内联
单行内联样式，属性不能超过3个
背景图片等比较复杂的样式，不允许
绝不允许多行样式内联

慎用 !important

使用 !important容易造成后面维护困难，尽量利用css优先级来做样式的覆盖

z-index设置

不要设置太大，今天你设置一个 z:index: 99999999，明天他设置一个 z:index: 999999999，一个8个9，一个9个9，扩展麻烦
不要设置太小，不要以个位数作为值，哪天你需要在其中间插入数据，可能就不够用了
设置 2、3位数即可，比如 70、80这种， 中间留有空白

使用class代替id做选择器

由于class具有可复用性，所以尽量避免使用id做选择器

[强制] 全局样式周知

一定要注意避免全局污染
十分重要！
十分重要！
十分重要！

字体选择

千万不要选择版权未知的字体，容易造成侵权
引入外部字体时，一定要注意字体大小，尤其是移动端

[推荐] css动画代替js动画

由于js动画占据主线程，能使用css完成的动画效果，尽量就不使用js来完成

手机端响应式处理

基于375像素的宽度直接写px，而不写vw、rem等需要转义的数值，通过postcss-px-to-viewport插件，将px最终转换为vw展示
优点：

• 省了从设计稿上拿到数据后再计算
• 阅读起来直观，便于继续修改

# 推荐使用，哪天将宽度修改成110px，直接改代码即可
div{
	width: 100px;
}

# 不推荐使用，你能看出使多大来么？
div{
	width: 26.66666vw;
}

那些不要求的规范

如下规范对开发、性能并无明细提升，反而会影响可读性+维护效率，故不做要求
由于很多样式可能从蓝湖等设计文件中直接拷贝出来，直接粘贴就好，不用特意去修改如下规则

不要求避免为 0 值指定单位

可以写 0px，带有单位的话，维护起来比较顺手

# 如下写法允许
	width: 0;

# 如下写法也允许
	width: 0px;

不要求使用简写形式的十六进制值

可以写#ff0000

不要求去掉小数点前的”0″

可以写 opacity: 0.5

不要求属性必须使用缩写

# 如下写法允许
background-color: #cccccc;
background-image: url(xxx);
background-repeat: no-repeat;

# 如下写法也允许
background: #cccccc url(xxx) no-repeat;

欢迎查阅本专栏其余前端相关规范

• html css js 三驾马车 3篇
  前端规范 - html规范
  前端规范 - css规范
  前端规范 - js开发规范

• 开发框架类 1篇
  前端规范 - vue开发规范

• 开发实践类 5篇
  前端规范 - git使用规范
  前端规范 - 前端注释规范
  前端规范 - 前端广义安全规范
  前端规范 - 前后端接口规范
  前端规范 - 前端项目开发规范