css建议写法

1 属性顺序

定位属性  position display float left top right bottom overflow clear z-index

自身属性  width height padding border margin background

文字样式  font-family font-size font-style font-weight font-varient color

文本属性  text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow

CSS3 中新增属性  content box-shadow border-radius transform

2 将浏览器前缀置于前面，将标准样式属性置于最后

.box {
      -webkit-transform: rotate(300deg);
          -ms-transform: rotate(300deg);
              transform: rotate(300deg);
}

 3 优化

• 值为 0 不需要单位。

• 属性值为浮动小数 0.xx，可以省略小数点之前的 0。

• 不给 h1-h6 元素定义过多的样式。

 

简洁、高效的css

 

所谓高效就是让浏览器查找更少的元素标签来确定匹配的style元素。

      1.不要再ID选择器前使用标签名

        解释：ID选择是唯一的，加上标签名相当于画蛇添足了，没必要。

      2.不要在类选择器前使用标签名

      解释：如果没有相同的名字出现就是没必要，但是如果存在多个相同名字的类选择器则有必要添加标签名防止混淆如（p.colclass{color：red;} 和 span.colclass{color:red;}

      3.尽量少使用层级关系；

         #divclass p.colclass{color:red;}改为  .colclass{color:red;}

      4.使用类选择器代替层级关系（如上）