1.官方的解释：
设计模式（Design pattern）是一套被反复使用、多数人知晓的、经过分类的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性
2.可以理解为：
代码的可读性，可维护性，可拓展性
3.css预处理器
Less、Sass
4.目前比较流行的css设计模式有：
OOCSS、SMACSS、Meta CSS、BEM
4.1.oocss 结构和皮肤分离，容器和内容分离
意思是推荐将结构、皮肤、内容的样式代码独立，以便开发出容易组合的样式类集合。
例子：
css
//结构 容器
.container {
width: 1200px;
margin: 0 auto;
}
//皮肤 分离
.header-wrap {
height: 400px;
background: #f1f1f1;
border-shadow: 0 0 10px 1px rgba(0, 0, 0, .5);
}
//皮肤 分离
.footer-warp {
height: 200px;
background: #000;
border-shadow: 0 0 10px 1px rgba(0, 0, 0, .8);
}
//内容 分离
.article {
font-size:14px;
line-height: 28px;
color: #999;
}
html
<header>
<div class="header-warp container">
</div>
</header>
<div class="main container">
<article class="article">文字文字</article>
</div>
<footer>
<div class="footer-warp container">
</div>
</footer>
详情链接：https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/
4.2.SMACSS
它是一套很好设计思路，将公用的样式抽取出来放到对应的文件，易于代码的维护，扩展。
它的核心是：
1、Base（基础）
基础的样式，就是一些需要最先定义好，针对于某一类元素的通用固定样式。
2、Layout（布局）
布局样式，是跟页面整体结构相关，譬如，列表，主内容，侧边栏的位置、宽高、布局方式等。
3、Module（模块）
模块样式，就是我们在对页面进行拆的过程中，所抽取分类的模块，这类的样式分别写到一起。
4、State（状态）
页面中的某些元素会需要响应不同的状态，比如，可用、不可用、已用、过期、警告等等。将这类样式可以组织到一起。
5、Theme（主题）
主题是指版面整个的颜色、风格之类，一般网站不会有频繁的较大的改动，给我们印象比较深的是QQ空间，其他应用的不是很多，所以，这个一般不会用到，但有这样一个意识是好的，需要用到的时候，就知道该怎样规划
4.3.Meta CSS
原子类，无语义类。
优点：在某些项目很适合用原子类，比如每一个属性都需要自由组合的项目，用原子类可以快速解决样式重复的重写地狱。
缺点： 样式组合过多，维护困难
.fl { float: left }
.fr { float: right }
.lh-24 { line-height: 24px; }
.pt-10 { padding-top: 10px; }
.pt-20 { padding-top: 20px; }
.pl-10 { padding-left: 10px; }
.pl-20 { padding-left: 20px; }
.pr-10 { padding-right: 10px; }
.pb-10 { padding-bottom: 10px; }
.mt-10 { margin-top: 10px; }
.ml-10 { margin-left: 10px; }
.mr-10 { margin-right: 10px; }
.mb-10 { margin-bottom: 10px; }
.font-14 { font-size: 14px; }
.font-16 { font-size: 16px; }
4.4.BEM
BEM代表 “块（block）,元素（element）,修饰符（modifier）”
它是一种思想，是一套命名规则。
优点：能让我们仅仅通过类名就能判断出这个类属于哪个模块、属于哪个元素、包括哪些样式，快速定位对应的元素。对于可读性，可维护性，可拓展性是一个很好的诠释。
缺点：可能会导致类名过长
css
.page__header { padding: 20px; }
.page__footer { padding: 50px; }
.header__buttom_text {
font-size: 14px;
color: #333;
}
.footer__buttom_text {
font-size: 16px;
color: #fff;
}
.buttom {
width: 100px;
height: 30px;
text-align: center;
}
.button_size_s {
font-size: 13px;
line-height: 24px;
}
.button_size_m {
font-size: 15px;
line-height: 28px;
}
.button_active { background: blue; }
.button_error { background: red; }
.button_warning { background: yellow; }
.button__icon { display: inline-block; }
.button__text { display: inline-block; font-size: 12px; }
html
<header class="page page__header">
<button class="button header__buttom_text">...</button>
</header>
<div class="page main">
<button class="button button_size_s">...</button>
<button class="button button_size_m">...</button>
</div>
<footer class="page page__footer">
<button class="button footer__buttom_text">...</button>
</footer>
具体用法可查看： https://en.bem.info/methodology/css/#how-do-i-make-an-html-wrapper
5.如何正确使用设计模式？
任何模式都有自己的好处和缺点，我们要做的就是在模式中寻找经验，能够根据不同的项目做对应的调整。不要局限于模式，学会在模式中扩展。
（1）重置样式(normalize.css)：重置浏览器中的默认样式 （也可以用reset.css)
（2）公用模块(common.css)： 头部，导航、侧边栏、banner区、主内容容器、底部等
（3）公用元素(public.css)：边框、背景、图标、字体、边距、行距，清除浮动，布局方式等等
（4）页面私有样式(main.css)： 一些页面上不能公用的样式
（5）响应式布局样式(response.css)：媒体查询根据不同屏幕尺寸写的样式
（6）引用排序: (有利于继承或层叠覆盖）
