CSS 书写规范 ​

项目Css文件结构 ​

• 项目 static/style/theme.less 覆盖 cix 主题色
• 项目 static/style/common.less 项目特有的公共样式

命名空间规范建议 ​

• 布局：以 g 为命名空间，例如：.g-wrap 、.g-header、.g-content。
• 状态：以 s 为命名空间，表示动态的、具有交互性质的状态，例如：.s-current、s-selected。
• 工具：以 u 为命名空间，表示不耦合业务逻辑的、可复用的的工具，例如：u-clearfix、u-ellipsis。
• 组件：以 m 为命名空间，表示可复用、移植的组件模块，例如：m-slider、m-dropMenu。
• 钩子：以 j 为命名空间，表示特定给 JavaScript 调用的类名，例如：j-request、j-open。

用中划线进行链接 ​

• 能良好区分 JavaScript 变量命名

字符小写 ​

定义的选择器名，属性及属性值的书写皆为小写。

数值与单位 ​

• 当长度值为 0 时省略单位。

  margin: 0px autoleft: 0px;

  margin: 0 auto;left: 0;

样式属性顺序 ​

单个样式规则下的属性在书写时，应按功能进行分组，并以 布局方式 > 盒模型 > 文本排版 > 视觉外观 的顺序书写，提高代码的可读性。

• 如果包含 content 属性，应放在最前面；
• 布局方式、位置，相关属性包括：position / top / right / bottom / left / z-index / display / float / ...
• 盒模型，相关属性包括：width / height / padding / margin / border / overflow / ...
• 文本排版，相关属性包括：font / line-height / text-align / word-wrap / ...
• 视觉外观，相关属性包括：color / background / list-style / transform / animation / transition / ...

布局方式、位置,处在第一位，因为他可以使一个元素脱离正常文本流，并且覆盖盒模型相关的样式。盒模型紧跟其后，因为他决定了一个组件的大小和位置。其他属性只在组件内部起作用或者不会对前面两种情况的结果产生影响，所以他们排在后面。

避免使用 !important ​

除去某些极特殊的情况，尽量不要不要使用 !important。

当存在样式覆盖层叠时，如果你发现新定义的一个样式无法覆盖一个旧的样式，只有加上 !important 才能生效时，是因为你新定义的选择器的优先级不够旧样式选择器的优先级高。所以，合理的书写新样式选择器，是完全可以规避一些看似需要使用 !important 的情况的。

SASS 使用建议嵌套层级规定 ​

使用 SASS 、 LESS 等预处理器时，建议嵌套层级不超过 3 层。

嵌套过多会降低CSS引擎的处理效率

尽量避免使用标签名 ​

使用 SASS ，或者说在 CSS 里也有这种困惑。假设我们有如下 html 结构：

<div class="g-content">
    <ul class="g-content-list">
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
    </ul>
</div>

<div class="g-content">
    <ul class="g-content-list">
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
    </ul>
</div>

在给最里层的标签命名书写样式的时候，我们有两种选择：

.g-content {
  .g-content-list {
    li {
      ...
    }
  }
}

.g-content {
  .g-content-list {
    li {
      ...
    }
  }
}

或者是

.g-content {
  .g-content-list {
    .item {
      ...
    }
  }
}

.g-content {
  .g-content-list {
    .item {
      ...
    }
  }
}

也就是，编译之后生成了下面这两个？

• .g-content .g-content-list li { }
• .g-content .g-content-list .item { }

基于 CSS 选择器的解析规则（从右向左），建议使用上述第二种 .g-content .g-content-list .item { } ，避免使用通用标签名作为选择器的一环可以提高 CSS 匹配性能。

浏览器的排版引擎解析 CSS 是基于从右向左（right-to-left）的规则，这么做是为了使样式规则能够更快地与渲染树上的节点匹配。

.vue文件引入style ​

• 配合使用scoped， 划定作用域，减少污染。
• 对于更改组件中的样式，推荐使用 穿透/deep/ 操作符，进行局部修改。

<style src="./index.less" lang="less" scoped></style>

<style src="./index.less" lang="less" scoped></style>