css书写规则总结

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，将“不一样的部分”作为可配置的选项。元件的外观仍不依赖其所处位置。