高质量代码之HTML、CSS篇
HTML篇
- 使用语义化标签<strong><fieldset><legend><ul>等等,少用<div><span>
- 判断网页标签语义化是否良好的方法:去掉样式,看看网页结构是否依然有序。
- 当页面内标签无法满足设计时,才会适当添加div和span
- 少用纯样式标签b font u等,改用strong em等
- 即可以用div又可以用p时,尽量使用p
CSS篇
- CSS结构
一般分为base common page三个层次。
base层:提供CSS Reset功能和粒度最小的通用类。被所有页面所引用,相对稳定,基本不用维护;
common层:提供组件级的CSS类。即模块化后的CSS类。
拆分模块技巧:1)模块与模块之间尽量不要包含相同的部分,如果有,应拆分出来,成为一个独立的模块。
2)模块应该保证数量尽可能少的原则下,做到尽可能简单
page层:网页中非高度重用的模块。
2. CSS命名空间
驼峰命名法与下划线“-”或“_”命名法
一般情况下,驼峰法用于区分不同单词,下划线用于表明从属关系。如timeList/timeList-lastItem
通过给body定义class,该页面样式均包含在这个class里面以防止重复定义
3. 多用组合,少用继承
合理利用多个类进行定义
4. 如果处理上下margin
如果不确定模块上下margin,最好不要把它写到模块的类里,而是使用类的组合,单独定义原子类(如mt10代表margin-top:10px的类)。最好不要混用margin-top和margin- bottom
5. 低权重原则-避免过多嵌套
少使用子选择器,CSS选择符权重尽可能低;尽量多用class,少用id
6. CSS sprite
1)只适用于背景的图片,对<img src=""/>设置图片不适用
2) 横向纵向都平铺的图片不适用,如果是横向平铺,sprite图应该竖直排练,反之亦然
7. CSS hack
_ IE6 * IE6/IE7 \9 IE8;尽量少用hack
8. hover样式
l(link)ov(visited)e h(hover)at(active)e
9. hasLayout触发
zoom:1;或 postion:relative;等
高质量代码之HTML、CSS篇的更多相关文章
- 编写高质量代码——html、css、javascript
[编写高质量代码]1.注释的必要性:增加代码的可读性.2.web标准:由一系列的标准组合而成,其核心理念是将网页的结构.样式.行为分离,所以他可分为:结构标准.样式标准和行为标准.3.一个符合标准的网 ...
- C# 《编写高质量代码改善建议》整理&笔记 --(一)基本语言篇
题记:这是自己的观后感,工作两年了,本来打算好好学习设计模式,或者作为客户端深入了解GPU编程的,但是突然发现还有这么一本书. <编写高质量代码改善建议>,感觉这正是自己需要的. 我是做 ...
- 《编写高质量代码--Web前端开发修炼之道》读书笔记
前言 这两周参加公司的新项目,采用封闭式开发(项目成员在会议室里开发),晚上加班到很晚,所以没时间和精力写原创博客了,今天就分享下这篇<编写高质量代码--Web前端开发修炼之道>读书笔记吧 ...
- 每周一书-编写高质量代码:改善C程序代码的125个建议
首先说明,本周活动有效时间为2016年8月28日到2016年9月4日.本周为大家送出的书是由机械工业出版社出版,马伟编著的<编写高质量代码:改善C程序代码的125个建议>. 编辑推荐 10 ...
- 编写高质量代码改善C#程序的157个建议——导航开篇
前言 由于最近工作重心的转移,原来和几个同事一起开发的项目也已经上线了,而新项目就是在现有的项目基础上进行优化延伸扩展.打个比方,现在已经上线的项目行政案件的Web管理网站(代码还没那么多相比较即将要 ...
- 编写高质量代码改善java程序的151个建议——导航开篇
2014-05-16 09:08 by Jeff Li 前言 系列文章:[传送门] 下个星期度过这几天的奋战,会抓紧java的进阶学习.听过一句话,大哥说过,你一个月前的代码去看下,慘不忍睹是吧.确实 ...
- 编写高质量代码改善C#程序的157个建议[1-3]
原文:编写高质量代码改善C#程序的157个建议[1-3] 前言 本文主要来学习记录前三个建议. 建议1.正确操作字符串 建议2.使用默认转型方法 建议3.区别对待强制转换与as和is 其中有很多需要理 ...
- spark最新源码下载并导入到开发环境下助推高质量代码(Scala IDEA for Eclipse和IntelliJ IDEA皆适用)(以spark2.2.0源码包为例)(图文详解)
不多说,直接上干货! 前言 其实啊,无论你是初学者还是具备了有一定spark编程经验,都需要对spark源码足够重视起来. 本人,肺腑之己见,想要成为大数据的大牛和顶尖专家,多结合源码和操练编程. ...
- 《编写高质量代码:Web 前端开发修炼之道》 笔记与读后感
编写高质量代码:Web 前端开发修炼之道/曹刘阳著. —北京:机械工业出版社,2010.5 第一版 涉及到的知识点: 1. CSS Sprites 在国内很多人叫css精灵,是一种网页图片应用处理方式 ...
- 读书--编写高质量代码 改善C#程序的157个建议
最近读了陆敏技写的一本书<<编写高质量代码 改善C#程序的157个建议>>书写的很好.我还看了他的博客http://www.cnblogs.com/luminji . 前面部 ...
随机推荐
- 乙醇脱氢酶力场文件的处理(含ZN,NAD,乙醇)
很多蛋白质在行驶生物催化反应(如ATP水解,氨基酸的乙酰化,CoA的去乙酰化,甲基化等等)都需要金属离子(Mg,Zn,Ca等等)的参与,换句话说,金属离子对蛋白功能是必须的.模拟金属酶体系,现在也是分 ...
- android 四种堆状态
总结下: ====> 建议首先阅读下面两篇文章,这样才可以更好的理解Activity的加载模式: Android的进程,线程模型 http://www.cnblogs.com/ghj1976/a ...
- GitHub的使用 —— 如何删除Repository
如果要在GitHub上删除一个已经存在的Repository,该怎么办呢 ? 1.首先,点击这个资源(Repository),进入.会看到如下页面: 2.点击 Admin .在 Admin 页面的最下 ...
- YTU 2610: A改错题--体检情况分析
2610: A改错题--体检情况分析 时间限制: 1 Sec 内存限制: 128 MB 提交: 233 解决: 161 题目描述 注:本题只需要提交标记为修改部分之间的代码,请按照C++方式提交. ...
- HeadFirst jsp 03 (MVC)
创建一个小的 web 应用, mvc, 麻雀虽小, 五脏俱全 补1: servlet没有main()方法, 他们受控与另外一个Java应用, 这个Java应用称为 容器, tomcat就是这么一个容器 ...
- hdu1054(二分图匹配)
题意很简单,在一颗树上找最小点覆盖. 将树染成黑白两色,构成一张二分图,然后最大匹配==最小点覆盖即可,所以一次匈牙利就可以求出来了 hdu1054 #include <iostream> ...
- Linux多线程(二)(线程等待,退出)
1. 线程的等待退出 1.1. 等待线程退出 线程从入口点函数自然返回,或者主动调用pthread_exit()函数,都可以让线程正常终止 线程从入口点函数自然返回时,函数返回值可以被其它线程用pth ...
- 推荐 10 款最好的 Python IDE
简述 Python 非常易学,强大的编程语言.Python 包括高效高级的数据结构,提供简单且高效的面向对象编程. Python 的学习过程少不了 IDE 或者代码编辑器,或者集成的开发编辑器(IDE ...
- ASP.NET MVC+EasyUI+Entity FrameWork 整合开发
本文详细讲解怎么用ASP.NET MVC+EasyUI+Entity FrameWork 来开发一个项目 对于ASP.NET MVC的Jscript库,主要引用 <script type=.mi ...
- UVa 1149 (贪心) Bin Packing
首先对物品按重量从小到大排序排序. 因为每个背包最多装两个物品,所以直觉上是最轻的和最重的放一起最节省空间. 考虑最轻的物品i和最重的物品j,如果ij可以放在一个包里那就放在一起. 否则的话,j只能自 ...