[html5]据说这是alibaba前端的css设计规则（技术文章分享）

　　一种思想只有很多人用了才会成为主流，一套方案得到大家的认可才能得以实施，希望中文站前端的朋友能大致阅览下样式内容，并提出宝贵意见。模块化的样式正在逐步添加，诚心接纳更多可模块化的页面样式建议。
思路要点之一：绝不考虑使用table，横向布局用带有float的div或li取代td。慎用ul li，当有重复单元时可使用ul li，没有重复的单元就别用ul，那样代码看上去很不整齐。
思路要点之二：最大限度利用ul li的优点。用ul li可以减少class=””的声明数量，当你把一套重复单元放进li之后，在ul里定义一个class=””就足够了。当然会付出代价，ul的兼容问题比div成倍的多。
思路要点之三：所有的空白使用margin填充，尽量不使用padding。要问原因，我只能这样说，padding能用margin替代，反之不行，只使用margin，当处理兼容问题时，你可以把焦点仅放在margin上而不用考虑padding。
思路要点之四：不给任何非图片背景类的容器定义height具体值，让容器自适应内容高度，好处一大筐，坏处一大箩，说说坏处吧，在调两个容器同高对齐时，要反复截图量高，而且要在不同浏览器下截图，量完高，还要计算出合适的margin-top来填充。
思路要点之五：能用一层解决的决不用两层，尽量减少嵌套，严厉禁止ul li 下再套 ul li，后果自负，目前为止我还没尝试过ul li嵌套ul li，对此法的实践属空白，理论上来说，此法会带来很多bug。
思路要点之六：css样式分类很细，需要使用多重class声明。例如：class=”left bd orange”，排名不分先后。
思路要点之七：熟悉各浏览器对样式解释的不同点，认真做好工作笔记，准备好4大浏览器，调试兼容，再开一个photoshop，随时截图做测量。制定完美的目标，那就是：精确到1px的兼容。

　　样式的优先级

　　在这之前先讲解特殊符号的含义——‘+’ ’_’ ’ !important’，这类特殊符号是针对不同浏览器识别的。打个比方，就象家长去幼儿园认领孩子，看到头上贴着’+’这个符号的，哦，这是ie家的孩 子，firefox和opear家长是不认得的，当然符号不止3个，但有这3个就能满足大部分的需要了。

　　‘+’ 加上该符号的样式只有ie才会认领

　　‘_’ 加上该符号的样式只有ie6才会认领，ie7不会认领

　　‘!important’ 在同一条样式定义中即大括号{}中，firefox、opera优先认领，ie不认得即忽略’!important’字 符串。在非同一条样式中即不同的大括号中{}标有‘!important’的样式对所有浏览器均属优先认领。网上有说ie不认‘!important’ 的，大错特错了。

　　例： <style type=”text/css”> .def{background:yellow;+background:blue;_background:red;} </style> <div class=”def”>dd</div> 结果：ie6下是red色，ie7下是blue色，firefox和opera下是yellow色 例： <style type=”text/css”> .def2{background:black !important;} .def1{background:yellow;+background:blue;_background:red;} </style> <div class=”def1 def2″>dd</div> 结果：所有浏览器均black色