跳转到主要内容

6.10 在主题中应用smacss(1)

ok,前几节我都在介绍css构架方式,核心是smacss。smacss并不是什么css技术,它无法帮你写出一个下拉菜单或者首页幻灯片,它是一套关于如何编写css的指导原则,让你的css结构更合理,更具有可读性和重用性。之所以说它是指导原则,是因为它并不是你必须完全遵守的规定,每个人、每个团队、每个项目都可以根据它发展出适合自己的具体实践方式。

要使用smacss构架你的css,你就必须学会掌控你的模版层、掌控页面上的标签,你要有能力指定页面中的某个元素的选择器(class或id),你也应该有能力去把drupal生成的各种令人郁闷的选择器删除掉或者控制在合理的范围内。如果你不这么做,而是直接通过drupal后台自动生成的选择器来写样式,虽然也可以做出和设计图一致的网页,但是你的css就背离了smacss的指导思想了。——这就是drupal主题在国内饱受诟病的原因,一个单纯的前端掌控不了模版层,他看到drupal生成的html里面冗长的class就想砸电脑;可是如果把主题交给一个后端phper来做,他又会很为难,因为他并不见得愿意和css打交道,大材小用、不务正业的感觉多少也会有一点,除非是新人练手。

在整个drupal主题界,这都是一个问题,无论是国内还是国外。一方面是因为smacss理论在前端技术中属于一个新生事物,知道并接受它的人并不多;另一方面是因为drupal主题制作方式中天生的特点(缺陷),导致每个项目能把主题做得和设计图差不多一样就万事大吉了,鬼才有精力去管css是怎么架构的。然而,我的一位良师益友曾经说过一句话,至今犹在耳旁,他说:完美是不可能的,但是总不能从来不想一下什么是完美吧。所以,接下来的内容,我将尝试着和大家讨论如何掌控你的Drupal模版层,也许某一天会有人认同这其中的意义——其中的大部分我已经在第6章第7节中提过了。

现在我们先用一个例子再深入的讲一下我们要解决的问题。这个例子的主角是区块,它是Drupal网页中必不可少的一个东西。在默认情况下,Drupal的block模块会为每个区块提供好几个选择器,其中最常见的就是#block-block-[id],如#block-block-1,这个选择器能让你直接为这个区块编写样式。但问题是:

1 缺乏可重用性。如果你想把这个区块的样式用在其他区块上,你就必须在你的css样式规则中加入其它区块的ID选择器。比如你已经为第一个自定义区块写了如下样式:

#block-block-1{
 
/*一些css规则*/
 
}

然后你又创建了第二个区块,那么你不得不将你的css改为:

#block-block-1,#block-block-2{
 
/*一些css规则*/
 
}

这时当某个不会前端的网站编辑想要为网站创建一个新的区块,并继承现有区块的样式时,他就会发现在自己给自己找麻烦。同时,如果你的网站项目很大,就算你会前端,你还是会因为要不停的添加新建区块的ID,而进行很多重复工作。

 

2  区块ID具有不确定性。

还记得那篇黑Drupal的“著名”文章么,现摘录其中一小段:

“而且如果是更改了某个块,块ID变了,css就没了,还要重新调整css里面的id,做html的人不知道要做多少次重复的劳动。而且由于html是view生成的,从html里面的n多垃圾代码找到一个可以用于写css的ID真比自杀还难受。”

Drupal很无奈,两手一摊,你不懂smacss,不会控制你的模版层,怪我咯?

ok,那么怎样为区块指定我们需要的选择器呢?

 

1 土办法——覆写模版

我们知道,在主题制作中模版覆写有着很重要的地位。很多时候,网页前端代码都是由模版控制的。因此,我们自然可以通过覆写模版来控制页面上的html和class标签。不过这样做的坏处是,你会需要很多很多模版文件。比如,如果用这种方式来控制区块的html的话,每一个区块你都要写一个模版文件。如:

block--footer.tpl.php block--header.tpl.php block--search.tpl.php block--navigation--menu.tpl.php block--let-me-die.tpl.php

等等

以上这些模版文件大致上都是一样的,只有class标签不一样。如果我们为了架构好css就把模版文件给搞得乱七八糟、乌烟瘴气,似乎又有点南辕北辙的意思了。

 

2  通过drupal后台UI控制

大概很多开发者都不太赞成这种方法。他们习惯于将代码写在文件中,这样利于搜索、利于版本控制、页面样式不依赖于数据库。但是使用UI的好处是在一定程度上能降低任务的难度,理论上,只要通过简单的文档说明和培训,你就可以让不懂程序的网站编辑自己控制网页元素的css标签,并获得预先设置好的效果,同时还满足控制模版层并用smacss的方式去架构网站css的需求,在某些情况下,这种方式也是可以使用的。以下这些第三方模块都是你可以使用的工具。

block class

display suite

fences

semantic views

semantic fields

skinr

views

fusion accelerator

而为了控制区块的选择器,我们可以使用block class模块, https://www.drupal.org/project/block_class,它的用法非常简单,这里就不再详述了。

至于第三种方式,请看下一节。