2013-02-24 64 views
7

說我有一種顏色,我知道我要在網站上使用很多顏色。全球CSS幫手類是一個好主意嗎?

我既可以定義顏色很多次在不同的CSS類的

.nav-login { color:#green; other css....... } 

或者

.green {color:green;} 
.nav-login { other css....... } 

<div class="nav-login green">stuff</div> 

所以概念是,你應該使用的輔助CSS類或您應該定義具體的一切。

從理論上講,您將通過寫入更多的CSS和更少的HTML來節省帶寬,但我發現在HTML愉悅中應用助手CSS類的方法,就像您在設計意義上編寫語義CSS一樣。

+1

你應該試試[less](http://lesscss.org/)。 – Rob 2013-02-24 17:47:58

+1

如果你只是推薦1 * CSS預處理器*,至少推薦一個好的。在很少的情況下,LESS比Sass少*。 – cimmanon 2013-02-24 18:00:08

+0

@cimmanon這就是LESS的意思,就像[KISS原則](http://en.wikipedia.org/wiki/KISS_principle)一樣。當你需要的只是一個簡單的預處理器時,不要使用複雜系統的5%,它允許嵌套規則和允許DRY的一些簡單的宏。我不需要SASS,我不想強​​迫我的非開發人員的同事使用它。 LESS與另一個預處理器*一樣好,具體取決於您的要求*。 YMMV(這裏是OT) – FelipeAls 2013-02-24 18:41:52

回答

3

我個人認爲根據它們的屬性來命名類是個好主意,比如.green爲綠色文本。相反,使用一個限定詞,說的警告,提醒.approved綠色文字,.warning

依我拙見,選擇器(類標識)應反映元素的作用/目的,而不是他們的出現。舉例來說,如果您想重新設計您的網站並採用新的配色方案,並且您的導航菜單從綠色變爲藍色 - 那麼.green選擇器的意義就會很小,並且很難理解接管誰的人未來的項目,如果有的話。

此外,如果您已經可以使用.nav-login指定.green類,那麼沒有理由將其分配給導航登錄<div>

克里斯科伊爾編制了一個相當全面的CSS style guide - 這不是黃金法則,但它是很好的遵循。

+0

啊,它不一定是綠色的。例如,它可以是master_leading_brand_colour。啊,現在我少了+ sass。如果我可以在CSS中定義變量,那麼我可以通過變量來改變顏色。涼。 – 2013-02-25 03:24:23

0

我將爲您的問題提供完全不同的解決方案。使用LESS

利用這一點,你就可以定義變量和其他很多很酷的東西太多

變量允許你在一個地方指定廣泛使用的值,然後在整個重新使用它們樣式表,使全局更改與更改一行代碼一樣簡單。

2

其實這是一個好主意,我也使用它們,但沒有他們的名字,你說的方式,teddyrised例子是好的,

只是我舉的例子,當我做一個簡單的項目,什麼不可行需要一個巨大的頁面結構和最小的CSS我的名字他們這樣

.push-right { 
    float: right; 
} 

push-left { 
    float: left; 
} 

.no-float { 
    float: none; 
} 

.centered { 
    margin: 0 auto; 
} 

.success { 
    color: green; 
} 

.error { 
    color: red; 
} 

.warning { 
    color: orange; 
} 

.info { 
    color: blue; 
} 

因此,實際上它的操作系統沒關係使用它們,只是豔記出來nameing他們:)

3

看一看OOCSS(和Smashing Mag introduction to it))如果你還沒有。也來自Yandex的BEM - 再次Smashing Mag intro to it

幾年前,當我在尼克爾「stubbornella」Sullivan在我參加的一次會議上發表了一篇關於它的演講時,我撓了撓腦袋,想起了幾年前沒有嚴格區分CSS(CSS)但是現在我正在從事幾十頁的項目,而我們需要從少數幾個人的團隊中爲客戶從PSD轉向HTML/CSS,我的需求已經發生了巨大的變化! 單獨工作在CSS上,其他人不會在團隊中修改在啓動時的單個項目中在客戶端的團隊中重複使用您創建的CSS並非完全相同。

瞭解OOCSS及其能爲您做些什麼,試試看,如果它不合適,請不要在您的項目中使用它。或者做。

使用或不使用CSS預處理器在這裏是非常不相關的:如果你使用它們來輸出1公里長的選擇器,你顯然使用它們是錯誤的。它們只是一種可以更快,更輕鬆地編寫CSS的方式(不必費心去學習每個CSS3屬性需要哪些前綴,因爲這些宏很好,但它們仍應該輸出比以前更多或更少的CSS)。關鍵是編寫高效的CSS,無論是否使用預處理器。和ZenCoding/Emmet一樣:當你厭倦了一天又一天地寫相同的重複行/指令時,你就知道你需要它。但是他們會輸出這些相同的CSS行,這裏沒什麼神奇的。

相關問題