最佳实践-CSS主题化

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

• 元素的定位
• 集装箱的背景图像
• 字体大小、颜色

什么是“解耦”CSS文件的最佳实践，使其具有“主题”意识，同时保持其所有定位信息

我列出的可能做法如下：

使用包含通用信息和位置的默认CSS文件，使用仅实现背景图像、字体大小和颜色的子CSS文件

命名您的第一个CSS文件（这里说，蓝色/绿色文件将命名为“天空”）。基于天空实现另一个主题，覆盖更改主题和命名所需的任何CSS属性（例如红色/橙色为“深红色”）

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

具体使用（最好使用@see编写）他们的“混合”功能。它采用CSS并引入了一种非常枯燥的编程方法。您可以使用它覆盖现有的类-

使用一种方法-

一种叫做（俄语文章）的技术，它模仿一种使用类前缀分隔特定块的名称空间-

基于三个样式表。分离由提供的排版、位置和重置样式表-

使用已知组织使用的标准化方法，如Dojo库、jQuery UI等。
-

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

---

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

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

好问题+一,

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

---

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

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

• 重置样式表（通常为的）
• 用于定位元素（边距、填充、浮动等）的样式表
• 字体和颜色

不过，这种方法有很多重复，所以答案很可能是更好的方法。我能为我的方法提供的一个优点是，很容易知道在哪里可以将标题字体从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

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

更多内容

以及该块的样式：

.b-我的街区{
宽度：100%；
高度：300px；
}

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

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

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

更多内容

还有一段css：

.b-my-block_蓝色span{
背景：蓝色；
}

---

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

考虑一下作者建议的方法。一般的想法是将类的样式关注点分离为更细粒度的单元，以便最终在标记中使用更多的类，而不是将所有样式都挂在具有重叠关注点的太少的类上

---

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

我喜欢这个想法，我会深入研究。我想知道，SASS似乎依靠命令