三层OOCSS架构答案

【问题标题】：Three layer OOCSS architecture [closed]三层OOCSS架构
【发布时间】：2013-07-16 17:44:04
【问题描述】：

我正在寻求有关遵循 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。本地应用程序之一将本地级别覆盖为 base-font -size 为 12px。

很想知道人们将如何格式化目录结构，我期待着回复！

【问题讨论】：

StackOverflow 专门用于解决可以回答的具体问题，而不是讨论。这就是为什么您的问题被否决的原因，尽管问题本身非常好。
不属于 SO 的问题应该被关闭，而不是回答。

标签： css architecture sass directory-structure oocss

【解决方案1】：

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

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

<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 对所有可以用参数覆盖的东西都有默认值。另外，考虑在您的 Global 项目中创建一个 Compass 扩展。它将允许您从模板生成应用程序项目，并提供 mixins 和东西。

【讨论】：