css开发规范以及优化.docxVIP

1、用不带BOM头的 UTF-8编码文件（得使用编辑软件编写css文件，然后保存为不带BOM的UTF-8编码文件）。 2、尽可能将所有css写在外部样式表里面。 3、不要在外部样式表里面利用@import导入其他的css文件。 4、外部样式表内容排版，每次使用两个空格进行排版。例如: html { overflow:auto; } 5、所有外部样式表的代码都用小写，除了一些命名或者需要特别大写的。 6、尽量采用足够大的背景图来显示容器的背景，而不是利用小背景图来repeat。 7、避免使用CSS表达式（Expression）。 8、避免使用IE滤镜。 9、删除行尾的空格。 10、尽可能的注释你写的代码。 11、非必要的情况下不要使用元素标签名和ID或class进行组合。例如: ul#example {} div.error {} 12、将属性进行缩写。 13、0后面不用写单位。 14、0开头的小数，小数前的 0 可以忽略不写。例如：0.8em=.8em 15、background:url() 中无需加单引号或者双引号。 16、十六进制尽可能使用3个字符。例如：/* 不推荐 */color: #eebbcc; /* 推荐 */color: #ebc; 17、大项目中，尽量在选择器前面加上特殊应用标识的前缀。 18、所有声明都要用“;”结尾。 19、每个选择器和声明都要独立新行。例如： h1, h2, h3 { font-weight: normal; line-height: 1.2; } 20、 　　第一步：拿到设计稿（也就是美工设计出来的东东） 　　第二步：规划文件目录 　　第三步：规划样式表 　　第四步：开始动手写样式表 　　第五步：验证你的HTML/CSS 　　第六步：配合程序员调整样式表 　　第七步：优化CSS代码 21、display与visibility的差异 他们用于设置或检索是否显示对象。display隐藏对象不保留物理空间，visibility为隐藏对象保留占据的物理空间。 当浏览器渲染被占据的物理空间时，会有所消耗资源。 * 不赞成 - visibility:hidden; * 建议用 - display:none; 22、border:none;与border:0;的区别 和display与visibility的关系类似，分别不保留与保留空间。 更多的是border:0;尽管可以隐藏掉边框，但它会为你保留border-color/border-style的使用权。 * 不赞成 - border:0; * 建议用 - border:none; 23、*{ margin:0; padding:0;}避免浏览器样式差异 *号通配符把所有标签都初始化一遍，浏览器的渲染消耗一定的资源。 有部分在标签在不同浏览器上几乎无差异，或是某些已经不推荐使用的标签(因为你不会去用它)， 它们不需通配符要重新初始化一遍这样做能节省一点资源。 * 不赞成，使用*号通配符 * 不赞成，div span button b table等标签纳入通配符控制内外填充样式 * 建议用，有选择性地使用通配符控制内外填充样式。 24、不要添加额外的标签来描述class或id 如果你有一个选择器是以id作为关键选择符，请不要添加多余标签名上去。 因为ID是唯一的，你不要为了一个不存在的理由而降低了匹配的效率。 * 不赞成 - button#backButton { } * 不赞成 - .menu-left #newMenuIcon { } * 建议用 - #backButton { } * 建议用 - #newMenuIcon { } 25、尽量选择最特殊的类来存放选择器 降低系统效率的一个最大原因是我们在标签类中用了过多的选择符。 通过添加 class 到元素，我们可以将类别进行再细分为 class 类，这样就不用为了一个标签浪费时间去匹配过多的选择符了。 * 不赞成 - treeitem[mailfolder=”true”] treerow treecell { } * 建议用 - .treecell-mailfolder { } 26、标签类中不要包含子选择符 不要在标签类中使用子选择符。否则，每次元素的出现，都会额外地增加匹配时间。（特别是当选择器似乎多半会被匹配的情况下） * 不赞成 - treehead treerow treecell { } * 建议用 - .treecell-header { } 27、文件名长度规定 1.任何一个文件名最多可使用255个英文字符，如果使用中文字符则不能超过127个汉字。 2.可用字符规定 原则上可以利用键盘输入的英文字母、符号、空格、中文等均可以