CSS Maintainable

CSS 设计原则和思想

• 注意：一定要起先在灰盒模式设计的时候将所有元素的尺寸完全设计好之后，才能引入 CSS，否则到后期很难顾及全局。保证尺寸计算得当。
• 优雅降级 和 渐进增强：兼容老式浏览器的显示效果的同时为新浏览器兼容的功能提出更好的视觉效果表现。
• 注意 CSS 的移动端优先还是 PC 优先适配。

一些重要概念

• z-index 和 CSS 中的层叠上下文以及层叠顺序
  • 参考：深入理解CSS中的层叠上下文和层叠顺序

CSS 可维护性

• 命名规则「语义化」。

<!-- good -->
<div class="header">
<div class="basket">
<div class="product">
<div class="searchResults">

• 基于「HTML Block」的复用，而非基于 CSS 规则的复用。

<!-- Bad -->
<div class="clearfix pull-left red etc">

/* red text */
.someSelector,
.someOtherSelector {
    color: red;
}

• 不要使用 ID 作为样式的选择器。
• 使用短横线分离对应粒度的语义描述符。

/* Square brackets denote optional parts */
.<moduleName>[-<componentName>][-<state>][-<modifier>] {}

<!-- Good Html Class for Javascript Hook -->
<div class="J_ExampleClass">Just a Example</div>

BEM 的设计思路

Block / Elements / Modifiers

• Modules are made up of components.

/* module container */
.basket {}

/* components */
.basket-title {}
.basket-item {}
.basket-productTitle {}
.basket-removeButton {}

/* component and modules with states */
.myModule-isDisabled {}
.myModule-isActive {}
.myModule-hasProducts {}
.myModule-isHidden {}
.myModule-isLoading {}

.categoryHeader {
    padding-top: 50px;
    padding-bottom: 50px;
    /* etc */
}

/* modifiers */
.categoryHeader-boys {
    background-image: url(/path/to/boys.jpg);
}

.categoryHeader-girls {
    background-image: url(/path/to/girls.jpg);
}

/* versions */
/* existing module */
.someModule {}

/* new version of module */
.someModuleVariant2 {}

属性具备一定的优先级特性，如下：

建议相关的属性说明放在一组，并按照下面的顺序排列：

1. 定位（position、left、right、top、bottom、z-index）
2. 盒子模型（display、float、width、height、margin、padding、border、border-radius）
3. 排印（font、color、background、line-height、text-align）

.mod-example {
  /* 定位 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* 盒模型 */
  display: block;
  float: right;
  width: 100px;
  height: 100px;
  margin: 15px auto;
  padding: 10px 15px;
  border: 1px solid #ccc;

  /* 排印 */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  background-color: #f5f5f5;
  text-align: center;
}

CSS 其它技巧

• 初始化清零 Clearer

/* Box-Sizing Reset */
html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}

• 隐藏元素

  display : none
  visibility : hidden
  opacity : 0
  element.detach();
  z-index : 0
  /* 标签上添加属性 hidden */
  

• 图片替换：svg / vml / Base64

CSS 样式框架

• Bootstrap: 设计思想
• Foundation
• JuiceUI
• …