模块化css

模块化css是指把页面分割成不一样的组成部分，这些组成部分能够在多种上下文中重复使用，而且互相之间没有依赖关系。当咱们须要变动样式时不会影响到其它部分。

基础样式

默认的样式，是对单个元素选择器（包括其属性选择器，伪类选择器，孩子/兄弟选择器）的基础样式设置，例如html, body, input[type=text], a:hover, etc.推荐个base库-normalize.css，它消除了不一样浏览器渲染的不一样

html, body {
  margin: 0;
  padding: 0;
}

input[type=text] {
  border: 1px solid #999;
}

a {
  color: #039;
}

a:hover {
  color: #03C;
}

模块

页面拆分为不一样的模块，给这些模块编写独立样式，模块与子模块之间通常如下横线链接

//下拉
.dropdown, .dropdown > ul {
  display: inline-block;
  border: 1px solid #283AE2;
}

.dropdown li:hover {
  background-color: #999;
}
//media
.media{padding:30px;background-color:#eeeee};
.media_title{
   font-size:16px;
   font-weight:bold
}

修饰类

对一个模块进行修饰，通常以双横线相连。下面以button模块为例

.btn{
  padding: .3em 1em;
  font-size: 14px;
  outline: none;
  color: #333333;
  cursor: pointer;
  border: 1px solid #eee
}
.btn--small{
  font-size: 12px;
}
.btn--large{
  font-size: 16px;
}

状态类（通常配合js来进行样式切换）

状态类通常以is-或者has-开头，这样的状态类通常来描绘模块当前状态下的一些特征。好比is-expanded、is-loading或者has-error

//input
input.is-error{
  color:red
}
//tab
.tabs {
  border: 1px solid #e8e8e8;
}
.tabs > .tab{
  color:#333333;
  border:none;
}
.tabs > .tab.is-active {
  border-bottom: 1px solid red;
  color: #29A288;
}

工具类

有时候咱们须要一个类来作一件简单的事，好比让文字居中，让元素显示，隐藏，左浮动等

.text-align{
  text-align: center!important;
}
.float-left{
  float: left!important;
}
.show{
  display: block!important;
}
.hide{
  display: none!important;
}

这里用到了important,由于咱们在使用这些工具类时确定是为了它的样式，因此要把优先级提到最高，防止覆盖

注意点

一、千万不要使用基于页面位置的后代选择器

好比header和footer都有button，可是header中的是红色字体，那么咱们不能写header .btn这样的类，而是应该给button增长修饰类btn--danger

.header .btn{
  color:red
}//错误写法
.btn--danger{
  color:red
}//正确写法

二、不要使用像buttn-20px这样精确的修饰符，会为后续修改带来很大的麻烦

三、不要滥用工具类，对于大部分网站来讲，最多十几个工具类就足够了