三层OOCSS体系结构

Question

我正在寻求关于遵循OOCSS原则(inuit.css，smacss等)的三层风格指南的结构/体系结构的讨论。如果您熟悉inuit.css，就会知道该框架是为两层构建的。底层(基础)将代表inuit.css的核心。基本上，对象和抽象永远不应该改变。第二层包括对基础层的扩展，即特定于手头应用程序的皮肤和主题。在Nicole Sullivan的OOCSS中传达了将基础对象从皮肤/主题中分离出来的相同底层价格。这就是说，我正在寻找关于三种布局方案的讨论。第一层表示基础对象。第二层表示局部级别的基础对象的皮肤/主题/扩展。第三层表示皮肤/主题/扩展到应用程序特定级别的本地级别。

|+Application (specific to a single application) 
 |+Local (specific to a bundle of applications)
  |+Global  (non specific. Shared by any/every current future application)

假设有一家公司有50个不同的应用程序。我需要所有50个应用程序继承全球风格指南。其次，让我们假设50个应用程序中有25个需要统一，并继承相同的风格指南。这将是本地级别。最后，25个应用程序中的每个应用程序都可能具有覆盖本地和全局向导所需的特定主题。我还应该提到，SASS预处理器应该包含在架构中。每个进程级别都应该能够覆盖先前建立的变量(例如:全局分配变量base-font-size变量到16px。本地应用程序将base-font-size覆盖为15px。其中一个本地应用程序将local level重写为base-font-size为12px。

我很想知道人们会如何设置目录结构的格式，我期待着回复！

Answer 1

CSS本质上是一种结构化语言。

如果您在页面中依次包含三个样式表，例如：

<link type="text/css" rel="stylesheet" href="global.css">
<link type="text/css" rel="stylesheet" href="local.css">
<link type="text/css" rel="stylesheet" href="application.css">

后一个文件中的样式将覆盖前一个文件中的样式。

例如，您的global.css中可能有.logo { font-size: 1.5em; }。如果你在application.css中做.logo { font-size: 2em; }，它将会流行。

不需要特殊的结构，你只需要确保两件事：

• 要覆盖样式，后一种样式应该更specific或具有相同的选择器；
• 对于使用相同的选择器进行覆盖，文件的正确顺序很重要(以后一种文件为准)。

当然，SASS可以(也应该)用于准备这些CSS文件(如果需要，还可以将它们合并在一起)，但这并不意味着事情应该变得复杂。简单点，士兵！

如果你真的想走复杂的路，你应该考虑使用一些SASS的好东西。您可以使用mixins生成应用程序的CSS。Mixin对任何东西都有默认值，这些默认值可以用参数覆盖。此外，考虑在您的全局项目之外创建一个Compass扩展。它将允许您从模板中生成应用程序项目，并提供混入和其他东西。