标签：
1. JavaScript钩子使用的class不能是css class，要加j或j-前缀
2. 选择器
2.1 css选择器尽量简短，层级要少，最好是1-2层
例如：.nav{} 优于 ul.nav{}
2.2 不要依赖于html层级结构
例如：.nav a{} 优于 .nav li a{}
2.3 不用Id选择器，复用度太低
2.4 用class命中元素，而不是标签
3. 不声明高度。高度仅仅用于尺寸固定的东西，例如图片和css sprite.
而p,ul,div等元素上不应当声明高度，需要时，优先使用line-height,更加灵活
4. 简写
background:red是不好的写法。因为其同时声明了
background-image:none;
background-position:top left;
background-repeat: repeat;
background-color:red;
应当用 background-color:red
只修改底边距的话，margin-bottom:0 优于 margin:0
5.使用Sass等预处理器，减少嵌套层次，最好2层以内
6. BEM命名法
BEM，即Block， Element， Modifier，是由Yandex（俄罗斯最著名的互联网企业）的开发团队提出的前端开发理论。BEM通过Block、Element、Modifier来描述页面。
Block是页面中独立存在的区块，可以在不同场合下被重用。每个页面都可以看做是多个Block组成。
Element是构成Block的元素，只有在对应Block内部才具有意义，是依赖于Block的存在。
Modifier是描述Block或Element的属性或状态。同一Block或Element可以有多个Modifier。
这三部分结合在一起，可以体现在class命名上，从而为开发者提供更友好、更有意义的css组织方式。其形式是：
.block { }
.block_modifier { }
.block__element { }
.block__element_modifier { }
7. OOCSS
Separate structure and skin
分离结构和主题是在于将一些视觉样式效果（例如background、color）作为单独的“主题”来应用。在上面的例子中的阴影效果，没有被直接写在media的样式规则内，而是被单独写在了一个名为media-shadow的class中。因此，它成为了可选择、可拆分的主题。如果不需要对应主题，什么也不要加，如果需要，加上对应的class，就是这样的思路。
Separate container and content
分离容器和内容要求使页面元素不依赖于其所处位置。在上面的例子中，css的选择符都很短，无继承选择符（例如.header .media { }），所以，这个图文排列的元件，可以在任何地方使用，且会有一致的外观。
如果需要在特定的地方让这个元件看起来不一样一些，继续为这个元件增加class，将“不一样的部分”作为可配置的选项。元件的外观仍不依赖其所处位置。
标签：
原文地址：http://www.cnblogs.com/mengff/p/5383634.html
