·您当前的位置:主页 > 技术教程 > Html5技术 >

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

时间:2017-03-16 13:01来源:酷播  极酷网页播放器
一种思想只有很多人用了才会成为主流,一套方案得到大家的认可才能得以实施,希望中文站前端的朋友能大致阅览下样式内容,并提出宝贵意见

  一种思想只有很多人用了才会成为主流,一套方案得到大家的认可才能得以实施,希望中文站前端的朋友能大致阅览下样式内容,并提出宝贵意见。模块化的样式正在逐步添加,诚心接纳更多可模块化的页面样式建议。
思路要点之一:绝不考虑使用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的兼容。

css-written-order

  样式的优先级

  在这之前先讲解特殊符号的含义——‘+’ ’_’ ’ !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色