前端开发中需要注意的CSS命名规则以及书写顺序

1、CSS的命名——BEM规则：

CSS命名一般是用 BEM 规则命名的。它背后的想法是将用户界面划分为独立的块。
BEM的意思就是B模块(block)、E元素(element)、M修饰符(modifier)，
即：[block]__[element]--[modifier]。

模块和子元素之间用两个下划线分隔（如：order__security），子元素和修饰符之间用两个中划线分隔，（如：content__person–selected）。

● 块 Block：组件的最外层父元素定义为块。
● 元素 Elemnt：组件内部可以是一个或多个称为元素的子元素。
● 修饰符 Modifier：块或元素可能具有由修饰符表示的变体。

关于子元素E，有两种写法：

• 第一种：按照层级嵌套来写，如 block__ele1-son-inner，但是这样写会导致命名过长；

• 第二种：扁平化，一个模块下的所有子元素，无论相互层级如何，都直接连接这个模块，如
  block__inner，但是这样就无法表示层级关系，命名时也可能会出现冲突。

命名注意：

1. 一律小写;
2. 尽量用英文;
3. 尽量不缩写，除非一看就明白的单词。

2、关于CSS属性的书写顺序建议：

一般来说，要先定义好布局，即先写位置、再写大小边距，再写文字样式、背景色，最后写其他属性。

1. 位置属性：position, top, right, z-index, display, float 等
2. 自身大小及边距：width, height, padding, margin 等
3. 背景：background, border 等
4. 文字样式：font-family font-size font-style font-weight font-varient color 等
5. 文本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow 等
6. 其他：border-radius, animation, transition等

如：

.wrapper{