深入理解css 笔记（9）

模块化 CSS 是指把页面分割成不同的组成部分，这些组成部分可以在多种上下文中重复使用，并且互相之间没有依赖关系。最终目的是，当我们修改其中一部分 css 时，不会对其他部分产生意料之外的影响。

  开始写模块化样式之前，需要先配置好环境。每个样式表的开头都要歇一歇给整个页面使用的通用规则，模块化 CSS 也不例外。这些规则通常被称为基础样式，其他的样式是构建在这些基础样式之上的。基础样式本身不是模块化的，但它会为后面编写模块化样式打好基础。比如 box-sizing,font-family,基础样式配置完成后，很少会再修改。我们会再基础样式的稳定表现之上，构建模块化 css。

 

<style>
.message{
  padding 0.8em 1.2em;
  border-radius:0.2em;
  border:1px solid #3655559;
  color:#365559;
  background-color:#e0f0f2;
}
</style>

<div class="message">
Save Success!
</div>

  这个代码和其他css代码差不多。但是这里有很多模块化css的原则。模块的选择器由单个类型构成，这非常重要。选择器里没有其他规则来约束这些样式仅作用再页面的某个地方。比如前面跟一个#sidebar就意味着这个模块只能用在#sidebar元素内部。没有这些约束，模块就可以在任意上下文中重复使用。

  比如一个项目中出现了好几个相似的按钮：.sava-form button ,login-form button ,toolbar .button。样式表里多次出现相同的代码，尽管这并不是完全的复制。重复是为了获得一致的体验，但是随着时间的推移，不同的按钮之间还是发生了一些不一样的改变。有些按钮内边距不同，有的颜色不同。解决方法就是把按钮重构成一个可复用的模块，不受页面位置的限制。创建模块不但可以精简代码，还可以保证视觉一致性。这样看上去更专业，不会给人仓促堆砌的感觉。用户在潜意识里也会更容易相信我们的程序。

  通过定义一个以模块名称的新类名来创建一个修饰符。例如.message-success .message-error。有些喜欢用双连字符来在状态之间。这个是一个叫 BEM的css命名规范流行起来的。也有一些其他的方法。

  在模块中使用选择器例如.body h4来匹配标题元素，这么做是允许的，因为h4就是一个标题，其他例如img li也可以。但是要尽量避免使用基于通用标签类型的匹配，比如div和span.最初建立模块的时候，可能只是span做一件事，但是谁也说不准以后会不会出于其他目的再添加第二个san，后面就比较麻烦了。可能涉及到的都要改一遍。

  有时候，我们需要用一个类对元素做一件简单明确的事，比如让文字居中，让元素浮动，或者清除浮动。这样的类被称为工具类。虽然我不太用。因为一行代码换一个类。不确定是否值得。工具类一般是唯一应该使用important注释的地方。这样的话，不管哪里用到工具类，都可以生效。