三层OOCSS架构

我正在寻求关于遵循OOCSS原则（inuit.css，smacss等）的三层风格指南的结构/体系结构的讨论。如果你熟悉inuit.css，你会知道这个框架是为两层构建的。底层（基础）将代表inuit.css的核心。基本上不应该改变的对象和抽象。第二层包括基础层的扩展，即特定于手头应用的皮肤和主题。每个Nicole Sullivan在OOCSS中传达了将基础对象与剥皮/主题分开的基本原理。话虽如此，我正在寻找关于三种布局方案的讨论。第一层代表基础对象。第二层代表本地级别的基础对象的皮肤/主题/扩展。第三层表示皮肤/主题/在特定应用程序级别上延伸到本地级别。三层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。本地应用程序将基本字体大小覆盖为15px。其中一个本地应用程序覆盖本地级别到基本字体-size是12像素。

很想知道人们将如何格式化目录结构和我期待的回应！

来源

2013-07-16 user1512126

StackOverflow专用于具体问题只能回答，不讨论。这就是为什么你的问题被低估了，尽管这个问题本身非常好。 –

不属于SO的问题*被认为是关闭的，没有回答。 – cimmanon

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的好东西。你可以用mixin生成应用程序的CSS。 Mixin具有可以用参数覆盖的所有内容的默认值。另外，请考虑在Global项目中创建一个Compass扩展。它可以让你从一个模板中生成应用程序项目，并且还提供了mixins和东西。

来源

2013-07-16 21:07:33

谢谢安德烈。 – user1512126

三层OOCSS架构

回答

相关问题