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. 天津政府应急系统之GIS一张图（arcgis api for flex）讲解（十）态势标绘模块

    config.xml文件的配置如下: <widget label="态势标绘" icon="assets/images/impact_area_over.png&q ...

  2. ArcGIS Server的Tile的松散型存储（Exploded）

    protected override void GetTileSource(int level, int row, int col, Action<System.Windows.Media.Im ...

  3. scrollview 图片放大 捏合 瓦片地图 相关注意事项

    就职文博公司要为博物馆做APP 涉及到瓦片地图的编写 在这里总结一些开发中遇到的问题 (将会不断更新 也是学习阶段) 着急写项目的同学 可以直接看code4上现成的瓦片地图代码:http://www. ...

  4. iOS - 对OOA、OOD、OOP的理解

    很多人在求职的时候,会遇到一个这样的问题:“对OOD/OOP有较深的理解”,这个时候有人就会问OOD.OOP是什么呢?那么今天咱们就一块来看一下OOA.OOD.OOP到底是什么! (一)OOA--面向 ...

  5. 浅谈RecyclerView(完美替代ListView,GridView)

    Android RecyclerView 是Android5.0推出来的,导入support-v7包即可使用. 个人体验来说,RecyclerView绝对是一款功能强大的控件. 首先总结下Recycl ...

  6. Android—判断当前时间段

    思路:获取当前时间相对于当天的分钟数,然后按照时间顺序依次与时间段后面的时间(转化为分钟数)比较(如8:00-9:00,跟9:00比较). 部分代码: 当前时间 Calendar calendar = ...

  7. 基于Ruby的watir-webdriver自动化测试方案与实施（一）

    基于Ruby的watir-webdriver自动化测试方案与实施(五)   基于Ruby的watir-webdriver自动化测试方案与实施(四)   基于Ruby的watir-webdriver自动 ...

  8. DP优化与换零钱问题

    1 当贪心不再起效的时候 对于换零钱问题,最简单也是性能最好的方法就是贪心算法.可是贪心算法一定要满足面值相邻两个零钱至少为二倍关系的前提条件.例如1,2,5,10,20……这样的零钱组应用贪心最简单 ...

  9. Nginx反向代理和负载均衡部署指南

    1.        安装 1)         从Nginx官网下载页面(http://nginx.org/en/download.html)下载Nginx最新版本(目前是1.5.13版本)安装包: ...

  10. 作业配置规范文档[MS SQL]

    作业配置规范文档(MS SQL) 文档类型 MS SQL数据库作业配置规范文档 创建日期 2015-07-30 版本变化 V3.0 修改记录 修改人 修改日期 版本 修改描述 潇湘隐者 2015-08 ...