CSS编写技巧
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编写技巧的更多相关文章
- HTML+CSS编写规范
在任何一个项目或者系统开发之前都需要定制一个开发约定和规则,这样有利于项目的整体风格统一.代码维护和扩展.由于Web项目开发的分散性.独立性.整合的交互性等,所以定制一套完整的约定和规则显得尤为重要. ...
- 个人css编写规范
前言:最近在做微信小程序,因为公司小,就我一个人弄前端的东西,js和页面都是我来弄,结果那天后台的人看到我的js代码,说我的代码写得不规范,函数什么的都很乱,弄得我羞愧难当,幸亏没看我的css,其实我 ...
- css编写规范最佳实践
最初,在编写CSS的时候,我们往往想到哪儿就写到哪儿,它们之间的关联性和有序性并不在考虑之中.但随着代码量的增加,亦或是多人共同开发,CSS的编写规范变得重要起来了.本文通过三个方面,总结出CSS编写 ...
- 10个CSS简写技巧让你永远受用
转自:http://blog.bingo929.com/10-css-shorthand-tips.html 前言: CSS简写就是指将多行的CSS属性声明化成一行,又称为CSS代码优化.CSS简写的 ...
- Hexo之旅(四)：文章编写技巧
hexo 编写文章可以使用以下命令创建hexo new "文件名" #创建的文章会在_pots目录下文章的后缀名是以md命名的文件格式,遵循markdown语法,所以编写文章可以使 ...
- css小技巧（1）
1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selecti ...
- CSS 代码技巧与维护 ★ Mozilla Hacks – the Web developer blog
原文链接:https://hacks.mozilla.org/2016/05/css-coding-techniques/ 译文链接 :http://www.zcfy.cc/article/css-c ...
- 2天驾驭DIV+CSS （技巧篇）（转）
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是技巧篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...
- CSS hack技巧
CSS hack技巧一览,原文来自CSDN freshlover的博客专栏<史上最全CSS Hack方式一览> 什么是CSS hack 由于不同厂商的流览器或某浏览器的不同版本(如IE6- ...
随机推荐
- Autodesk正在招聘Civil、Infraworks金牌支持工程师（Premium Support Specialist）
Civil Infraworks金牌支持工程师,也不知道中文这么翻对不对,反正很牛的,地点优选上海,不过其他地区也没问题啊,感兴趣的,赶紧扔简历过来,我当你内线,帮你内推 :) Autodesk是全球 ...
- android AsyncTask介绍
AsyncTask是android提供的轻量级的异步类,可以直接继承AsyncTask,在类中实现异步操作,并提供接口反馈当前异步执行的程度(可以通过接口实现UI进度更新),最后反馈执行的结果给UI主 ...
- 熟悉HTML CSS布局模型
HTML最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一 ...
- xp
微软MSDN Windows XP Professional下载 Windows XP Professional 简体中文 (最原始版本,无SP)[505.63MB] 文件名:CN_WINXP_PRO ...
- SE（homework2）_软件分析
老师这次课后的作业具有开放性,很容易的我会想到经常用的那些工具软件,MATLAB,envi,ARCGIS等等. Q1:此类软件是什么时候出现的,这些软件是怎么说服你(陌生人)成为它们的用户的?他们的目 ...
- Ignite China 2015 之行
微软首届Ignite China选择了金秋十月的北京,在顺义的九华山庄举办.这几天北京的空气特别好,再加上郊区高楼少,令人心胸开阔了不少.这次Ignite之行的任务有两个,其一是27号晚上与Windo ...
- imcs初探
imcs简介 https://github.com/knizhnik/imcs 翻译过来是在内存上的列存储,在对于一张'静态'的表计算方面很有优势,在许多聚合运算中都有使用线程并行计算,而且其中使用了 ...
- Spark基本工作流程及YARN cluster模式原理(读书笔记)
Spark基本工作流程及YARN cluster模式原理 转载请注明出处:http://www.cnblogs.com/BYRans/ Spark基本工作流程 相关术语解释 Spark应用程序相关的几 ...
- 服务器文件上传下载（XShell+Xftp）
1.下载XShell安装包+Xftp安装包.百度网盘(XShell):https://pan.baidu.com/s/1eR4PFpS 百度网盘(Xftp):https://pan.baidu.com ...
- JS魔法堂：ES6新特性——GeneratorFunction介绍
一.前言 第一次看koajs的示例时,发现该语句 function *(next){...............} ,这是啥啊?于是搜索一下,原来这是就是ES6的新特性Generator ...