6.10 在主题中应用smacss（1）——Apply SMACSS in Drupal theme（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，它的用法非常简单，这里就不再详述了。

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