0

我正在寻求有关遵循 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 - 大小为 12 像素。

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

4

1 回答 1

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

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

例如，您可能.logo { font-size: 1.5em; }在您的global.css. 如果你这样做.logo { font-size: 2em; }，application.css它将占上风。

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

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

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

如果你确实想走复杂的路，你应该考虑使用一些 SASS 好东西。您可以使用 mixins 生成应用程序的 CSS。Mixin 对所有可以用参数覆盖的东西都有默认值。此外，请考虑从您的 Global 项目中创建一个Compass扩展。它将允许您从模板生成应用程序项目，并且还提供 mixins 和东西。

于 2013-07-16T21:07:33.680 回答