前端开发样式表规范

CSS书写顺序

1、DOM 节点属性（display及其衍生属性：display:flex; justify-content: center等）

2、位置关系（position、left、top等）

3、content 外属性（margin、border、padding）

4、content 属性（max-width、width、height）

5、行内元素属性（ text-align、color、background等）

6、元素展示属性（cursor、opacity、border- radius）

例：

display：flex；

justify-content：center；

align-items：center；

position：absolute；

left：0；

top：0；

right：0；

bottom：0；

margin：0 auto；

border：1px solid #eee；

padding：10px；

width：100px；

height：50px；

text-align：center；

color：#fff；

background-color：#000；

cursor：point；

opacity：.5；

border-radius：50%；

overflow:scroll；

 

class 命名规则

 

1、class命名以 ‘-’ 连接， 例： c-submit-popup

2、页面类型的父节点（写进 router 为准），使用 p-xxx

3、组件类型的父节点，使用 c-xxx，例：c-submit-btn

4、避免单独使用 header、footer 等，布局类型的使用 l-xxx，例： l-top-wrapper

 

嵌套规则

 

1、单 vue 页内 style 应全部包裹在父节点样式内

2、DOM 嵌套等级不超过三级可使用 c-xx 与 c-xx-xxx 的类名，并在 style 内可使用 &-xxx

3、DOM 嵌套等级超过三级应降低 style 嵌套，具体方法待补充

 

媒体查询

尽量将媒体查询的规则靠近与他们相关的规则，不要将他们一起放到一个独立的样式文件中，或者丢在文档的最底部，这样做只会让大家以后更容易忘记他们。