最佳实践 - CSS 主题答案

【问题标题】：Best Practices - CSS Theming最佳实践 - CSS 主题
【发布时间】：2011-04-09 09:46:38
【问题描述】：

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

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

将 CSS 文件“解耦”以使其具有“主题”意识，同时保留其所有定位信息的最佳做法是什么？

我的可能做法列表如下：

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

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

使用SASS，（最好使用Compass @see Andrew Vit 编写）特别是他们的“混合”功能。它采用 CSS 并引入了一种非常 DRY 的编程方法。您可以用它覆盖现有的类。 -treefrog
使用OOCSS 方法。 -Andrew Vit
一种称为independent blocks（俄语文章）的技术，它模仿一种使用类前缀来分隔特定块的命名空间。 -angryobject
基于三个样式表。分隔排版、位置和Eric Meyer 提供的重置样式表。 -David Thomas
使用已知组织使用的已经标准化的方法，例如 Dojo 库、jQuery UI 等。
-S .Jones

在哪种情况下哪个会更好？还有其他易于维护且灵活的方式吗？

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

【问题讨论】：

现在使用 SCSS 变得更加容易，几乎没有学习曲线。剩下的就是学习优秀的指南针框架

标签： css

【解决方案1】：

您应该研究一下 SASS，特别是他们的“Mixins”功能。它采用 CSS 并引入了一种非常 DRY 的编程方法。您可以使用它覆盖现有的类，使其非常适合我认为您正在尝试做的事情。

Link

【讨论】：

我喜欢这个主意，我会深入研究这个。不过我想知道，SASS 似乎依赖命令行来生成 CSS 文件，而且我发现在开发过程中每次都编译文件有点棘手。或者也许有某种插件在保存时会自动为您编译它？（我使用 netbeans 并编写 PHP 应用程序）。
执行此操作的命令是sass --watch stylesheet.sass。每次更改 *.sass 文件时，它都会自动生成 stylesheet.css。

【解决方案2】：

考虑OOCSS 建议的方法。总体思路是将类的样式关注点分成更细化的单元，以便最终在标记中使用更多类，而不是将所有样式都挂在关注点重叠的太少的类上。

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

【讨论】：

好主意，我刚刚在 Compass 上阅读，我会将您的想法添加到列表中。
@Andew Vit 你能帮我解决一些与 Sass 设置/配置相关的问题吗？这个问题stackoverflow.com/q/5897568/351903

【解决方案3】：

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

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

不过，这种方法有很多重复，所以@treefrog's 答案可能是更好的方法。我可以为我的方法提供的一个节省的恩典，这就是为什么它对我很有效，它很容易知道去哪里将标题字体从 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

【讨论】：

【解决方案4】：

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

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

以及该块的样式：

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

.b-我的块跨度{ 背景：红色； }

'b' 这里是块的前缀。您可以根据需要使用不同的前缀。您可能希望对一些可以应用于和修改任何其他元素的全局类使用前缀“g”。

然后，如果您想扩展此块或以某种方式对其进行更改，您可以使用类“b-my-block_blue”创建此块的修改，例如：

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

还有一段css：

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

这是一个非常粗鲁的例子。而且我不确定我是否足够解释。但我正在尝试在我当前的项目中使用这种技术，到目前为止感觉还不错。俄语中有一个article。如果这里的人有兴趣，也许有人可以把它翻译成英文。

【讨论】：

嗯，我希望我能读懂俄语...对于多个类，它似乎类似于 OOCSS。
是的，确实如此。我想知道我是否有时间翻译它。如果我这样做，我会让你知道。或者我可以联系作者，他会很乐意翻译他自己的文章...

【解决方案5】：

好问题。 +1

我认为对于更简单的布局，您可以仅根据 CSS 中定义的颜色来更改主题，然后将您的 CSS 文件分成一个核心“结构”文件和几个主题版本是有意义的。

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

【讨论】：