Draco

选择器、属性和值都使用小写 在xhtml标准中规定了所有标签、属性和值都小写，CSS也是如此。 单行写完一个选择器定义 便于选择器的寻找和阅读，也便于插入新选择器和编辑，便于模块等的识别。去除多余空格，使代码紧凑减少换行。 如果有嵌套定义，可以采取内部单行的形式。 1 2 3 4 5 6 7 8

CSS文件的分类和引用顺序 通常，一个项目我们只引用一个CSS，但是对于较大的项目，我们需要把CSS文件进行分类。 我们按照CSS的性质和用途，将CSS文件分成“公共型样式”、“特殊型样式”、“皮肤型样式”，并以此顺序引用（按需求决定是否添加版本号）。 公共型样式：包括了以下几个部分：“标签的重置和设置默认值”、“统一调用背景图和清除浮动或其他需统一处理的长样式”、“网站通用布局

使用类选择器，放弃ID选择器 ID在一个页面中的唯一性导致了如果以ID为选择器来写CSS，就无法重用。 NEC特殊字符："-"连字符 "-"在本规范中并不表示连字符的含义。 她只表示两种含义：分类前缀分隔符、扩展分隔符，详见以下具体规则。 分类的命名方法：使用单个字母+"-"为前缀 布局（grid）（.g-）；模块（module）（.m-）；元件（unit）（.

不符合NEC规范的选择器用法 .class{} 不要以一个没有类别的样式作为主选择器，这样的选择器只能作为后代选择器使用，比如.m-xxx .class{}。 .m-xxx div{} 不要以没有语义的标签作为选择器，这会造成大面积污染，除非你可以断定现在或将来你的这个选择器不会污染其他同类。 .g-xxx .class{} 不要在页面布局中使用后代选择器，因为这个后代

最佳选择器写法（模块） 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 /* 这是某个模块 */ .m-nav{}/* 模块容器 */ .m-nav li,.m

值缩写 缩写值可以减少CSS文件大小，并增加可读性和可维护性。 但并非所有的值都必须缩写，因为当一个属性的值缩写时，总是会将所有项都设置一遍，而有时候我们不希望设置值里的某些项。 1 2 3 4 5 6 7 /* 比如我们用下面这个样式来让某个定宽的容器水平居中，我们要的只是left和right，