2012-11-26 9 views
4

我真的很喜歡新的Metro UI,所以我正在使用基於網格和Metro UI的網格製作演示網站。添加到html元素的類有多少?

我意識到有類似的軟件包可以下載以完成大部分工作,但由於我對網頁設計非常陌生(約5個月的經驗),我有更多的樂趣使用內置的檢查器在逆向工程的東西Chrome和Firefox。

我開始了瓷磚的大小和顏色。我想能夠有幾十個不同的尺寸,我希望能夠輕鬆創建它們。現在,我正在爲寬度和高度單獨創建類,併爲每種顏色創建類,然後爲所有顏色選擇器設置懸停邊界。

這是我的HTML看起來像至今:

<div id="tile-wrap"> 
    <div class="std red"></div> 
    <div class="wide x-long green"></div> 
    <div class="x-wide xx-long blue"></div> 
    <div class="xx-wide xxx-long purple"></div> 
    <div class="x-wide long gray"></div> 
    <div class="wide x-long black"></div> 
    <div class="x-wide xx-long white"></div> 
</div> 

所以用這個設置,我可以已經有總共17種不同的尺寸。

現在,我想我還會爲各種圖標和文本大小和樣式製作選擇器。我想我會用jQuery而不是CSS3來做任何動畫來確保最佳兼容性。

當這一切都說了下來,我將有每個部分6或7類,所以是這樣的很多,是我的方法很糟糕?我更像一個開發人員而不是設計師,所以任何提示和建議將不勝感激。

此外,爲了保持瓷磚間隔開,我應該只爲每個尺寸選擇器添加一些邊距,還是有更優雅的解決方案?

謝謝你們,我只是想提高我的設計技巧,並在這個過程中有一些樂趣。

+0

我不認爲你會發現任何性能問題(除非用戶有一個非常,非常緩慢的連接),但你真的需要這麼多的班?你可以組合一些類。看看[jquery-ui](http://jqueryui.com/)如何使用css-classes,我認爲這是一個好方法。 –

+0

我很高興能讀到http://smacss.com/ – meo

回答

1

我會嘗試將這些屬性的一部分分組描述框的某些尺寸(即某些寬度,高度,填充,邊距,字體大小等等)。

我最近看到的最好的技巧之一是隻創建小的可重用類,無論它們在頁面上顯示的位置應該看起來都一樣。即一個.blue-box類無論出現在哪裏都應該看起來一樣 - 所以不要將#content .blue-box與#footer不同#blue-box

下面的視頻概述了一些好的做法停止你的CSS獲得「失控」:

Velocity 2010: Nicole Sullivan, "The Top 5 Mistakes of Massive CSS"