CSS最佳实践

来源:互联网 发布:性价比高的电钢琴知乎 编辑:程序博客网 时间:2024/05/21 01:30

我相信以下四条会帮助你提升你的CSS代码

  • 掌握CSS特殊的层次结构
* - 0p - 1 (one element)li:first-of-type - 2 (one element, one pseudo-element)ul li - 2 (two elements)ul ol + li - 3 (three element)h1 + *[href*=index] - 11 (one attribute, one element)ul ol li.list-item - 13 (one class, three elements)li.list0item.list-item-inline - 21 (two classes, one element)<p style=""></p> - 1000 (one inline styling)p - 1 (one HTML selector)atticle p - 2 (two HTML selectors).class -10 (one class selector)div p.class -12 (two element selectors and a class selector)#id - 100 (one id selector)html #id .class p - 112 (element selector,id selector, class selector, element selector; 1+100+10+1)
  • 避免使用 improtant 声明,同事不要使用ID进行样式书写
    这两件事可以避免恶性循环!

  • 避免层级过高的元素
    它会让浏览器执行过多渲染你样式的不必要周期,这会降低性能和带来不佳的用户体验。

  • 使用 reset 或者 normalize 样式表来避免浏览器的不一致
    但要确保根据你具体的状况来量身定制。不然的话就会让你的CSS变得冗(rong)杂。
0 0
原创粉丝点击