如何书写高效的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浏览器有针对性的进行相关属性的定义。

如何书写高效的css样式的更多相关文章

  1. 书写高效的CSS

    一.使用高效是CSS ①:使用外联样式替代行间样式或内嵌样式. 不推荐使用内联样式:<style></style> 不推荐使用内嵌样式:<p style="&q ...

  2. 书写更加高效的CSS,走出误区

    根据一些CSS写作经验,如何提高渲染效率及所占用消耗的资源,我们来浅谈一下CSS的渲染效率,书写高效的CSS. 1.十六进制的颜色值对位数与大小写 编写十六进制颜色值时你可能会用小写字母或省略成3位数 ...

  3. 引入CSS样式表(书写位置)

    CSS可以写到那个位置? 是不是一定写到html文件里面呢? 内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下: <head ...

  4. CSS样式表的书写位置

    行内式(内联样式) 是通过标签的style属性来设置元素的样式,其基本语法格式如下: <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"&g ...

  5. 在不同的浏览器使用不同的css样式,解决浏览器兼容问题

    区别IE6与FF:       background:orange;       *background:blue; 区别IE6与IE7:       background:green !import ...

  6. 如何让不同浏览器调用不同的CSS样式

    如何让不同浏览器调用不同的CSS样式 由 于对W3C标准支持程度的不同,往往导致同一个CSS样式表在各种Web浏览器中的呈现大相径庭.以目前市场占有率最高的两个浏览器Microsoft Interne ...

  7. css书写规范及特殊样式

    1.CSS书写顺序: (1)位置:position.top.right.z-index.display.float (2)大小:width.height.padding.margin (3)文字系列: ...

  8. css样式书写的问题

    经常遇到前端的朋友问及css样式书写的问题,结合自己实际的工作,自己总结了整理了一下,给大家分享: 一.顺序问题:显示属性-位置属性-元素自身属性-文本属性-其他属性 1.显示属性:z-index.d ...

  9. CSS 样式书写规范

    可能不同团队都有各自的规范,又或者很多人在写 CSS 的时候还是想到什么就写什么,不存在太多的约束. 我觉得 CSS 代码规范还是有存在的必要的,尤其是在团队配合,多人协作下,规范就显得尤为重要. 本 ...

随机推荐

  1. 来谈谈JAVA面向对象 - 鲁班即将五杀,大乔送他回家??

    开发IDE为Eclipse或者MyEclipse. 首先,如果我们使用面向过程的思维来解决这个问题,就是第一步做什么,第二步做什么? 鲁班即将五杀,大乔送他回家 这个现象可以简单地拆分为两步,代码大概 ...

  2. Delphi关于ADO控件的简单使用

    控件:TAdoQuery.ADOConnection.TDataSource.TRzDBGrid 1.新建Vcl Form Application 2.在窗体上添加TADOConnection,设置连 ...

  3. 巧用UserAgent来解决浏览器的各种问题

    以前对UserAgent了解不是很透彻,今天发现UserAgent用处多多.比如我之前一直很喜欢用火狐浏览器,不过用了那么久发现火狐浏览器问题多多,比如有的论坛上传附件或者上传图片等按钮没有作用,并且 ...

  4. XIB中拖UIScrollView的困难

    最近在开发中有一个移植代码的工作,但是呢那块代码是n多年前写的,虽然还没看时就感觉到坑不小,到真正看的时候才发现是个陨石坑.具体的说呢,所有的界面都是xib托的而且没用Auto Layout约束,而且 ...

  5. kubernetes实践之运行aspnetcore webapi微服务

    1.预备工作 unbuntu 16.04 and above docker kubernetes 集群 2.使用vs2017创建一个web api应用程序,并打包镜像到本地. 3.推送本地镜像到doc ...

  6. python 练完这些,你的函数编程就ok了

    文件处理相关 1,编码问题 (1)请问python2与python3中的默认编码是什么? python 2.x默认的字符编码是ASCII,默认的文件编码也是ASCII python 2.x默认的字符编 ...

  7. windows下安装mysql以及启动

    配置环境变量,在path中添加 ;E:\wamp\Apache24\mysql(这是你的mysql安装路径),然后在修改一下配置文件my-default.ini(mysql安装文件夹目录下) 修改其中 ...

  8. 关于脱离laravel框架使用Illuminate/Validation验证器

    1.关于Illuminate/Validation验证器 Validation 类用于验证数据以及获取错误消息. github地址:github.com/illuminate/validation 文 ...

  9. Laravel框架中的make方法详解

    为什么网上已经有这么多的介绍Laravel的执行流程了,Laravel的容器详解了,Laravel的特性了,Laravel的启动过程了之类的文章,我还要来再分享呢? 因为,每个人的思维方式和方向是不一 ...

  10. Java使用对象流读取文件的问题

    把对象进行持久化(把对象存到本地)要用到对象流进行处理,在用对象流处理过程中,在写对象和读对象时候遇到了很多问题,分享一下. 我们处理对象数据的时候不可能只处理一个对象,在系统运行的时候,可能产生的对 ...