命名规范

Id和class的名称总是使用可以反应元素目的和用途的名称，或其他通用的名称，禁止使用晦涩难懂的名称

  1. .heavy {
  2.     font-weight: 800;
  3. }
  5. .important {
  6.     color: red;
  7. }

合理的使用Id

一般情况下不应该被用于样式，并且ID的权重很高，所以不推荐使用ID解决样式问题，而是使用class。
不推荐：

  1. .content .title {
  2.     font-size: 2px;
  3. }

css选择器中避免使用标签名

从结构、表现、行为分离的原则来看，应该尽量避免css中出现HTML标签，并且在css选择器中出现标签名会存在潜在的问题。

使用子选择器

很多前端开发人员写选择器链的时候不使用 直接子选择器（非后代选择器）。
有时，这可能会导致疼痛的设计问题并且有时候可能会很耗性能。
然而，在任何情况下，这是一个非常不好的做法。
如果你不写很通用的，需要匹配到DOM末端的选择器，你应该总是考虑直接子选择器。
不推荐：

  1. .content .title {
  2.     font-size: 2px;
  3. }

推荐：

  1. .content > .title {
  2.     font-size: 2px;
  3. }

尽量使用缩写属性

尽量使用缩写属性对于代码效率和可读性是很有用的，比如font属性。
不推荐：

  1. border-top-style: none;
  2. font-family: palatino, gerorgia, serif;
  3. font-size: 100%;
  4. line-height: 1.6;
  5. padding-bottom: 2em;
  6. padding-left: 1em;
  7. padding-right: 1em;
  8. padding-top: 0;

推荐：

  1. border-top: 0;
  2. font: 100%/1.6 palatino, gerorgia, serif;
  3. padding:0 2em 1em 0;

0后面不带单位

省略后面的单位
不推荐：

  1. padding-bottom: 0px;
  2. margin: 0em;

推荐：

  1. padding-bottom: 0;
  2. margin: 0;

属性格式

  • 为了保证一致性和可扩展性，每个声明应该用分号结束，每个声明换行。
  • 属性名的冒号后使用一个空格。出于一致性的原因，属性和值（但属性和冒号之间没有空格）的之间始终使用一个空格。
  • 每个选择器和属性声明总是使用新的一行。
  • 属性选择器或属性值用双引号（””），而不是单引号（”）括起来。
  • URI值（url()）不要使用引号。

作为最佳实践，我们应该遵循以下顺序（应该按照下表的顺序）：

结构性

  1. display
  2. position, left, top, right etc.
  3. overflow, float, clear etc.
  4. margin, padding

表现性

  1. background, border etc.
  2. font, text

不推荐

  1. .box {
  2.      font-family: 'Arial', sans-serif;
  3.      border: 3px solid #ddd;
  4.      left: 30%;
  5.      position: absolute;
  6.      text-transform: uppercase;
  7.      background-color: #eee;
  8.      right: 30%;
  9.      isplay: block;
  10.      font-size: 1.5rem;
  11.      overflow: hidden;
  12.      padding: 1em;
  13.      margin: 1em;
  14. }

推荐：

  1. .box {
  2.     display: block;
  3.     position: absolute;
  4.     left: 30%;
  5.     right: 30%;
  6.     overflow: hidden;
  7.     margin: 1em;
  8.     padding: 1em;
  9.     background-color: #eee;
  10.     border: 3px solid #ddd;
  11.     font-family: 'Arial', sans-serif;
  12.     font-size: 1.5rem;
  13.     text-transform: uppercase;
  14. }

BEM命名规范

BEM是块block、元素element、修饰符modifier的简写，是由Yandex团队提出的一种前端css命名方法论。

  • -中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。
  • __ 双下划线：双下划线用来连接块和块的子元素
  • _ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态

BEM 是一个简单又非常有用的命名约定。让你的前端代码更容易阅读和理解，更容易协作，更容易控制，更加健壮和明确，而且更加严密。

推荐写法和风格

  1. //常规写法：
  3. .xxx{}
  4. .xxx__item{}
  5. .xxx__item_current{}
  7. // 嵌套写法
  8. .xxx__item_current .mod-xxx__link{}
  9. 推荐：
  11. .xxx{}
  12. .xxx__item{}
  13. .xxx__item_hightlight{}
  14. .xxx__product-name{}
  15. .xxx__link{}
  16. .xxx__ming-zi-ke-yi-hen-chang{}
  18. // 嵌套写法
  19. .xxx__item_current{
  20.     .xxx__link{}
  21. }
  23. //对应的HTML结构如下：
  24. <ul class="xxx">
  25.     <li class="xxx__item">第一项
  26.         <div class="xxx__product-name">我是名称</div>
  27.         <span class="xxx__ming-zi-ke-yi-hen-chang">看类名</span>
  28.         <a href="#" class="xxx__link">我是link</a>
  29.     <li>
  30.     <li class="xxx__item xxx__item_current">第二项 且 当前选择项
  31.         <div class="xxx__product-name">我是名称</div>
  32.         <a href="#" class="xxx__item-link">我是link</a>
  33.     <li>
  34.     <li class="xxx__item xxx__item_hightlight">第三项 且 特殊高亮
  35.          <div class="xxx__product-name">我是名称</div>
  36.         <a href="#" class="xxx__item-link">我是link</a>
  37.     <li>
  38. </ul>