三層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。本地應用程序將基本字體大小覆蓋爲15px。其中一個本地應用程序覆蓋本地級別到基本字體-size是12像素。

很想知道人們將如何格式化目錄結構和我期待的迴應！

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的好東西。你可以用mixin生成應用程序的CSS。 Mixin具有可以用參數覆蓋的所有內容的默認值。另外，請考慮在Global項目中創建一個Compass擴展。它可以讓你從一個模板中生成應用程序項目，並且還提供了mixins和東西。