OOCSS —— 面向对象CSS
在本文中,你将学习书写CSS的最佳实践来帮助你避免不一致和冗余;实际上,这样制定标准,简化了团队开发的工作。
1）结构化
（根据不同内容分区块，加注释）
2）越多的CSS就需要越多的组织
（加二级注释）
3）*格式化
另一些人使用特殊字符如‘=’，作为搜索字符的标记:
4）交流注释用法
5）什么时间，谁做了什么
（文件头部增加文件创建和更新的摘要注释）
6）颜色值
COLORS: Green #b3d88c | Blue #0075b2 | Light Gray #eee | Dark Gray #9b9e9e | Orange #f26522 | Teal #00a99d | Yellow #fbc112
（提前定好，方便维护）
7）开发和调试
（将有问题或疑惑的地方注释出来，有时间时找同事一起解决）
8）样式重置
Eric Meyer的重置文档，去掉用不到的标签。
不过，我应该澄清一下，css重置并不适用于所有人。你有很多不使用他的理由，这由你决定。如果你要重置样式，要保持你的重置样式表尽量干净和特殊。
9）命名约定
不仅仅是上下文，有语意的命名还可以节约时间。考虑到一个公司品牌的频繁更换，如果你开发的css使用表现的类名而不是语义化的类名和id名，那么在寻找、维护css时，你将比预期花费更多的时间。
10）类名滥用
由此产生的css本身和他造成的冗余并不可怕，可怕的是他造成的困惑。作为一个设计师看到了这个form类，可能猜想是不是其他样式表里也定义了叫form的类名，然后去查找根本不存在的样式，这就是我时间浪费的原因。
11）类名不等于特异性
如果你的元素定义样式不需要类名，那就不要用。用的太多类名，不仅使你的结构和css很臃肿，也失去了他们在css 中的意义。
12）多类
虽然我不提倡使用不必要，多余的类名，但是对于通过多类保持元素表现的共用
13）分组选择器
14）一行还是多行书写？
一行
15）需要按照字母排序吗？
（结构排序或字母顺序排序，你想用哪个用哪个）
16）使用简写
17）0值
没必要给他指定单位
18）颜色模式
19）（。。。以下省略）
6.开始编写CSS
（这篇写的比较NB，直接看原文好）
1）CSS预处理器
SASS
2）BEM
块(Block)、元素(Element)和修改器（Modifier）
.site-header { ... } /* block */
.site-header__logo { ... } /* element */
.site-header__logo--xmas { ... } /* modifier */
.site-header__navigation { ... } /* element */
3）OOCSS
面向对象CSS
4）SMACSS
SMACSS代表可伸缩的和是模块化的CSS结构体系
-
基本(base)：用于一个简单的选择器的基本样式，如
clearfix - d布局（Layout）:定义网格
-
模块(Module)：一群元素相结合在一起形成的一个模块，比如说
header和sidebar - 状态（State）:元素的不同状态。如隐藏、按住，扩大等规则定义给对象
- 主题(Them)：更多的样式
-
基本(base)：用于一个简单的选择器的基本样式，如
5）Atomic Design
6）OrganicCSS
虽说没看明白啥意思，但发现一个比较吊的mixin
@mixin login-box {
@include atoms((
block,
font-size-20,
margin-top-23,
bold
));
}
可以写一写。有个库，地址：http://krasimir.github.io/organic-css/
先上一个PPT：http://takazudo.github.io/presentation-oocss-sass/。
用@extend + %占位符来实现OOCSS，多写写什么都明白了。
而且OOCSS可以用于页面布局，但要注释明白，逻辑明确。
8.崇拜CSS
其实就是让你用sass来写OOCSS，而不是用css直接写（这样会造成标签过长，失去语义化）。
和7一样。
最后，加一篇SMACSS的：
写的很好，结合实际项目，可以用来参考。
.my-module {
background-color: maroon;
position: relative;
> a {
color: aqua;
}
}
.my-module--important {
@extend .my-module;
border: 3px solid fuchsia;
}
.my-module--is-active {
background-color:red;
}
.my-module__close-button {
position: absolute;
right:;
top:;
}
分文件：
modules/_my_module.scss
modules/_child_component.scss
modules/_grandchild-component.scss
Configuration（配置）
Mixins（混合）
Grid（网格）
我们不打算从我们编译的CSS中删除每一个重复点。我们想要开发尽可能的容易，而又不影响性能。到目前为止用mixins模块代替@extend，这样并不会增加原始文件大小。