組織CSS代碼的結構化方法

Question

構建一個相對較大的網站時，CSS結構應該從初始階段開始適當地確定和組織範圍。如果沒有使用CSS框架，那麼所有內容都可以集中到一個龐大的樣式表中，但這很快就會失靈，並且可能成爲巨大的維護責任。在過去的幾年中，我已經將我的樣式表分成了各種文件，包括：base.css，layout.css，fonts.css，elements.css，但很容易，樣式定義可以在文件之間跳轉，這種方法需要更嚴格。我沒有使用框架，因爲我不是我的CSS代碼中的預設列和預定義元素的粉絲。

有什麼辦法，模式或技巧，你們可以建議讓事情有組織？什麼樣的命名約定，可重用性實踐和模式是有用的？這是一個框架應該用於的東西嗎？

Answer 1

我用愛LESS，但現在我的Stylus的大風扇，因爲我覺得它使小於/ SASS/CSS更乾淨的代碼 - 沒有分號，冒號或括號。

因爲針（和LESS及SASS）允許您定義變量和模板和功能，我有以下的文件，這應該是按以下順序：

• 復位 - 的Eric Meyer's CSS reset
手寫版
• 變量 - 變量，如顏色，字體等
• 模板 - 模板像border-radius，過渡和clearfix
• 花式的每一頁（首頁，應用，服務條款等）

這些都是串聯的，並使用一個簡單的構建腳本編譯爲CSS。

你可以看到這些看起來像什麼;我爲此做了a GitHub repo。

Answer 2

用於編寫一致且易於管理的樣式表CSS LESS Framework非常有用。
LESS提供了以下機制：用於動態編寫CSS代碼的變量，嵌套，mixins，運算符和函數，並且可以在客戶端（Internet Explorer 6+，WebKit，Firefox）和服務器端運行，具有Node.js或犀牛。

http://lesscss.org/

Answer 3

關於手寫筆 - 缺少分號，冒號和括號會使您的代碼不易讀取IMO，而不是更多。