前端CSS代码书写规范

Posted by ryan on 2011 年 08 月 12 日 1 comment

1、申明及注释

  • 1.1、文件头部必须加上文件申明信息，必须包括文件描述、作者、最后更新(更新人+时间)
    1. /*
    2. *@Description: public common css （可写中文）
    3. *@Author:      sev7n
    4. *@Update:      sev7n(2011-08-09 17:22)
    5. */
  • 1.2、CSS代码注释规范请参考UED前端注释规范.docx 文件

2、 编码

目前19楼页面主要使用gb2312编码，请注意保持CSS文件编码与页面编码一致（不要将CSS文件设置为utf-8等其他编码）。

为了防止文件合并及编码转换时造成问题，建议将样式中文字体名字改成对应的英文名字，如：黑体(SimHei) 宋体(SimSun) 微软雅黑 (Microsoft Yahei，几个单词中间有空格组成的必须加引号)

3、 命名规范

  • 3.1、采用通俗易懂的英文单词并按内容/功能命名，严禁出现如left、right等方向名词的class/id，严禁出现如xxx1、xxx2等的数字class/id
  • 3.2、除布局、唯一独立模块外建议少用id，必须保证id唯一性
  • 3.3、一律采用小写中划线方式命名，如 xxx-yyy，禁止出现大写字母
  • 3.4、尽可能提高代码模块的复用，复用模块、独立模块可按xxx-mod命名（-mod可不写），mod下面再取xxx-hd（头部）、xxx-bd（内容）、xxx-ft（底部）命名
  • 3.5、常用命名（多记多查英文单词）：page、wrap、layout、header(head)、footer(foot、ft)、 content(cont)、menu、nav、main、submain、sidebar(side)、logo、banner、 title(tit)、popo(pop)、icon、note、btn、txt、iblock、window(win)、tips等 » Read more…

css选择器性能的优化

Posted by ryan on 2011 年 07 月 25 日 0 comments

现在据我知道比较好的用来测试网页性能的工具有两个，分别为：老牌的雅虎yslow,新秀google page Speed。
怎么会突然想起谈css与性能优化呢？其实这个问题我已经想了很久了，想写，但是也不知道从何写起，今天就简单的说一下，近段使用通过使用page Speed，对css性能优化的一点看法吧！ » Read more…

再谈Yahoo关于性能优化的N条军规

Posted by ryan on 2011 年 07 月 19 日 0 comments

一、 Yahoo的军规条例：

谨记：80%-90%的终端响应时间是花费在下载页面中的图片，样式表，脚本，flash等；
详细的解释来这里查：http://developer.yahoo.com/performance/rules.html
也可以直接firebug上一项项比对，如下图：

» Read more…

电子商务下一座金矿o2o?

Posted by ryan on 2011 年 06 月 23 日 0 comments

定义

O2O即Online To Offline，也即将线下商务的机会与互联网结合在了一起，让互联网成为线下交易的前台。这样线下服务就可以用线上来揽客，消费者可以用线上来筛选服 务，还有成交可以在线结算，很快达到规模。该模式最重要的特点是：推广效果可查，每笔交易可跟踪。国内首家社区电子商务开创者九社区是鼻祖。 　　O2O也可以简称为简称为On2Off，这样就可同其它商务术语一致，例如B2C、B2B和C2C。随着互联网上本地化电子商务的发展，信息和实物之间、线上和线下之间的联系变得更加愈加紧密。O2O让电子商务网站进入新的一个阶段。李开复曾经指出：“你如果不知道O2O至少知道团购，但团购只是冰山一角，只是第一步。” » Read more…

Firefox 5发布，Firefox 6新特性预览

Posted by ryan on 2011 年 06 月 23 日 0 comments

Firefox 5终于如期的发布。新增特性如下

Firefox 5 新增特性：

  1. 支持CSS3动画，比如transition和keyframes等，需要-moz-前缀；
  2. 所有元素支持accessKey属性，以及blur()、click()、focus()等方法；
  3. 不再支持UTF-7和UTF-32字符集；
  4. android版支持WOFF字体； » Read more…

和自己爱的人看日出

Posted by ryan on 2011 年 06 月 01 日 0 comments

和自己爱的人看日出

和自己爱的人看日出是一件多么浪漫的事啊。

想想互相相畏在一起，慢慢升起的阳光照着脸上。

» Read more…

情人节！2011

Posted by ryan on 2011 年 02 月 14 日 4 comments

又一个情人节！   又一个没有情人的情人节！

似乎上天早已注定！  你再怎么去强求，去改变，去适应，你似乎永远都赶不是变化的步伐！

一切随缘！祝有情人终成眷属。

» Read more…

CSS Sprites：鱼翅还是三鹿？

Posted by ryan on 2011 年 01 月 11 日 2 comments

原文：CSS Sprites: Useful Technique, or Potential Nuisance?

译文：CSS Sprites：鱼翅还是三鹿？

无处不在的 CSS sptites － 为数不多的几个可以直接跳过”流行”这个过程，而可以马上并且牢牢地跻身于最佳 CSS 实践之中的几个技术之一。虽然它真正流行是在 A List Apart 解释并认可这个技术之后，但是早在 2003 年 7 月份，Peter Stanicek 就已经开始谈论它了。

目前大多数的开发人员对这个技术都有相当地掌握，也有很多关于它的教程和文章。几乎所有的文章中都宣称设计师和开发人员都应该使用 CSS sprite 来减少 HTTP 请求数，并且节省一些流量。这个技术被大量网站使用，包括使用了大型 sprite 的 Amazon .

» Read more…

table-layout 属性详解（ff下表格宽度溢出）

Posted by ryan on 2010 年 12 月 28 日 2 comments

基本语法
table-layout : auto | fixed
auto :　 默认值。默认的自动算法。布局将基于各单元格的内容。
表格在每一单元格内所有内容读取计算之后才会显示出来
fixed :　 固定布局的算法。在这种算法中，表格和列的宽度取决于 col 对象的宽度总和，
假如没有指定，则会取决于第一行每个单元格的宽度。
假如表格没有指定宽度( width )属性，则表格被呈递的默认宽度为 100% 。

这几天在为ff下表格宽度100%、内容文字不换行、水平方向超出部分滚动显示，内容溢出的情况很烦恼，由于学艺不精花了很长时间才给这个demo整理好。真是有点惭愧
» Read more…

YSlow页面解析详解

Posted by ryan on 2010 年 11 月 24 日 4 comments

YSlow是yahoo美国开发的一个页面评分插件，从中我们可以看出我们页面上的不足，并且我们可以以此为依据进行编辑和优化我们的页面。下面我们就来分析下YSlow主要的评分规则。
1. Make fewer HTTP requests 尽可能少的http请求。。我们有141个请求（其中15个JS请求，3个CSS请求，47个CSS background images请求），多的可怕。思考了下，为什么把这个三种请求过多列为对页面加载的重要不利因素呢，而过多的IMG请求并没有列为不利因素呢？

发现原来这些请求都是可以避免的。
» Read more…