本文的主要思想借鉴与 没那么难，谈CSS的设计模式
定义："设计模式（Design pattern）是一套被反复使用、多数人知晓的、经过分类的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问，设计模式于己于他人于系统都是多赢的；设计模式使代码编制真正工程化；设计模式是软件工程的基石脉络，如同大厦的结构一样。
css缺陷:它的任何一个规则，都是全局性的声明，会对引入它的页面当中所有相关元素起作用，不管那是不是你想要的。而独立及可组合的模块是一个可维护系统的关键所在。
使用方式:我们不需要去迎合模式，要让模式为我所用，你需要去了解它们背后的原理，要知道它们用什么方式解决了什么问题，然后借鉴之，用它的方式解决我们的问题。
设计模式
一.
1.分
分成头部、导航、侧边栏、banner区、主内容区、底部
2.拆
边框、背景、图标、字体、边距、布局方式等这些可复用的样式单独拆分出来
3.组件化
面包屑、分页、弹窗等，它们不适合被放到某一个固有模块的代码中，就可以单独的分出一段专属的css和js
4.排序
@import "mod_reset.css";
@import "ico_sprite.css";
@import "mod_btns.css";
@import "header.css";
@import "mod_tab.css";
@import "footer.css";
5.文件头部建立一个简要的目录以及相应区块的注释(区块用途逻辑等)
二.
1.避免使用元素选择器(a p)
2.避免使用群组选择器
3.注意文件的加载顺序对界面展示的影响
三.OOCSS
separating structure from skin and container from content.
.button {
width: 200px;
height: 50px;
}
.box {
width: 400px;
overflow: hidden;
}
.widget {
width: 500px;
min-height: 200px;
overflow: auto;
}
.skin {
border: solid 1px #ccc;
background: linear-gradient(#ccc, #222);
box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}
.globalwidth {
width: 980px;
margin: 0 auto;
position: relative;
padding-left: 20px;
padding-right: 20px;
overflow: hidden;
}
.header-inside {
padding-top: 20px;
padding-bottom: 20px;
height: 260px;
}
<header>
<div class="header-inside globalwidth">
</div>
</header>
<div class="main globalwidth">
</div>
<footer>
<div class="footer-inside globalwidth">
</div>
</footer>
四.SMACSS——Scalable and Modular Architecture for CSS
1.base-基础
基础的样式，最先定义好，针对某一类元素的通用固定样式
2.layout-布局
布局样式，是跟页面整体结构相关，譬如，列表，主内容，侧边栏的位置，宽高，布局方式等。
3.Module-模块
模块样式，就是我们在对页面进行拆分的过程中，所抽取分类的模块，这类的样式分别写在一起
4.State-状态
页面中的某些元素会需要响应不同的状态，比如，可用、不可用、已用、过期、警告等等。将这类样式可以组织到一起。
5.Theme-主题
主题是指版面整个的颜色、风格之类，一般网站不会有频繁的较大的改动，给我们印象比较深的是QQ空间，其他应用的不是很多，所以，这个一般不会用到，但有这样一个意识是好的，需要用到的时候，就知道该怎样规划。
五.meta css 原子类 无语义类
但是如果按照这种写法，任何css样式都可以单独分离出来写，而且不易维护，因为html和css都需要响应的修改。但是像 clearfixed float 文本布局（text-align）、Flexbox，这些没那么多可能性的值的可以考虑下。
六.BEM
严格说来，BEM不是一套有骨有肉的模式，也不仅仅局限你在CSS的层面去规划，它是一种怎样去组织、编写代码的思想
BEM (Block, Element, Modifier) is a component-based approach to web development. The idea behind it is to divide the user interface into independent blocks. This makes interface development easy and fast even with a complex UI, and it allows reuse of existing code without copying and pasting.
1.block
A logically and functionally independent page component, the equivalent of a component in Web Components. A block encapsulates behavior (JavaScript), templates, styles (CSS), and other implementation technologies. Blocks being independent allows for their re-use, as well as facilitating the project development and support process.
feature:the block name describes its purpose ("What is it?" — menu or button), not its state ("What does it look like?" — red or big).
2.element
A constituent part of a block that can't be used outside of it.
feature:
1.The element name describes its purpose ("What is this?" — item, text, etc.), not its state ("What type, or what does it look like?" — red, big, etc.).
2.The structure of an element's full name is block-name__element-name. The element name is separated from the block name with a double underscore (__).
3.Modifier
A BEM entity that defines the appearance and behavior of a block or an element.The use of modifiers is optional.
feature:
1.The modifier name describes its appearance ("What size?" or "Which theme?" and so on — size_s or theme_islands), its state ("How is it different from the others?" — disabled, focused, etc.) and its behavior ("How does it behave?" or "How does it respond to the user?" — such as directions_left-top).
2.The modifier name is separated from the block or element name by a single underscore (_).
