高效整洁CSS代码原则 (下)
2019独角兽企业重金招聘Python工程师标准>>>
6. 适当的代码注释
代码注释可以让别人更容易读懂你的代码,且合理的组织代码注释,可使得结构更加清晰。你可以选择做的样式表的开始添加目录:
/*------------------------------------
1. Reset
2. Header
3. Content
4. SideBar
5. Footer
----------------------------------- */
如此你代码的结构就一目了然,你可以容易的查找和修改代码。
而对于代码的主内容,也应适当的加以划分,甚至在有必要的地方在对代码加以注释说明,这样也有利于团队开发:
/*** Header ***/
#header{ height:145px; position:relative; }
#header h1{ width:324px; margin:45px 0 0 20px; float:left; height:72px;}/*** Content ***/
#content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;}
#content h1{color:#F00}/* 设置字体颜色 */
#content .posts{ overflow:hidden; }
#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; }/*** Footer ***/
#footer{ clear:both; padding:50px 5px 0; overflow:hidden;}
#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; }
7. 给你的CSS代码排序
如果代码中的属性都能按照字母排序,那查找修改的时候就能更加快速:
/*** 样式属性按字母排序 ***/
div{
background-color:#3399cc;
color:#666;
font:1.2em/1.4em Arial, Helvetica, sans-serif;
height:300px;
margin:10px 5px;
padding:5px 0 10px 5px;
width:30%;
z-index:10;
}
8. 保持CSS的可读性
书写可读的CSS将会使得更容易查找和修改样式。对于以下两种情况,哪种可读性更高,我想不言而明。
/*** 每个样式属性写一行 ***/
div{
background-color:#3399cc;
color:#666;
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
height:300px;
margin:10px 5px;
padding:5px 0 10px 5px;
width:30%;
z-index:10;
}/*** 所有的样式属性写在同一行 ***/
div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif; height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }
当对于一些样式属性较少的选择器,我会写到一行:
/*** 选择器属性少的写在同一行 ***/
div{ background-color:#3399cc; color:#666;}
对于这个规则并非硬性规定,但无论您采用哪种写法,我的建议是始终保持代码一致。属性多的分行写,属性少于3个可以写一行。
9. 选择更优的样式属性值
CSS中有些属性采用不同的属性值,虽然达到的效果差不多,当性能上却存在着差异,如
区别在于border:0把border设为0px,虽然在页面上看不见,但按border默认值理解,浏览器依然对border-width/border-color进行了渲染,即已经占用了内存值。
而border:none把border设为"none"即没有,浏览器解析"none"时将不作出渲染动作,即不会消耗内存值。所以建议使用border:none;
同样的,display:none隐藏对象浏览器不作渲染,不占用内存。而visibility:hidden则会。
10. 使用<link>代替@import
首先,@import不属于XHTML标签,也不是Web标准的一部分,它对于较早期的浏览器兼容也不高,并且对于网站的性能有某些负面的影响。
11. 使用外部样式表
这个原则始终是一个很好的设计实践。不单可以更易于维护修改,更重要的是使用外部文件可以提高页面速度,因为CSS文件都能在浏览器中产生缓存。内 置在HTML文档中的CSS则会在每次请求中随HTML文档重新下载。所以,在实际应用中,没有必要把CSS代码内置在HTML文档中:
<style type="text/css" >
#container{ .. }
#sidebar{ .. }
</style>
而是使用<link>导入外部样式表:<link rel="stylesheet" type="text/css" href="css/styles.css" />
12. 避免使用CSS表达式(Expression)
CSS表达式是动态设置CSS属性的强大(但危险)方法。Internet Explorer从第5个版本开始支持CSS表达式。下面的例子中,使用CSS表达式可以实现隔一个小时切换一次背景颜色:
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
如上所示,expression中使用了JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。
表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。
如果必须使用CSS表达式,一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。所以,在非不得已,请避免使用CSS表达式。
13. 代码压缩
当你决定把网站项目部署到网络上,那你就要考虑对CSS进行压缩,出去注释和空格,以使得网页加载得更快。压缩您的代码,可以采用一些工具,如YUI Compressor,利用它可精简CSS代码,减少文件大小,以获得更高的加载速度。
转载于:https://my.oschina.net/songzhu/blog/11895
高效整洁CSS代码原则 (下)相关推荐
- 高效整洁CSS代码原则
CSS学起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在CSS书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则: 1. 使用Reset但并非全局Re ...
- 实用的60个CSS代码片段[下]
1 31.有趣的& 2 3 .amp { 4 font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', se ...
- 高效的CSS代码(1)
--阅读笔记,欢迎纠错 平时写CSS时常用的两个CSS文档(小杂感觉用的蛮喜欢,也是看了些书,尝试使用效果不错) /************CSS reset *********/ /******** ...
- 精简高效的CSS命名准则/方法
2019独角兽企业重金招聘Python工程师标准>>> 一."无"的哲学 佛家讲究"因果报应",有果必有应.此段看似与主题没有血缘关系,实际讲 ...
- 精简高效的CSS命名准则和方法
一."无"的哲学 佛家讲究"因果报应",有果必有应.此段看似与主题没有血缘关系,实际讲的是"因". 我个人比较喜欢老子的道家思想,并喜欢以其 ...
- [css] 【转载】 精简高效的CSS命名准则/方法
原文链接:http://www.zhangxinxu.com/wordpress/2010/09/%E7%B2%BE%E7%AE%80%E9%AB%98%E6%95%88%E7%9A%84css%E5 ...
- 编写出色CSS代码的13个建议
CSS学起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在CSS书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则: 1. 使用Reset但并非 ...
- 编写高效的PyTorch代码技巧(下)
点击上方"算法猿的成长",关注公众号,选择加"星标"或"置顶" 总第 133 篇文章,本文大约 3000 字,阅读大约需要 15 分钟 原文 ...
- dw中css面板在哪,请问下美工设计师:1、怎么在DWCS5设计面板里面找到CSS代码? 爱问知识人...
最简单的方法就是在dw的视图里面进行制作,需要什么在属性面板直接设置.简单又直观 css 代码看你是在页面中直接写的还是链接的 直接写就没什么说的,页面源代码看见了css 代码也就看见了要是链接的话, ...
最新文章
- Linux下安装Python-3.3.2【转】
- Collection和Map中易考的一些知识点
- 【转】ASP.NET MVC 3 Service Location, Part 5: IDependencyResolver
- webservice 调用错误
- 躲避校园网客户端的检测实现客户端移动热点开启
- 华为防火墙IPSEC简单搭建
- vue 调色器和js-web-screen-shot截图插件
- 双端口USB Type-C控制器 CYPD6227 (CYPD6227-96BZXI)
- CDA1级习题复习(2)
- After Effects for Graphic Design After Effects for Graphic Design Lynda课程中文字幕
- 太空上新 | 张肇达 张凯惠:嫦娥奔月有了现实版
- 突发!incaseformat蠕虫病毒来袭,警惕文件遭删除
- 如何铸造游戏中的NFT游戏角色
- ISD1820语音模组的使用
- Alexnet_经典的CNN模型架构-LeNet、AlexNet、VGG、GoogleLeNet、ResNet
- 1-网络字节序和ip地址
- 基于神经网络的微博情绪分类
- div 设置相对比例 即div width 100 无效
- 【WPS】excel 启用宏 windows环境
- nodejs 跑 vue项目