web前端规范之CSS的书写.docxVIP

在具体项目中，由于一些CSS是书写不规范，导致CSS文件体积较大；CSS层次声明不合理，导致浏览器渲染CSS过慢；再者，声明某些全局的定义，产生一些莫名其妙的问题，比如：某研发同事，想项目overflow 隐藏一些div溢出的内容，他在这样声明：body{ overflow:hideen;}。其后果是，如果在页面嵌入一些iframe页面或者iframe页面弹窗，导致iframe的竖向滚动条出不来，影 响用户拉动滚动条阅读更多的内容，从而影响用户体验。 常见书写问题： 1. 如.resourcebock 这个伪类，语义化不错，但是命名字符过长，增加了生成html的代码量, 可以简写为：.srcBook 即可。原因是：在编程世界，src就是资源resource简写，不能为了语义而语义，程序员本身对src已经非常敏感，比如Java开发在 Eclipse中的src目录，他们有知道src代表什么意思。一切简便而不失语义是我们追求的。2. 对于公告等的title，用h3标签比较符合语义，但是h3本身处理的成本要比不符合语义的font要大。所以，对于不做seo的应用，可以考虑使用 font标签取代h3标签。因为h3标签自身产生的padding和margin要作处理，虽然你可以在公告中声明h3的margin，padding为 0，但是如果再次有区域用到h3标签的话，它岂不是又要重新赋给新的margin和padding了？3. .resourcebock .top .rbar .canada{...} 这里四层进入，可改造为：srcBook .hd .rbar .canada{}，用hd代替top，遵循雅虎的hd（头部），bd（主体)原则，其他模块处理道理一致。4. .datatable 这种命名从视觉上讲，看起来比较疲倦，比如宣传这个域名 ，你是偏向于 还是lbsTube的方式呢？很明显，后者的驼峰式比较容易区分，css类命名也是这个道理。它的宣传logo是YouTube，比这种全为小写的清晰多了。因 此，.datatable，可以改写为 .dataTb，用Tb作为table的缩写即可。这就是驼峰式视觉区分的作用所在。5. #seach_type{...} #seach_type li{...} #seach_type li a{...} 记住不要随便用 # 号，它在js世界里面是非常敏感的，对于#warp, #header, #container 等大模块，可以使用 # 命名；小模块不要随便用 # 号来命名。6. .newsList li{ font-size:0; padding:5px 0;}; .newsList li a{ font-size:12px;} 在li标签内书写font-size:0; 可省去很多不必要的麻烦；同时，给一个高度可以省去padding上下的不同浏览器的不同识别，切勿在li里面定义上下边距的padding，特殊情况除 外。正规写法是：.newsList li{ height:22px; font-size:0;} .newsList li a{ font-size:12px; line-height:22px;} li 高度22px，给定的行高对应也为22px，即可实现垂直居中。7. 对于语义化，着重强调用strong 取点 b 标签来定义css内容，在不考虑seo情况下，建议用b标签，以简单和方便为准则。8. 在表格单元格边框的合并问题上，border-collapse:separate; *border-collapse:collapse; 一个边框分离，一个边框合并，不要去写这种模棱两可的值，可能是你的CSS上下语境不规范了，导致你出此下策，你还不如去优化你的CSS。9. 尽量避免.top, .bottom, .left, .right 这种敏感的伪类写法。position特有的值不要随便用作伪类。10..listTb a.btnFlex{ background:url(images/ico/btnSearchFlex.gif) 0 0;}.listTb a:hover.btnSearchFlex{ background:url(images/ico/btnSearchFlex.gif) 0 -20px;}改为：.listTb a.btnFlex{ background:url(images/ico/btnSearchFlex.gif) 0 0;}.listTb a.btnFlex:hover{ background:url(images/ico/btnSearchFlex.gif) 0 -20px;}更加直接。11. .piece_ft{...}