最佳实践 - CSS主题

Question

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

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

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

我的可能做法清单如下：

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

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

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

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

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

Answer 1

您应该查看SASS，特别是他们的“Mixins”功能。它需要CSS并引入了一种非常干燥的程序化方法。你可以用它覆盖现有的类，使其成为我认为你想要做的事情的完美。

Link

Answer 2

考虑OOCSS建议的方法。一般的想法是将类的样式问题分成更细粒度的单元，这样您最终可以在标记中使用更多的类，而不是将所有样式挂在太少的类上，并且存在重叠问题。

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

Answer 3

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

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

但是，这种方法有很多重复，所以@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

Answer 4

好问题。 1

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

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

Answer 5

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

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

该块的样式：

<div class="b-my-block">

<span>some more content</span>

</div>

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

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

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

和一块css：

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