高质量的CSS

1. 怪异模式的触发与DTD有关。Document Type Definition。DTD包含元素的定义规则、元素间关系的定义规则、元素可使用的属性、可使用的实体或符号规则。

2. 推荐的CSS组织方式:base+common+page

  base:css reset用YUI的CSS Reset+通用原子类         基石

  common:组件级CSS类,网站中高度重用的模块          网站级

  page:通用base和common解决的,就不要用page       页面级

3. 重用即为模块,取最大公约数。

  模块应在保证数量尽可能少的原则下,做到尽可能简单,以提高重用性。

4. 推荐CSS类命名法:驼峰命名法用于区别不同单词,横杠用于表明从属关系,不推荐子选择符

  例:  .timeList-lastItem{}  一个独立的又能避免冲突的类

          .timeList .lastItem{} 子选择符,建议不用,可能造成冲突

5. 多用组合,少用继承

6. 选择器权重:标签:1;class:10;id:100

  权重相同的,采用最后定义的样式。

  指选择符定义的先后,class="test1 test2"和class="test2 test1"没有区别

7. 为了保证样式容易被覆盖,提高可维护性,CSS选择符需保证权重尽可能低。  (还是强调原子性,少用子选择器)

8. 图片翻转技术:将多张图片合并为一张,然后用background-position展示需要的部分。使图片早加载,响应鼠标事件时不再延时。

9. CSS sprite:图片翻转技术的进一步发挥。将网站的多张背景合并成大图片。

  作用:减少网页的HTTP请求数,减小服务器压力。

  局限:a. 只能用于背景图。<img>图不能合并。

      b. x,y都repeat的图不能合并,所有repeat-x的一张图,竖直排列;所有repeat-y的一张图,水平排列。

      c. 图片要尽量紧凑,同时保证不会影响扩展性。

  也就是说,对菜鸟来说,会降低开发效率,增大维护难度。

  是否使用CSS sprite主要取决于网站流量。

10.开发者自己用多行式编码,上传只用min

11.解决IE下疑难杂症的特殊偏方:手动触发hasLayout。zoom:1

http://www.cnblogs.com/manong13/archive/2012/02/23/2365110.html

12.块级元素和行内元素

  块级元素:div p form ul ol li

  行内元素:span strong em

  a. 块级元素width,height有效;

  b. 块级可设margin,padding; 行内元素margin,padding水平有效,padding竖直有效;

  c. 通过display block/inline切换

13.main的内容比起sidebar更重要,无论sidebar和main在样式上谁左谁右,在html标签上要保证main的标签在sidebar之前被加载

原文地址:https://www.cnblogs.com/frostbelt/p/2388729.html