如何书写高效的css样式

如何书写高效的css样式?

有以下四个关键要素:

1.高效的css

2.可维护的css

3.组件化的css

4.hack-free  css

书写高效的css:

1.使用外联样式替代行间样式或内嵌样式(不建议使用@import外联方式)
2.使用继承(比如字体、字号属性,可以在body的css样式中规定,有特定的变化,再针对该元素书写。并非特指使用inherit属性)
3.使用多重选择器
  示例:h1,h2,h3,...,a{color:#333}
4.使用多重声明(同一元素的样式设置,在一对{}中写完)
5.使用简记属性
  示例:a{font:bold 14px/20px Verdana, Arial, Helvetica, sans-serif;}
分别表示:加粗;字号14px;行高20px;字体
6.避免使用!important属性,特定情况下可以使用以下方式加高权重级别
  示例:body #content{...}

书写可维护的css:

书写可维护的css,可以让后续维护人员更容易理解我们书写的样式代码。

1.在样式表的开头添加一个注释块,用以描述这个样式表的创建日期创建者标记等备注信息
  示例:/*------------------------------------
      创建时间:2015.10.16
      创建者:

    ----------------------------------------*/  

2.包括公用的颜色标记
  示例:body{color:#333;}
       a{color:#333;}
     a:hover{color:#ff3300;}
3.给ID和class进行有意义的命名
4.将关联的样式进行整合
  示例:#nav{...}
     #nav ul{...}
     #nav ul li{...}
5.给样式添加清晰的备注
  示例:/*---------header start---------------*/
        .........................
     /*---------header end---------------*/
6.组件化css
  将css样式表拆分成独立的css样式文件:header.css    footer.css   common.css   content.css  container.css等等,拆分之后方便css样式的维护管理。

Hack free css:

  如何处理IE浏览器的兼容性问题,一直困扰着前端工作者。如果使用css hack来解决问题,在IE浏览器版本升级更替,改进对css样式的支持后,之前使用的hacks将会无效。
在不使用css hack的情况下更新页面,可以使用条件注释来针对或避开IE浏览器。

针对IE浏览器:
步骤1.创建一个css样式文件,ie5.css
步骤2.使用条件注释:当使用的浏览器是ie5版本时,读取并使用ie5.css文件
  示例:<!--[if IE 5]>
      <link rel="stylesheet" type="text/css" href="css/ie5.css" media="screen">
     <![endif]-->
使用条件注释的优点:
1.No Hacks  
  特定的css规则仅出现在新的样式表里。
2.文件分离
  针对特定版本的IE定义的样式脱离了主样式表,可以在IE浏览器升级更新对属性支持时轻松移除这些文件。
3.针对性
  可对不同版本的IE浏览器有针对性的进行相关属性的定义。

上一篇:AndroidStudio使用问题记录


下一篇:【EF】EntityFramework 更新数据库字段的三种方法