你值得拥有的CSS编码规范

相信大多数开发者都很了解js的编码规范，但是对css的编码要求都不高，如果你的css代码经常处于很难阅读的状态，那么你就很需要一套完善的class命名和css编码规范了。

语法规则

• 每条声明都应该独占一行
• 每条声明语句的 

  :

   后应该插入一个空格
• 声明块的右花括号应当单独成行
• 所有声明语句都应当以分号结尾
• 为了代码的易读性，在每个声明块的左花括号前添加一个空格
• 对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格
• 对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，

  .5

   代替 

  0.5

  ）
• 十六进制值应该全部小写
• 尽量使用简写形式的十六进制值，例如，用 

  #fff

   代替 

  #ffffff

• 为选择器中的属性添加双引号，例如，

  input[type="text"]

• 避免为 0 值指定单位，例如，用 

  margin: 0;

   代替 

  margin: 0px

.box,
.card,
.wrapper[type="textbox"] {
  border: 1px solid #ccc;
  padding: 0;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}
           

声明顺序

1. Positioning：位置属性（position、right、top、z-index、display、float等）
2. Box module：盒模型（width、height、padding、margin等）
3. Typographic：排版（font、line-height、text-algin、letter-spacing等）
4. Visual：视觉相关（background、border等）
5. Other：其他（animation、transition、opacity等）

排序原因：因为位置属性可以决定元素在文档流中是否存在，可以覆盖盒模型的相关配置，所以理所应当排在首位；盒模型决定了元素的大小和间距，所以排在第二位；其他属性只会影响元素内部或者只是视觉类不影响全局，所以排在前两位之后。

.example {
  /* Positioning */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: flex;

  /* Box-model */
  width: 100px;
  height: 100px;
  padding: 10px;
  margin: 0;

  /* Typography */
  font: normal 14px 'Microsoft YaHei', Arial, sans-serif;
  line-height: 1.5;
  color: #000;
  letter-spacing: 0;
  text-align: center;

  /* Visual */
  background-color: #ddd;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);

  /* Other */
  animation: 1s scale linear infinite;
  transition: all 0.2s ease-in-out;
  opacity: 0.8;
}
           

BEM命名规范

对于class的命名，我们可以直接选用BEM命名规范。BEM是一种组件化的 CSS 命名方法和规范，由俄罗斯 Yandex 团队所提出，使用BEM可以更好地将用户页面划分为独立的块，有利于团队开发。

Block（块）

block是个功能独立的页面组件，支持重复和嵌套，每个块名必须是唯一的，明确指出是哪个块。

Element（元素）

元素是块的组成部分，是依赖上下文的，用于描述它是什么，但不是它的状态。元素之间可以互相嵌套，但元素永远是模块的一部分，而不是另一个元素的一部分。

Modifier（修饰器）

修饰器可以跟块或者元素一起使用，主要是对已定义的元素或块进行深度的装饰或小的区分，因此修饰器不能单独使用，必须依赖于元素或块，防止混淆和冲突。

具体规则如下：

• 块名称为其元素和修饰符定义了命名空间。
• 块名称与元素名称之间用双连字符

  --

  分隔。
• 块名称与修饰符或元素与修饰符之间用双下划线

  __

  分隔。
• 命名一般使用小写字母。
• 单词之间可以使用

  -

  分隔。

使用模式：

.block { }

.block__element { }

.block--modifier { }

.block__element--modifier { }

举个实例：

<div class="page">
  <div class="content">
    <div class="search-form">
      <div class="search-form__title"></div>
      <div class="search-form__btn btn--green"></div>
      <div class="search-form__btn btn--red"></div>
    </div>
  </div>
</div>
           

常用 className-关键词

• 页面结构相关

页面：page

容器：wrapper、container、

头部：header

内容/主体：content、con、main、basic

页脚：footer

侧边栏：sider、sidebar、leftsidebar、rightsidebar

导航：nav、mainnav、subnav、topnav

菜单：menu、mainmenu、submenu

位置：fixed、center、left、right

• 功能相关

标题：title

摘要：summary

标签：label、tag

标志：logo

广告：banner

登录：login、logout

搜索：search

状态：state、status

页签：tab

列表：list、form、table

项目：item、subitem

热点：hot

新闻：news

链接：link

滚动：scroll

注释/描述：tips、notes、desc、detail、info

进度：progress

图标：icon

信息：msg

版权：copyright

头像：avatar

指南：guide

设置：setting

按钮/操作：btn、opt

移出：delete、remove、cancel

分割：divider

覆盖/皮肤：cover、mask

重命名：rename

属性：prop

用户：user

日期：date

单选：radio

图片：photo、img

等级：level

• 状态相关

激活：active

悬停：hover

禁止：disabled

可操作：optabled、editabled

选中：checked、selected

当前：current

完成：finished、success

错误：error、failed

高亮：highlight

播放：play、pause、stop