HTML/CSS 编写规范

为最大限度解决协同合作过程中出现的命名冲突问题、方便理解代码上下文、提高代码的执行效率，同时缩短项目交接时间、有必要制定一套简单易用的命名规范。基本原则是 class 需要遵循其代表的功能语义，模块化开发，不同业务模块使用不同前缀，公共部门使用项目缩写为前缀。

前缀规范

• 公共组件命名以项目缩写作为前缀，如一个名为 Demo 的项目，项目缩写可以是 dm，那么该项目下的项目组件和公共类可以这样命名： dm_btn（按钮）、dm_icon（图标）、dm_ipt（输入框）、dm_toolbar（工具栏）。
• 逻辑模块命名以具体描述作为前缀，如简历（resume）功能里面的非公共组件部分，以 resume 作为前缀（resume_mod、resume_text、resume_list），个人信息（profile）页面的非公共组件部分，则可以以 profile 作为前缀（profile_statge、profile_stage_title）。

格式规范

• 允许出现下划线和驼峰（大小写）。
• 除用于表示前缀的下划线外，其余下划线只有两种意义，一种代表直接父子关系，一种代表扩展关系。
• 下划线后面紧跟小写，代表直接父子关系，如：

<div class="dm_toolbar">
  <div class="dm_toolbar_header">
    <div class="dm_toolbar_header_title"></div>
  </div>
</div>
<div class="resume_mod">
  <div class="resume_mod_header"></div>
  <div class="resume_mod_footer"></div>
</div>

对应的 CSS 选择器格式：

.dm_toolbar {
  ...
}
.dm_toolbar_header {
  ...
}
.dm_toolbar_header_title {
  ...
}
.resume_mod {
  ...
}
.resume_mod_header {
  ...
}
.resume_mod_footer {
  ...
}

• 下划线后面紧跟大写，代表扩展关系，如：

<a href="javascript:;" class="dm_btn"></a>
<a href="javascript:;" class="dm_btn dm_btn_Big"></a>
<div class="resume_mod resume_mod_List">
 <div class="resume_mod_cnt"></div>
</div>

对应的CSS选择器格式：

.dm_btn {
  ...
}
.dm_btn_Big {
  ...
}
.resume_mod {
  ...
}
.resume_mod_List {
  ...
}
.resume_mod_cnt {
  ...
}
.resume_mod_List .resume_mod_cnt {
  ...
}

• 若一个样式名由多个单词组成，则从第二个单词起，每个单词的第一个字母大写，如：

<div class="resume_txtErrWrap"></div>