最佳实践 - CSS 主题化

Question

当我为客户设计网站时，通常会使用一个（或多个）CSS文件来构建整个演示层。问题是，通常情况下，客户的需求在“网站主题”方面发生了很大变化。他可能会要求根据自己的口味从蓝/绿色主题更改为红/橙色主题。问题是，我的文件包含所有信息，包括：

• 元素的定位
• 容器的背景图像
• 字体大小、颜色

如何“解耦”CSS文件以使其“主题”感知，同时保留所有有关定位的信息？

我的可能实践列表如下：

1. 使用包含通用信息和定位的默认CSS文件，使用子CSS文件仅实现背景图像、字体大小和颜色
2. 命名您的第一个CSS文件（假设这里的蓝/绿色文件将被命名为“sky”）。基于sky实现另一个主题，覆盖任何需要更改主题的CSS属性，并将其命名（例如，红/橙色将命名为“crimson”）。

编辑：根据下面提供的出色答案，我更新了其他可能解决方案的列表，添加到我的列表中：

1. 使用SASS（最好与Compass一起编写，参见Andrew Vit），特别是其中的"Mixins"功能。它采用了非常DRY的程序化方法来处理CSS。您可以使用它覆盖现有类。- treefrog
2. 采用OOCSS方法。- Andrew Vit
3. 一种称为independent blocks（俄文文章）的技术，利用类前缀模仿名称空间，以分隔特定块。- angryobject
4. 三个基于样式表。将排版、位置和Eric Meyer提供的重置样式表分离出来。- David Thomas
5. 使用已经被知名组织采用的标准化方法，例如Dojo库、jQuery UI等。
   - S. Jones

在可能的情况下哪种更好？还有其他易于维护和灵活的方式吗？

迄今为止最佳答案：使用SASS制作非常灵活的样式表。当然，这意味着需要学习曲线，但根据一些评论，SASS似乎是动态样式表的下一个选择（以及HAML）。

- Steven Rosato

---

现在使用SCSS甚至更容易了，学习曲线几乎不存在。唯一剩下的就是学习优秀的Compass框架。 - Steven Rosato

Answer 1

你应该研究SASS，特别是它们的“Mixins”功能。它采用CSS并引入非常DRY的编程方法。你可以使用它来覆盖现有的类，非常适合我认为你想要做的事情。

链接

- Chuck Callebs

---

我喜欢这个想法，我会深入研究。不过我想知道，SASS似乎依赖于命令行来生成CSS文件，在开发过程中每次编译文件都有点棘手。或者也许有一些插件可以在保存时自动编译它？（我使用NetBeans并编写PHP应用程序）。 - Steven Rosato

执行此操作的命令是sass --watch stylesheet.sass。每当您对*.sass文件进行更改时，它都会自动生成stylesheet.css。 - Chuck Callebs

Answer 2

考虑OOCSS所建议的方法。总体想法是将类的样式问题分离成更细粒度的单元，这样您最终会在标记中使用更多的类，而不是将所有样式挂在有重叠关注点的少数类上。

这可以与其他建议结合使用。（我强烈建议使用Compass来编写SASS！）

- Andrew Vit

---

好主意，我刚在Compass上读到了，我会把你的想法加入列表中。 - Steven Rosato

@Andew Vit，你能帮我解决一些与Sass设置/配置相关的问题吗？这个问题是http://stackoverflow.com/q/5897568/351903。 - Sandeepan Nath

Answer 3

在需要主题的情况下，我个人倾向于使用三个基本样式表：

• 重置样式表（通常是Eric Meyer的）
• 元素定位样式表（边距、填充、浮动等）
• 排版和颜色

虽然这种方法中存在很多重复，但@treefrog的答案可能会更好。我能提供的唯一优点是，对我来说它很容易知道从Arial更改标题字体到Times New Roman（或其他任何字体），以及在哪里找到页面的背景颜色。通常这些存储在类似WordPress的安排中。

http://www.example.com/css/reset.css http://www.example.com/css/themeName/typography.css http://www.example.com/css/themeName/layout.css

- David Thomas

Answer 4

好问题。+1

我认为对于更简单的布局，只需基于CSS中定义的颜色进行主题更改，那么将CSS文件分成一个核心“结构”文件和几个主题版本是有意义的。

对于更复杂的主题，其中图像作为布局或主题的关键部分导入，最好完全将资源嵌套在主题下。您可以通过探索类似Dojo的Javascript包的目录结构来查看此类示例，该包允许您在多个主题之间切换。如果您浏览Dijit库中的“Tundra”或“Soria”目录结构，您将看到它们在分割CSS文件方面采用了哪些“最佳实践”。

- S.Jones

Answer 5

我知道一种基于所谓独立块的技术。这里的块是页面的一部分，可以通过其自己的布局和样式来描述。该技术有一些原则，如仅使用类属性而不是id；每个块都有一个前缀；没有块外的样式或最小全局样式。但这些更多或少是可选的。假设您有一个块：

<div class="b-my-block">
<span>some more content</span>
</div>

以及该块的样式：

.b-my-block{ width:100%; height:300px; }

.b-my-block span{ background:red; }

这里的“b”是块的前缀。您可以为您的需求使用不同的前缀。您可能希望使用前缀“g”来表示一些全局类，这些类可以应用于并修改任何其他元素。

然后，如果您想扩展此块或以某种方式更改它，则可以创建一个名为“b-my-block_blue”的修改块：

<div class="b-my-block b-my-block_blue">
<span>一些更多的内容</span>
</div>

还有一段 CSS 代码：

.b-my-block_blue span{ background:blue; }

这只是一个非常简单的例子。我不确定我是否解释得足够清楚，但我正在尝试在我的当前项目中使用这种技术，目前感觉非常好。有一篇俄文文章介绍了这个技术。如果对这里的人们有兴趣，也许可以将其翻译成英文。

- angryobject

---

嗯，我希望我能读懂俄语... 由于有多个类，它似乎类似于OOCSS。 - Andrew Vit

是的，它可以。我在想我是否有时间来翻译它。如果我有时间，我会告诉你的。或者也许我可以联系作者，他会很好心地翻译自己的文章... - angryobject