web前端规范之css的书写

《web前端规范之css的书写》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、在具体项目中，由于一些CSS是书写不规范，导致CSS文件体积较大；CSS层次声明不合理，导致浏览器渲染CSS过慢；再者，声明某些全局的定义，产生一些莫名其妙的问题，比如：某研发同事，想项目overflow隐藏一些div溢出的内容，他在这样声明：body{overflow:hideen;}。其后果是，如果在页面嵌入一些iframe页面或者iframe页面弹窗，导致iframe的竖向滚动条出不来，影响用户拉动滚动条阅读更多的内容，从而影响用户体验。常见书写问题：1.如.resourcebock这个伪

2、类，语义化不错，但是命名字符过长，增加了生成html的代码量,可以简写为：.srcBook即可。原因是：在编程世界，src就是资源resource简写，不能为了语义而语义，程序员本身对src已经非常敏感，比如Java开发在Eclipse中的src目录，他们有知道src代表什么意思。一切简便而不失语义是我们追求的。2.对于公告等的title，用h3标签比较符合语义，但是h3本身处理的成本要比不符合语义的font要大。所以，对于不做seo的应用，可以考虑使用font标签取代h3标签。因为h3标签自身

3、产生的padding和margin要作处理，虽然你可以在公告中声明h3的margin，padding为0，但是如果再次有区域用到h3标签的话，它岂不是又要重新赋给新的margin和padding了？3..resourcebock.top.rbar.canada{...}这里四层进入，可改造为：srcBook.hd.rbar.canada{}，用hd代替top，遵循雅虎的hd（头部），bd（主体)原则，其他模块处理道理一致。4..datatable这种命名从视觉上讲，看起来比较疲倦，比如宣传这个域

4、名www.lbstube.com，你是偏向于lbstube.com还是lbsTube的方式呢？很明显，后者的驼峰式比较容易区分，css类命名也是这个道理。www.youtube.com它的宣传logo是YouTube，比youtube.com这种全为小写的清晰多了。因此，.datatable，可以改写为.dataTb，用Tb作为table的缩写即可。这就是驼峰式视觉区分的作用所在。5.#seach_type{...}#seach_typeli{...}#seach_typelia{...}记住不

5、要随便用"#"号，它在js世界里面是非常敏感的，对于#warp,#header,#container等大模块，可以使用'#'命名；小模块不要随便用'#'号来命名。6..newsListli{font-size:0;padding:5px0;};.newsListlia{font-size:12px;}在li标签内书写font-size:0;可省去很多不必要的麻烦；同时，给一个高度可以省去padding上下的不同浏览器的不同识别，切勿在li里面定义上下边距的padding，特殊情况除外。正规写法是

6、：.newsListli{height:22px;font-size:0;}.newsListlia{font-size:12px;line-height:22px;}li高度22px，给定的行高对应也为22px，即可实现垂直居中。7.对于语义化，着重强调用strong取点b标签来定义css内容，在不考虑seo情况下，建议用b标签，以简单和方便为准则。8.在表格单元格边框的合并问题上，border-collapse:separate;*border-collapse:collapse;一个边框分

7、离，一个边框合并，不要去写这种模棱两可的值，可能是你的CSS上下语境不规范了，导致你出此下策，你还不如去优化你的CSS。9.尽量避免.top,.bottom,.left,.right这种敏感的伪类写法。position特有的值不要随便用作伪类。10..listTba.btnFlex{background:url(images/ico/btnSearchFlex.gif)00;}.listTba:hover.btnSearchFlex{background:url(images/ico/btnSe

8、archFlex.gif)0-20px;}改为：.listTba.btnFlex{background:url(images/ico/btnSearchFlex.gif)00;}.listTba.btnFlex:hover{background:url(images/ico/btnSearchFlex.gif)0-20px;}更加直接。11..piece_ft{...}.piece_ft.fl{float:left;}其中.fl可以在公共中声明为fl:left，而不应在此处再次声明了。在项目中可