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. Linux安全基础：awk命令的使用

    awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行各 ...

  2. GCD封装的个人理解和应用

    GCD封装的个人理解和应用 特点 >>将GCD封装,使我们从繁琐的方法记忆中解脱出来,能够直接快速的应用. 使用方法 1.将工程中的GCD文件中的9个文件拖入自己的工程中(你自己最好建一个 ...

  3. Git remote 修改源

    Git remote 修改源 git commit -m "Change repo." # 先把所有为保存的修改打包为一个commit git remote remove orig ...

  4. C语言数组实现约瑟夫环问题，以及对其进行时间复杂度分析

    尝试表达 本人试着去表达约瑟夫环问题:一群人围成一个圈,作这样的一个游戏,选定一个人作起点以及数数的方向,这个人先数1,到下一个人数2,直到数到游戏规则约定那个数的人,比如是3,数到3的那个人就离开这 ...

  5. Sqlserver通过链接服务器访问Oracle的那些事儿

    前言: 1.不经历风雨,怎能见彩虹. 2.充分利用BaiDu.google等搜索引擎查找资料并整合分析! 3.世上无难事只怕有心人! 本文由来:笔者在研究SQLSERVER链接服务器到oracle并使 ...

  6. Linux mysql 5.6： ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO)

    案例环境: 操作系统 :Red Hat Enterprise Linux Server release 5.7 (Tikanga) 64 bit 数据库版本 : Mysql 5.6.19 64 bit ...

  7. 0025 Java学习笔记-面向对象-final修饰符、不可变类

    final关键字可以用于何处 修饰类:该类不可被继承 修饰变量:该变量一经初始化就不能被重新赋值,即使该值跟初始化的值相同或者指向同一个对象,也不可以 类变量: 实例变量: 形参: 注意可以修饰形参 ...

  8. 使用NetBeans、Eclipse阅读JDK源码

    下面说明在Netbeans.Eclipse环境下怎么查看JDK源码: Netbeans: 在"工具->java平台->源"里添加下路径,如果你安装jdk的时候选择安装了 ...

  9. C++基础——函数指针 函数指针数组

    ==================================声明================================== 本文版权归作者所有. 本文原创,转载必须在正文中显要地注明 ...

  10. Ajax的笔记

    Ajax指异步JavaScript及XML(Asynchronous JavaScipt And XML),是一种异步交互式网页开发技术,用于创建快速动态网页.与服务器进行少量数据交换中,Ajax可以 ...