一、CSS代码优化作用与意义

1、减少占用网页字节。在同等条件下缩短浏览器下载css代码时间,相当于加快网页打开速度
2、便于维护。简化和标准化css代码让css代码减少,便于日后维护
3、让自己写的css代码更加专业。

二、需要优化css代码地方:

1、缩写css代码。(例如backgroun,margin,padding,border,font等)
2、排列css代码。
3、同属性提取共用css选择器。
4、分离网页颜色和背景设置样式(较大站点需要注意)。
5、条理化css代码。

三、实现高效整洁的CSS代码原则:

1. 使用Reset但并非全局Reset。不同浏览器元素的默认属性有所不同,使用Reset可重置浏览器元素的一些默认属性,以达到浏览器的兼容。但需要注意的是,请不要使用全局Reset。

2. 良好的命名习惯。

3. CSS代码缩写。可以提高你写代码的速度,精简代码量。在CSS里面有不少可以缩写的属性,包括margin,padding,border,font,background和颜色值等

4. 利用CSS继承。如果页面中父元素的多个子元素使用相同的样式,那最好把他们相同的样式定义在其父元素上,让它们继承这些CSS样式。可以很好的维护代码,减少代码量。

5. 使用多重选择器。如果他们有共同的样式,可以合并多个CSS选择器为一个。这样做不但代码简洁,且可以节省时间和空间。

6. 适当的代码注释。代码注释可以让别人更容易读懂你的代码,且合理的组织代码注释,可使得结构更加清晰。

7. 保持CSS的可读性。书写可读的CSS将会使得更容易查找和修改样式。对于以下两种情况,哪种可读性更高,我想不言而明。

8. 使用外部样式表。不单可以更易于维护修改,更重要的是使用外部文件可以提高页面速度,因为CSS文件都能在浏览器中产生缓存。内置在HTML文档中的CSS则会在每次请求中随HTML文档重新下载。

9. 避免使用CSS表达式(Expression)。表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

10. 代码压缩。当你决定把网站项目部署到网络上,那你就要考虑对CSS进行压缩,出去注释和空格,以使得网页加载得更快。采用一些工具,如YUI Compressor,利用它可精简CSS代码,减少文件大小,以获得更高的加载速度。

四、CSS重用优化
这里主要介绍是CSS代码的共用属性提取来达到节约代码、维护方便,如下:
.yangshi_a{ width:100px; height:20px; text-align:left; float:left; font-size:24px;}
.yangshi_b{ width:100px; height:20px; text-align:right; float:left; font-size:24px;}
他们都有相同高度、宽度、浮动、文字大小,而只有内容居左居右不同(你可能需要了解CSS居中),我们就可以提取他们相同属性
优化后:
.yangshi_a ,.yangshi_b{ width:100px; height:20px; text-align:left; float:left; font-size:24px;}
.yangshi_b{text-align:right; }

css代码优化的更多相关文章

  1. 高效率、简洁、CSS代码优化原则

    高效率.简洁.CSS代码优化原则 CSS学起来并不难,但在大型项目中,一个团队中不同的人在书写CSS风格上也有不同这样这个项目就变得难以管理,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CS ...

  2. CSS代码优化(转载)

    要点1:css代码优化作用与意义 1.减少占用网页字节.在同等条件下缩短浏览器下载css代码时间,相当于加快网页打开速度:2.便于维护.简化和标准化css代码让css代码减少,便于日后维护:3.让自己 ...

  3. css代码优化篇

    心情比较不咋地,不想说什么了 代码演示如下: 不推荐 .fw-800 { font-weight: 800; } .red { color: red; } 推荐 .heavy { font-weigh ...

  4. [转载]css代码优化的12个技巧

    1.ID 规则2.Class 规则3.标签规则4.通用规则对效率的普遍认识是从Steve Souders在2009年出版的<高性能网站建设进阶指南>开始,虽然该书中罗列的更加详细,但你也可 ...

  5. 10个CSS简写及优化技巧

    CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写.CSS简写的最大好处就是能够显著减少CSS文件的大小,优化网站整体性能,更加容易阅读. 下面介绍常见的CSS简写规则: ...

  6. html+css 技巧

    3.css定义的技巧:[1].为了将来的css代码优化,建议所有的属性上要带上“:” [2].某些html 标签,有自己默认的css属性值,       例如h1 标签就有自己的属性值,自动就是加粗显 ...

  7. CSS样式优化

    一.css代码优化作用与意义 1.减少占用网页字节.在同等条件下缩短浏览器下载css代码时间,相当于加快网页打开速度2.便于维护.简化和标准化css代码让css代码减少,便于日后维护3.让自己写的cs ...

  8. CSS的压缩 方法与解压

    为什么要压缩CSS? 1.大网站节约流量 2.加快访问速度 工具:Dreamweaver(手工替换,个人感觉任何文本编辑器都可以)不过DW可以还原 CSS压缩与CSS代码压缩还原方法,CSS压缩工具有 ...

  9. Html/Css(新手入门第一篇)

    一.理解web标准含义--为什么采用web标准*****将内容与样式分离1.web标准是一系列标准,就是一系列技术标准在使用时,是组合应用[1].结构化内容 html[2].表现化内容 css[3]. ...

随机推荐

  1. PHP中常用的字符串格式化函数总结

    注意:在PHP中提供的字符串函数处理的字符串,大部分都不是在原字符串上修改,而是返回一个格式化后的新字符串. 一.取出空格和字符串填补函数 空格也是一个有效的字符,在字符串中也会占据一个位置.用户在表 ...

  2. (总结)Nginx配置文件nginx.conf中文详解

    #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_processes 8; #全局错误日志定义类型,[ debug | ...

  3. Java数据结构——优先级队列

    //================================================= // File Name : PriorityQueue_demo //------------ ...

  4. JavaScript排序算法——归并排序

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. Android学习笔记——ListView

    该工程的功能是实现在一个activity中显示一个列表 以下代码是MainActivity.java中的代码 package com.example.listview; import java.uti ...

  6. Winsock 入门 计算校验和 示例

    #include <stdio.h> #include <string.h> #define DATA_MAX_LEN 14 /* 最大数据长度 */ struct data_ ...

  7. C#--中实现邮件发送

    MailMessage mailmessage = new MailMessage(); mailmessage.To.Add("接受邮箱");//可以添加多个接收邮箱 mailm ...

  8. ecshop 活动-》红包

    按商品发放:可以给指定某个商品发红包(购买付款,卖家发货后,会自动给买家发送红包:不是买家在付款的时候就自动可以减少红包金额) 按订单金额发放:订单满xx后(卖家发货后,会自动给买家发放红包)

  9. C语言生成服从均匀分布, 瑞利分布, 莱斯分布, 高斯分布的随机数

    用c语言 产生服从均匀分布, 瑞利分布,莱斯分布,高斯分布的随机数   一,各个分布对应的基本含义: 1. 均匀分布或称规则分布,顾名思义,均匀的,不偏差的.植物种群的个体是等距分布,或个体之间保持一 ...

  10. Fragment碎片的创建和动态更新

    Fragment,在平板应用中较为参见,把视图分为两个甚至多个模块. 一,一个简单的fragment 1.创建两个局部文件,用于等待被调用 (1)left_fragment (2)right_frag ...