栏目级作用域──页面重构中的模块化设计(二)

在《 样式的作用域──页面重构中的模块化设计(一) 》中,我将样式的作用域分为了三个部分:公共级(全局)、栏目级(局部公共)、页面级。公共级(全局)容易理解,即影响站点中所有页面。简单解释下栏目级(局部公共)和页面级:

页面级
可分为两种情况:在多个页面间,页面级作用域指针对某一单独的页面定义;在同一个页面中,页面级作用指针对某一标签的定义。它将决定最终的页面效果。
栏目级(局部公共)
介于全局与单个页面之间的一个作用域,影响一个栏目(或某区域)。通常以某一类选择符做为开始,以包含选择符的方式将样式定义限定在某一区域中。

/* 只影响demo这个区域 */
.demo a{...}
.demo p{...}
.demo .title{...}

需要消化下的内容,决定一个样式定义是属于哪个作用域的因素有以下两点:

  • 样式定义所在样式文件中的位置。(同样的一个定义,放在不同的位置,所影响的范围会有所不同。)
  • HTML中绑定demo这个类的标签位置。(同样一个类,绑定在body标签和绑定在页面中某个标签上,所影响的范围也会不同。)

在一个站点中,可能会分为几个不同的栏目,同一个栏目中,一般风格会保持一致。而不同的栏目间,相似的风格则不一定会相同。即使是全站通用的模块,如翻页,也可能会因为栏目的不同而会有一些差异,比如链接的颜色等等。使用栏目级的样式定义,能很好的减少代码的冗余,提高模块的复用性。

另外需要在思维上注意的一点,以作用域划分,并不意味着有着对应的文件,可能有些同学会习惯的以为一个作用域就应该对应着一个文件。比如一个小的栏目,可能只有两三个页面,这时我们就不一定需要再把栏目级的定义单独出来一个文件,而是与页面级的定义一起放在一个文件里,像这样:


/* S 栏目级定义 */
.class{...}
/* E 栏目级定义 */
/* S 页面级定义 */
.page{...}
/* E 页面级定义 */
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值