1.尽量少的使用全局的重置代码

全局重置代码：*{margin:0; padding:0;}对于熟悉CSS的人来说并不陌生，并且有很多人的第一句CSS代码就是这句。它可以避免不同浏览器的默认间距不同而造成的浏览器兼容性问题。“*”在代码中一般都是代表通配符，在CSS中也是如此，可以代表所有的HTML元素。虽可以杜绝很多代码在浏览器之间的兼容问题，但是这种写法会降低CSS解析的效率。我们有更好的解决办法，就是用下面这种写法：

  • html, body, div, dl, dt, dd, ul, h1, h2, h3, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0; }
  • table { border-collapse:collapse; border-spacing:0; }
  • fieldset, img { border:0; }
  • ul { list-style:none }
  • 2.不要使用IE的Hacks

  • 虽然CSS的hacks可以解决不少针对IE6的老式浏览器出现的和标准浏览器之间的兼容问题，但是使用这些hacks的同时也会给代码带来一些负面影响并且不能通过CSS的标准验证。更好的写法就是在HTML代码的<head>中添加if条件语句：

    • <!--[if lte IE 6]>
    • <link rel='stylesheet' type='text/css' href='styles/ie-styles.css' />
    • <![endif]-->

    3.为id和class使用有意义的命名

    假设给你的侧边栏(sidebar)用.l12来命名class, 假如你几个月后或者一两年后再来对网页的样式进行修改，你还会记得这个类名吗，可能在当时你命名的时候它只是一个缩写，但现在看来是两眼一摸黑。如果把侧边栏的类名换成.left_blue,这样一来，你可能立即就会知道这个类选择符是为左侧边栏的显示蓝色区块而创建的，这时它就正确的表达了一定的语义。

    4.合理的利用CSS的继承

    如果页面中的子元素和父元素有很多相同的样式属性,这个时候只要写父元素的属性即可,子元素会继承父元素中的属性。这样可以使代码更简洁,也有效降低了CSS文件的体积。

    例如：

    • #container li{ font-family:Georgia, serif; }
    • #container p{ font-family:Georgia, serif; }
    • #container h1{font-family:Georgia, serif; }

    可以写成：

    • #container{ font-family:Georgia, serif; }

    5.结合多重选择器

    如果有很多样式属性是相同的，你同样可以结合成一句代码，这样也可以使代码更简洁。

    例如：

    • h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
    • h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
    • h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

    更好的写法：

    • h1,h2,h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

    6.将代码缩写

    利用CSS的缩写，可以将不少CSS属性进行缩写，比如font、padding、margin、border-width、background等都可以进行缩写。

    例如：

    • li{
    • font-family: Arial, Helvetica, sans-serif;
    • font-size: 1.2em;
    • line-height: 1.4em;
    • padding-top: 5px;
    • padding-bottom: 10px;
    • padding-left: 5px;
    • }

    可以写成：

    • li{
    • font: 1.2em/1.4em Arial, Helvetica, sans-serif;
    • padding: 5px 0 10px 5px;
    • }

    7.有组织的编写代码

    应当给代码添加一些注释，这样当你日后再来修改这些CSS代码的时候能够做到一目了然，而不是看到一堆杂乱无章的代码。

    • /*-------------------------
    • CSS Reset
    • -------------------------*/
    • /*-------------------------
    • Generic Classes
    • -------------------------*/
    • /*-------------------------
    • Layout styles
    • -------------------------*/
    • /*-------------------------
    • Section specific styles
    • -------------------------*/
    • /*-------------------------
    • Header
    • -------------------------*/
    • /*-------------------------
    • Content
    • -------------------------*/
    • /*-------------------------
    • Footer
    • -------------------------*/

    8.使用外部样式表

    要养成将HTML结构和CSS样式表进行分离的好习惯，将CSS代码写在一个CSS文件中并通过的形式在网页中引用。如果是单独的页面你可以不这么做，但如果是多个页面的时候这样做的好处就很明显了。通过修改外部CSS文件，你就可以轻松修改CSS代码，而不是到每个HTML页面中去寻找CSS样式表。

    • <style type='text/css' >
    • #container{ .. }
    • #sidebar{ .. }
    • </style >
    • OR
    • <li style='font-family:Arial, helvetica, sans-serif; color:#666; ' >

    更好的写法：

    • <link rel='stylesheet' type='text/css' href='css/styles.css' />

    9.将CSS文件进行拆分

    如果在一个大型Web项目中有多个模块，每个模块又设置了不同的样式。这个时候可以将CSS文件分割成几个小CSS文件。一般的做法是重置代码分成一个单独的CSS文件，布局分成一个单独的CSS文件，一般类的模块分成一个CSS文件，特殊类的模块分成一个CSS文件。这样的做法可以让你在大型Web项目中轻松组织你的CSS代码，多个CSS文件的载入意味着更多的HTTP请求，在相应的页面载入相应的CSS文件，这样当然可以减少HTTP的请求数。具体的做法是将多个CSS文件导入到一个单独的CSS文件中。

    • @import 'style/css/reset.css';
    • @import 'style/css/typography.css';
    • @import 'style/css/layout.css';

    10.压缩CSS代码

    一旦项目完成之后，将你的CSS代码文件上传到CSS Compressor，可以对CSS文件进行压缩，以减小CSS文件的大小和网页装载的时间。

    希望这些CSS的小技巧能帮助你写出更好更高质量的CSS代码，如果你也要分享你的几个CSS技巧，你可以发表评论。

