CSS
<h3>Class和ID</h3>
<ul>
<li>使用语义化、通用的命名方式</li>
<li>使用连字符-作为ID,Class名称界定符,不要驼峰命名法和下划线；</li>
<li>避免选择器嵌套层级过多，尽量少于 3 级；</li>
<li>避免选择器和 Class、ID 叠加使用；</li>
<li>不要使用拼音命名Class和ID</li>
</ul>
<p>出于性能考量，在没有必要的情况下避免元素选择器叠加 Class、ID 使用。
元素选择器和 ID、Class 混合使用也违反关注分离原则。如果HTML标签修改了，就要再去修改 CSS 代码，不利于后期维护。</p>
<p>示例：</p>
<pre><code class="language-css">// 错误示例：命名过长、使用拼音
.custom-icon-ziying-baibaoxiang-qiyefuwubiaoqian{
content: "\e627";
}
// 正确示例
.custom-icon-delete{
// ...
}
.custom-icon-goods{
// ...
}
</code></pre>
<h3>声明顺序</h3>
<p>相关属性应为一组，推荐的样式编写顺序 ：位置/显示 -> 容器/大小 -> 排版/文本 -> 装饰</p>
<ul>
<li>Positioning</li>
<li>Box model</li>
<li>Typographic</li>
<li>Visual</li>
</ul>
<pre><code class="language-css">.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box model */
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid #e5e5e5;
border-radius: 3px;
margin: 10px;
float: right;
overflow: hidden;
/* Typographic */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
text-align: center;
/* Visual */
background-color: #f5f5f5;
color: #fff;
opacity: .8;
/* Other */
cursor: pointer;
}</code></pre>