CSS - 色彩的分離和位置

Question

我只是想知道在這方面別人做什麼：

你儘量保持位置CSS（佈局）從顏色/風味CSS（顏色，背景顏色，背景中分離出來 - 圖像，字體大小和家庭）？

使用兩種樣式表？結合兩個樣式表服務器端？ CSS的抽象層？ 或者你甚至不嘗試？

我知道有時候在同一個web項目上工作六個月後，我通常可以使用位置CSS，但最終想要更改顏色/圖像。

Answer 1

我傾向於將所有CSS保留在一起，而不將「顏色樣式」與「位置樣式」或「佈局樣式」分開。我發現，當我經常嘗試調試某個特定的「模塊」時，將所有CSS規則應用於一個選擇器更容易，而且不會散佈在樣式表上。

但是，我建議您在thinkvitamin.com上閱讀Creating Sexy Stylesheets。我所做的一件事就是每次都按特定的順序列出規則，所以我知道在聲明塊中哪裏可以找到我想要的內容。

在集納博爾頓的http://creatingsexystylesheets.com/

Answer 2

更多的信息，我把一切都在一個文件中，只允許使用替代的風格不同的文件（例如，用於打印）。

在那個文件我保持整體佈局（列，headeer &頁腳）與實際內容單獨（段落，標題，列表...）

我習慣地認爲：面向對象的，所以我組樣式爲不同的對象（菜單，博客文章）在一起。從這個角度來看，顏色和位置都屬於同一個對象，因此它們保持在一起。

我希望爲在樣式表一旦定義顏色的能力，爲它們分配一個聲明名稱（如「HeadingColour」），然後分配顏色選擇時所使用的名稱...

Answer 3

我將所有內容保存在一個文件中，並使用CSSEdit中的文件夾功能保持其組織性。網頁設計公司Viget有關於這項技術的博客文章here。

Answer 4

你會發現在大型項目中，佈局和顏色/味道CSS（如果你對此很聰明）通常恰好是分開的。首先，如果你一直在反覆設置顏色/字體大小/字體家族風格的規則，那麼你就是在浪費你的時間。通常你應該在一個地方定義你的字體：body標籤。任何額外的字體都應該在它們各自的標籤中定義...... h1，h2，p等。在我看來，給這些標籤定位指令並不是一個好習慣;他們應該被放置在一個將負責其佈局的div中。顏色和字體大小也一樣。我認爲這個規則的唯一例外通常是背景材料，如果你有很多漸變和奇特的東西，那就更是如此。

真的是什麼是規劃;一個精心策劃的項目需要很少的色彩/風味風格規則。所以要回答你的問題，是的，我通常有一個「Global.css」文件，它定義了h1-h5，a，p和其他任何包含文本的標籤的所有字體和顏色。

編輯：

通常情況下，因爲我工作的項目是相當大規模和有許多不同的模塊，我們在某種層次的分隔方式;這是有道理的，因爲CSS的工作方式 - 只要你不改變在「base」（或者在我們的例子中是global.css）的某處放置的樣式規則，樣式將會棒。這有助於我們修改我們網站的字體，所以我們只需在「body」標籤處更改font-family規則，並將其傳播到整個網站。

所以，我們的樣式佈局的工作是這樣的：

