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