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. ae GP制作缓冲区分析

    private void barButtonItem1_ItemClick(object sender, DevExpress.XtraBars.ItemClickEventArgs e) { // ...

  2. 免费薪资总额管控系统-JXHR2016

    •工资总额是指按照国家统计局规定的统计口径或企业规定,在一定时期内支付给各类用工的劳动报酬总额 •工资总额,即基本工资,包括岗位工资.各项津补贴 •JXHR2016以薪酬管控为核心,结合人力资源规划. ...

  3. Android—9.png的制作和去除黑线

    在开发中为了避免图片因为拉伸而失真我们会把背景图片设置为9.png图片,这篇博客介绍的是如何将图片设置为9.png的 1.首先在android—>sdk—>tools文件夹中打开下图所示文 ...

  4. 用Kotlin开发Android应用（III）：扩展函数和默认值

    这是关于Kotlin的第三篇. 原文标题:Kotlin for Android (III): Extension functions and default values 原文链接:http://an ...

  5. [Android]官网《monkeyrunner》中文翻译

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/5050768.html 翻译自 Android Develope ...

  6. Linux 克隆虚拟机引起的“Device eth0 does not seem to be present, delaying initialization”

    虚拟机Vmware上克隆了一个Red Hat Enterprise Linx启动时发现找不到网卡,如下所示,如果你在命令窗口启动网络服务就会遇到"Device eth0 does not s ...

  7. 7 COMPELLING REASONS YOU NEED TO START THE BUSINESS YOU’VE ALWAYS WANTED

    原文链接:http://lesseesadvocate.com/7-compelling-reasons-need-start-business-youve-always-wanted/ Don’t ...

  8. [django]利用xlwt实现文件下载功能

    代码: url.py: url(r'^importmould/$', 'keywork.views.xls_mould', name='xls_mould'), view.py: from djang ...

  9. 不同材质怎么通过ZBrush赋予同一个模型上

    ZBrush 作为最专业的数字雕刻与绘画软件,能够制作出高质量的3D模型,包括模型的颜色贴图和材质属性.不同材质可以改变照明在表面上的反应,以便模型表现出光泽.凹凸.反射.金属性或透明效果.ZBrus ...

  10. Ajax与json

    Ajax Ajax简介 Ajax技术,从用户发送请求到获取响应,当用户界面在整个过程中不会受到干扰,而且我们可以在必要的时候只刷新页面的一小部分,而不用刷新整个页面,即"无刷新"技 ...