Global.css (Fonts/Text/Primary font colors) 
--> genericBase.css (basic page structures such as columns that are used throughout the site) 
--> nav.css (left-hand nav and/or top nav bar) 
--> formLayout.css (labels, inputs, fieldsets, any other form stuff) 
-----> forums.css (individual modules' styles that may deviate a bit from the usual structures, or simply things specific to those pages) 
-----> blogs.css 
-----> messages.css (etc etc etc) 

的位置箭頭意味着暗示的層次結構中的文件的「秩序」。如果我們將所有樣式放入一個文件中，箭頭越長，樣式表中的這些文件所包含的規則就越向下。

所以你看，整個想法是從非常一般的風格開始，一直到最具體的。請記住，您的CSS文件加載的順序與瀏覽器有關。你可以使用這個你的優勢。有趣的是，當我們到達特定模塊的css文件的時候，我們只有很少的樣式需要寫，因爲其他重要的東西大部分實際上都是自己編寫的。

就像我說的那樣，計劃是非常重要的。我發現這種方法可以更容易地「調試」我的風格，而且我幾乎不使用任何黑客技術，通常只適用於愚蠢的ie6內容。

讓我知道你是否需要更多信息。我很高興這對你有幫助。

Answer 5

我分開我的佈局和顏色樣式最近，我現在有幾個CSS文件，我匯入如下：

<link rel="stylesheet" type="text/css" href="style.css" media="screen" /> 
<link rel="stylesheet" type="text/css" href="style-default.css" title="Default Style" media="screen" /> 
<link rel="alternate stylesheet" type="text/css" href="style-bw.css" title="Black and White" media="screen" /> 

全部佈局在style.css中，然後顏色風格默認。 CSS。 這種方式我有一個標準的風格，但用戶也可以選擇更改顏色。這不僅爲用戶提供了選擇，而且可以輕鬆地在不觸摸佈局的情況下進行顏色更改（我傾向於更頻繁地更改顏色）。

在Firefox中，我的顏色選項顯示在「頁面樣式」下的視圖菜單中。

Answer 6

我曾經將它們分開，但它更難維護。問題在於許多「格式化」屬性會對佈局產生影響，而許多「佈局」屬性實際上可能是設計的。

一些例子：

雖然「邊界」可以被認爲是「格式化」屬性，他們需要的空間量，所以你需要設置或刪除邊框時，調整佈局。

「行高」與字體大小相關，可能被認爲是「格式化」屬性，但它對元素大小以及它們如何垂直對齊有很大影響。

邊距和填充有時需要佈局，有時僅用於格式。

如果您認真思考，只有很少的屬性實際上是純粹的格式設置或純粹的佈局。

這往往容易只是把一切都在同一個文件中，並儘量保持它的清潔通過使你的聲明的訂單，相關的屬性分組等

Answer 7

我已經陷入了分離我的CSS成格局以下內容：

• 佈局（頁眉，頁腳，徽標 - 一般鉻）
• 排版（字體，大小，可重複使用的內嵌字體樣式）
• 小工具

後一類一般由的CSS代碼，我再利用項目之間，通常被自己劈了下來爲：

• 形式（左對齊，右對齊，樣式所需的字段，等）
• 網格（2-COL，4-COL，等等等等等等 - 約20個左右的品種）
• 黑客（IE /其他CSS黑客）
• 其他東西（AJAX部件，工具欄，評論框，等等 - 任何東西都可以重複使用）

對於顏色，我只是保留一個小抄文本文件。將它們保存在單獨的樣式表中可能只在非常非常有紀律的情況下才有效。

Answer 8

我已經開始使用類來專門處理顏色。

.element {保證金，填充佈局東西}

.ourcolor {#some顏色}

它延長了類屬性雖然： < DIV類= 「元件ourcolor」>

但是，我可以重複使用顏色： < span class =「ourcolor」>一些文字

到目前爲止，我更喜歡它，因爲調整顏色要容易得多。

Answer 9

正如馬克W指出的，Creating Sexy Stylesheets是一個夢幻般的閱讀。有一件事他們倡導的是通過框架分離造型擔憂：

• screen.css - 屏幕CSS文件可以擁有你想要用於屏幕上所有您的樣式，和/或可以導入其他樣式如下：
  • reset.css - 復位CSS文件可用於「重置」所有默認瀏覽器樣式，這可以幫助更輕鬆地實現跨瀏覽器兼容性。
  • typography.css - 排版CSS文件可以定義您的字體，大小，領先，字距甚至顏色。
  • grid.css - 一個網格CSS文件可以具有您的佈局結構（並通過定義基本頁眉，頁腳和列設置，充當您網站的線框）。
• print。css - 一個打印的CSS文件將包含你想要在頁面打印時使用的樣式。

如果按照這種模式，顏色會去你的typography.css和佈局將是您的grid.css。