文章列表
CSS模块的注释——页面重构中的模块化设计（六）
Ghost 发表于 [11 日 之前]
从前面的内容我们已经知道，样式是可以分成各个模块去写的，如何表示各个模块的作用及它们之间的关系呢？CSS的注释是不二的选择。
与普通的注释不同，模块的注释需要一些更详细的内容，比如：功能说明、模块版本、关联信息等等。 像 《基类、扩展类──页面重构中的模块化设计（五）》 中例子的注释，显然是比较简单的。为了减少不必要的沟通，我们可以使用较为固定的格式去完成这个注释。
举个例子：
/**
* @name :mode_name
* @author :ghostzhang
* @version :1.0
* @type :基类
* @explain :Demo
*/
.mode_name{...}
.mode_name h2{
...
}
.mode_name .cont{
...
}
/* @end **/
/**
* @name :mode_name_b
* @author :ghostzhang
* @version :1.0
* @type :扩展类
* @explain :Demo
* @dependent :mode_name
*/
.mode_name_b{...}
.mode_name_b h2{
...
}
.mode_name_b .cont{
...
}
/* @end **/从注释中就可以知道mode_name_b和mode_name_a之间的关系。
...
[阅读全文]
评论也精彩 [1]
基类、扩展类──页面重构中的模块化设计（五）
Ghost 发表于 [49 日 之前]
基类 和 扩展类 是这个系列的主要内容，上一篇《 模块化的核心思想──页面重构中的模块化设计（四） 》中只是简单提了一下，我们再深入的来了解下它们。
一般所使用的“模块化”的方法，就是以某一个类做为定义的开始，比如：
/* S 图片列表 */
.pic_lists li,
.pic_lists li img{float:left;width:122px;height:122px;margin-bottom:8px;}
.pic_lists li{list-style:none;margin:0 0 0 6px;text-align:center;}
.pic_lists li .pic{display:block;border:1px solid #476081;}
/* E 图片列表 */
/* S mtv列表 */
.mtv_lists{width:930px;height:130px;}
.mtv_lists li,
.mtv_lists li img{float:left;width:120px;margin-bottom:8px;}
.mtv_lists li{list-style:none;margin:0 10px 0 0;text-align:center;}
.mtv_lists li img{height:90px;border:1px solid #476081;}
.mtv_lists li .pic{display:block;width:120px;height:90px;margin-bottom:8px;}
/* E mtv列表 */这个例子： 两个列表模块 。这种方式是比较常见的，可以很好的将一个模块独立出来。如果使用新学习到的“方法”来写这两个列表模块，应该是怎样？
...
[阅读全文]
评论也精彩 [6]
模块化的核心思想──页面重构中的模块化设计（四）
Ghost 发表于 [80 日 之前]
有不少同学觉得前面的内容过于简单了，对于 样式的作用域的分类 、 栏目级作用域 、 继承 等内容的确十分基础，不过基础还是很重要的。下面就一起进入这个系列真正的主题——“模块化”吧。
早在Qzone4.0的页面架构中已经在项目中开始摸索提高代码复用的方法，只不过当时并没有很清晰的认识到“模块化”这个思想。从去年的《 从宜家的家具设计讲模块化 》开始，模块化成了我主要的一个学习方向。借着无数的提问、思考、讨论，渐渐形成了一个比较清晰的、较为完整的方案。后面的内容，更多的是出于我在实际项目中总结出来的方法，虽然已经尽可能为出现的问题提供了解决方法，不过还是少不了会有些我没遇到过或没考虑到的，欢迎各位指出。
...
[阅读全文]
评论也精彩 [13]
继承──页面重构中的模块化设计（三）
Ghost 发表于 [106 日 之前]
前面我们了解了 样式的作用域的分类 和 栏目级作用域 。在权值中，还有一个很重要的因素，需要做下补充，起因是这样的，有个同学在CSS森林群里问了个问题：根据样式权值两个关键的因素
- 权值的大小跟选择器的类型和数量有关
- 样式的优先级跟样式的定义顺序有关
可以知道，如果10个标签选择器的权值应该比一个类选择的权值高，像这样：
div div div div div div div div div div div{color:blue;}
.c10{color:red;}
...
[阅读全文]
评论也精彩 [10]
关于职业化
Ghost 发表于 [114 日 之前]
上个月的 web标准化交流会 似乎把大家对于页面重构的职业化问题给引了出来，比较有意思。从大家的会后感想中不难发现，大部分同学都是抓着“沟通”，“沟通”的确十分重要，不过有个大的前提：沟通双方是否能相互理解？有个故事叫“对牛弹琴”，讲的就是这个，你很用心的弹琴，但牛听不懂得你是否弹得好。正所谓“隔行如隔山”，很难要求你的上下流中所有的人都像你一样懂得那么多，由于职业需求的不同，大家所侧重的点也不同。当然这个例子有点极端，不见得不做重构的人就不懂重构，就像做重构的为什么就非得什么都懂一样。
...
[阅读全文]
评论也精彩 [9]
栏目级作用域──页面重构中的模块化设计（二）
Ghost 发表于 [119 日 之前]
在《 样式的作用域──页面重构中的模块化设计（一） 》中，我将样式的作用域分为了三个部分：公共级（全局）、栏目级（局部公共）、页面级。公共级（全局）容易理解，即影响站点中所有页面。简单解释下栏目级（局部公共）和页面级：
- 页面级
- 可分为两种情况：在多个页面间，页面级作用域指针对某一单独的页面定义；在同一个页面中，页面级作用指针对某一标签的定义。它将决定最终的页面效果。
- 栏目级（局部公共）
- 介于全局与单个页面之间的一个作用域，影响一个栏目（或某区域）。通常以某一类选择符做为开始，以包含选择符的方式将样式定义限定在某一区域中。
...
[阅读全文]
评论也精彩 [4]
样式的作用域──页面重构中的模块化设计（一）
Ghost 发表于 [128 日 之前]
很久没有更新blog了，这段时间实在是发生了很多的事，累身累心。但还是有很多想做的事，比如更新merceCSS、把一直以来所总结的有关模块化的内容整理出来跟大家分享、参加交流会等等。
模块化设计我已经提过很多了，像《 从宜家的家具设计讲模块化 》、《 页面重构中的模块化思维 》、《 页面重构中的组件制作要点 》都是跟模块化相关的，不过之前一直没有讲到具体实现方面的内容，只是一些思维。这次重点讲一下实现方面的内容，权当到目前为止我对模块化的一些总结整理。
要做好模块化，我觉得理解好样式的作用域是很重要的，所以将这部分作为这个系列的第一篇。
...
[阅读全文]
评论也精彩 [11]
2009年总结
Ghost 发表于 [173 日 之前]
快过年了，每到年底有会有这样那样的总结、汇报、计划等等。从写完《 在腾讯的两年 》到现在，也有一年多没做过总结了。这段时间也是忙着一堆原应年前或年后处理却改了时间的，还有那个无形的钱的压力。当然这些都算是我的私事，这里就不展开讨论了。
2009年共写了25篇blog，其中关于模块化的有3篇《 从宜家的家具设计讲模块化 》、《 页面重构中的模块化思维 》和《 页面重构中的组件制作要点 》，之所以写那么多关于模块化的，主要还是因为工作需要，在准备公司一个关于模块化的培训PPT期间，对模块化思考了很多，在最后完成的PPT中，对于模块化的理解跟前面几篇文章所认识的又有了些变化，原本想多写一篇的，不过后面因为“种种”原因就没了下文。今年会试着把我在这一块的理解和经验整理下。
另外有两篇文章是关于职业的，《 再读《你是一个职业的页面重构工作者吗？》 》和《 写给应聘页面重构的同学 》。到09年前半年，做面试官还算比较积极的，虽然不太能领会领导所期望的，但我觉得，面试对于一个正找工作的人（特别是刚毕业的）是一个很好的学习机会，最终招不招不是我能决定的，但在专业方面，我希望我面试的人可以从面试中学到东西。
...
[阅读全文]
评论也精彩 [8]
样式文件合并工具 mergeCSS 应用之多文件模式
Ghost 发表于 [214 日 之前]
样式文件合并工具 mergeCSS 的 单文件模式 已经介绍过了，现在介绍 mergeCSS 的多文件模式。
跟以往的压缩工具不同，mergeCSS 提供了一个可以将多个文件合并到一起的功能，使用也非常之简单，只要将要合并的的文件分别拖入 mergeCSS 中即可。与单文件模式不同之处在于：
- 多文件模式下不能使用“保留impot”功能，即所有外链文件都将被导入（目前只支持本地路径）
- 多文件模式下无“快速保存”选项
- 多文件模式下可选择只将需要的外链文件内容导入
除此之外，其它功能与单文件模式差不多。多文件模式主要是为了解决多个小文件整合发布的问题，这跟开发模式也有一定的关系。目前使用上还有改进的空间，后面会加以优化。
评论也精彩 [1]
样式文件合并工具 mergeCSS v1.8 开放下载
Ghost 发表于 [218 日 之前]
圣诞快乐~~！
样式文件合并工具 mergeCSS 1.8.20091225正式开放下载了，感谢大家的关注与支持，使用中有什么意见或建议，欢迎与我联系。
mergeCSS v1.8.20091225
(fix)import文件未预加载
+优化路径检查算法
+程序图标
+关于
欢迎下载使用：
- 到 Download 里下载
- 在旧版本中使用“检查更新”
评论也精彩 [6]
