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。其中一个本地应用程序覆盖本地级别到基本字体-size为12px。

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

Answer 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">

来自后一个文件的

样式将覆盖以前文件中的样式。

例如，您.logo { font-size: 1.5em; }中可能有global.css。如果您在.logo { font-size: 2em; }中application.css，则会占优势。

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

要覆盖样式，后面的样式应该更多specific或具有相同的选择器;
用于覆盖相同的选择器，正确的文件顺序很重要（后一个文件占优势）。

当然，SASS可以（并且应该）用于准备那些CSS文件（如果需要的话，将它们合并在一起），但这并不意味着它应该变得复杂。保持简单，士兵！

如果你想要复杂的方式，你应该考虑使用一些SASS好东西。您可以使用mixins生成应用程序的CSS。 Mixins具有可以用参数覆盖的所有内容的默认值。另外，请考虑从Global项目中创建Compass扩展名。它允许您从模板中生成应用程序项目，还提供mixins和stuff。

三层OOCSS架构

1 个答案: