CSS规范 - 优化方案

CSS规范 - 优化方案
一、值缩写
缩写值可以减少CSS文件大小，并增加可读性和可维护性。
但并非所有的值都必须缩写，因为当一个属性的值缩写时，总是会将所有项都设置一遍，而有时候我们不希望设置值里的某些项。

• 比如我们用下面这个样式来让某个定宽的容器水平居中，我们要的只是left和right，
   * 而top和bottom不是这个样式要关心的（如果设置了反倒会影响其他样式在这个容器上的使用），
   * 所以这时我们就不需要缩写
   /
  .f-mgha{margin-left:auto;margin-right:auto;}
  / 比如下面这个模块的样式设置，我们确实需要设置padding的所有项，于是我们就可以采用缩写 /
  .m-link{padding:6px 12px;}
  二：避免耗性能的属性
  以下所举列的属性可能造成渲染性能问题。不过有时候需求大于一切……
  / expression /
  .class{width:expression(this.width>100?‘100px’:‘auto’);}
  / filter /
  .class{filter:alpha(opacity=50);}
  三：选择器合并
  即CSS选择器组合，可以一次定义多个选择器，为你节省很多字节和宝贵时间。
  通常我们会将定义相同的或者有大部分属性值相同（确实是因为相关而相同）的一系列选择器组合到一起（采用逗号的方法）来统一定义。
  / 以下对布局类选择器统一做了清除浮动的操作 /
  .g-hd:after,.g-bd:after,.g-ft:after{display:block;visibility:hidden;clear:both;height:0;content:".";}
  .g-hd,.g-bd,.g-ft{zoom:1;}
  / 通常background总是会占用很多字节，所以一般情况下，我们都会这样统一调用 /
  .m-logo,.m-help,.m-list li,.u-tab li,.u-tab li a{background:url(…/images/sprite.png) no-repeat 9999px 9999px;}
  .m-logo{background-position:0 0;}
  / 以下是某个元件的写法，因为确实很多元素是联动的或相关的，所以采用了组合写法，可以方便理解和修改 */
  .u-tab li,.u-tab li a{display:inline;float:left;height:30px;line-height:30px;}
  .u-tab li{margin:0 3px;}
  .u-tab li a{padding:0 6px;}

四：背景图优化合并
1、图片本身的优化：
图像质量要求和图像文件大小决定你用什么格式的图片，用较小的图片文件呈现较好的图像质量。
当图片色彩过于丰富且无透明要求时，建议采用jpg格式并保存为较高质量。
当图片色彩过于丰富又有透明或半透明要求或阴影效果时，建议采用png24格式，并对IE6进行png8退化（或在不得已情况下使用滤镜）。
当图片色彩不太丰富时无论有无透明要求，请采用png8格式，大多数情况下建议采用这种格式。
当图片有动画时，只能使用gif格式。
你可以使用工具对图片进行再次压缩，但前提是不会影响色彩和透明。
2、多张图片的合并：
1）单个图标之间必须保留空隙，空隙大小由容器大小及显示方式决定。这样做的好处是既考虑了“容 错性” 又提高了图片的可维护性。
2）图标的排列方式，也由容器大小及显示方式决定。排列方式分为以下几种：横向排列（容器宽度 有限）、纵向排列（容器高度有限）、斜线排列（容器宽高不限），靠左排列（容器背景居左）、靠右排 列（容 器背景居右）、水平居中排列（容器背景水平居中）、垂直居中排列（容器背景垂直居中）。
3）合并后图片大小不宜超过50K，建议大小在20K-50K之间。
4）为保证多次修改后的图片质量，请保留一份PSD原始图，修改和添加都在PSD中进行，最后导 出png。
3、如果CSS可以做到，就不要使用JS
让CSS做更多的事，减轻JS开发量。
1）用CSS控制交互或视觉的变化，JS只需要更改className。
2）利用CSS一次性更改多个节点样式，避免多次渲染，提高渲染效率。
3）如果你的产品允许不兼容低版本浏览器，那么动画实现可以交给CSS。

五：css统一语义理解和命名
布局（.g-）语义命名简写文档docdoc头部headhd主体bodybd尾部footft主栏mainmn主栏子容器maincmnc侧栏sidesd侧栏子容器sidecsdc盒容器wrap/boxwrap/box

模块（.m-）、元件（.u-）语义命名简写导航navnav子导航subnavsnav面包屑crumbcrm菜单menumenu选项卡tabtab标题区head/titlehd/tt内容区body/contentbd/ct列表listlst表格tabletb表单formfm热点hothot排行toptop登录loginlog标志logologo广告advertisead搜索searchsch幻灯slidesld提示tipstips帮助helphelp新闻newsnews下载downloaddld注册registreg投票votevote版权copyrightcprt结果resultrst标题titlett按钮buttonbtn输入inputipt

功能（.f-）语义命名简写浮动清除clearbothcb向左浮动floatleftfl向右浮动floatrightfr内联块级inlineblockib文本居中textaligncentertac文本居右textalignrighttar文本居左textalignlefttal垂直居中verticalalignmiddlevam溢出隐藏overflowhiddenoh完全消失displaynonedn字体大小fontsizefs字体粗细fontweightfw

皮肤（.s-）语义命名简写字体颜色fontcolorfc背景backgroundbg背景颜色backgroundcolorbgc背景图片backgroundimagebgi背景定位backgroundpositionbgp边框颜色bordercolorbdc

状态（.z-）语义命名简写选中selectedsel当前currentcrt显示showshow隐藏hidehide打开openopen关闭closeclose出错errorerr不可用disableddis