CSS编写技巧的更多相关文章

  1. HTML+CSS编写规范

    在任何一个项目或者系统开发之前都需要定制一个开发约定和规则,这样有利于项目的整体风格统一.代码维护和扩展.由于Web项目开发的分散性.独立性.整合的交互性等,所以定制一套完整的约定和规则显得尤为重要. ...

  2. 个人css编写规范

    前言:最近在做微信小程序,因为公司小,就我一个人弄前端的东西,js和页面都是我来弄,结果那天后台的人看到我的js代码,说我的代码写得不规范,函数什么的都很乱,弄得我羞愧难当,幸亏没看我的css,其实我 ...

  3. css编写规范最佳实践

    最初,在编写CSS的时候,我们往往想到哪儿就写到哪儿,它们之间的关联性和有序性并不在考虑之中.但随着代码量的增加,亦或是多人共同开发,CSS的编写规范变得重要起来了.本文通过三个方面,总结出CSS编写 ...

  4. 10个CSS简写技巧让你永远受用

    转自:http://blog.bingo929.com/10-css-shorthand-tips.html 前言: CSS简写就是指将多行的CSS属性声明化成一行,又称为CSS代码优化.CSS简写的 ...

  5. Hexo之旅(四)：文章编写技巧

    hexo 编写文章可以使用以下命令创建hexo new "文件名" #创建的文章会在_pots目录下文章的后缀名是以md命名的文件格式,遵循markdown语法,所以编写文章可以使 ...

  6. css小技巧（1）

    1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selecti ...

  7. CSS 代码技巧与维护 ★ Mozilla Hacks – the Web developer blog

    原文链接:https://hacks.mozilla.org/2016/05/css-coding-techniques/ 译文链接 :http://www.zcfy.cc/article/css-c ...

  8. 2天驾驭DIV+CSS （技巧篇）（转）

     这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是技巧篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...

  9. CSS hack技巧

    CSS hack技巧一览,原文来自CSDN freshlover的博客专栏<史上最全CSS Hack方式一览> 什么是CSS hack 由于不同厂商的流览器或某浏览器的不同版本(如IE6- ...

随机推荐

  1. One-Time Project Recognition

    Please indicate the source if you need to repost. After implementing NetSutie for serveral companies ...

  2. iOS--手势之谜

    原文转至: http://www.cnblogs.com/huangjianwu/p/4675648.html iOS在手机APP的手势操作中包含了:拖动.捏合.旋转.点按.长按.轻扫.自定义等等,详 ...

  3. Android Studio 导入百度地图jar和so的正确方式

    //这部分内容在百度地图的官方文档中写的比较模糊 //感觉在这种事情上浪费实际很不好,遂记录如下 //以下仅是方法之一 step1 下载sdk后解压,并把libs中的全部内容拷贝到app/libs目录 ...

  4. SSDT旧版本对于xml数据的处理BUG

    在早期版本中,CLR中声明sqlxml时,SSDT会将CLR函数中使用的类型解析为NVARCHAR(4000),最终导致传向CLR函数的数据不完整              

  5. 让我们来谈谈JDBC

    1.JDBC     1)JDBC简介         - JDBC就是Java中连接数据库方式         - 我们可以通过JDBC来执行SQL语句.       2)获取数据库连接   - j ...

  6. Tomcat启动找不到JRE_HOME的解决方法

    在配置测试环境时,将生产服务器的Tomcat目录打包过来后解压后,启动Tomcat后,发现如下问题: [tomcat@gsp bin]$ ./shutdown.sh Using CATALINA_BA ...

  7. centos 6.x安装rvm 配置 Ruby开发环境

    rvm是ruby的版本管理工具  还可对ruby进行 安装 卸载 等 1.安装 curl #  sudo yum install  curl #  curl -L  get.rvm.io | bash ...

  8. linux环境变量的设置

    linux中环境变量分为系统环境变量和用户环境变量(和window中一样),系统环境变量对所有系统用户都有效,用户环境变量只对当前用户有效,我们以ubuntu为例说明 用户环境变量 用户环境变量通常存 ...

  9. mysql添加索引命令

    创建脚本 1.PRIMARY  KEY(主键索引)mysql>ALTER  TABLE  `table_name`  ADD  PRIMARY  KEY (  `column`  ) 2.UNI ...

  10. js/jquery/html前端开发常用到代码片段

    1.IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条件注释只能用于IE5以上,IE ...