HTML/CSS的最佳實踐

我正在編碼.psd圖像到html。但是我對這樣做的最佳做法感到困惑。即
的造型一achor就像一個按鈕，我用下面的樣式屬性HTML/CSS的最佳實踐

.button { 
padding: 10px; 
display: inline-block; 
text-decoration: none;   
    background-color: #3f4551; 
color: white; 
    background-image: url("../images/icons/icon_left.png") no-repeat 10px center; 
}

現在我可以用<a href="#" class="button"></a>來獲得所需的結果。
但是我有許多錨定件的具有相同的造型像以前僅與像上右側圖標微小的變化，而不是左和不同的顏色，梯度等。所以我決定把它分解在多個class即

.button{ 
    padding: 10px; 

display: inline-block; 
text-decoration: none; 
background-repeat: no-repeat; 
} 
.icon_left{ 
    background-position: 10px center; 
} 
.color_blue{ 
     color:blue; 
    }

現在我可以使用這些類的樣式即<a href="#" class="button icon_left color_blue></a>" 但這種方式標記被越來越笨拙weird.So我決定尋求其是最好的做法？感謝提前:)

來源

2012-03-15 Vivek

按鈕的最佳做法是使用按鈕，而不是鏈接。 – 2012-03-15 09:26:19

@Truth：你爲什麼這麼說？他們*是*鏈接。這是CSS的重點，UI決定是另一個話題。 – 2012-03-15 09:27:21

「.psd image to html」是什麼意思，以及如何解決這個問題？ – 2012-03-15 09:27:45

這是一個好的開始，你正朝着正確的方向前進。

一些進一步的線索不過，考慮的最佳實踐：

使用描述性的名稱沒有明確告訴他們的價值。例如，不要使用color_blue作爲類名稱，因爲如果重新設計應用程序，顏色可能會改變。更好的名稱反映了該元素的用途，如default-action,disabled或emphasized。以相同的方式，with-icon將會比icon_left更好。名稱是關於語義的，而不是視覺表示。
如果適用，使用特定的選擇器。例如，如果按鈕類別由button元素使用，則使用選擇器，如button.emphasized。讓我們重新使用該類名稱作爲其他類型的元素（即div.emphasized），以便您不必將它們重命名爲.button-emphasized和.block-emphasized。

如果您瞭解有關文檔結構的更多信息，甚至可以區分#content > button.emphasized和#sidebar > button.emphasized，並根據元素層次結構使用不同的按鈕類。
使用選擇器繼承（如果適用）。如果一個類共享相同的屬性值對，但其他屬性值不同，則應該使用繼承。例如.emphasized適用於所有使用此類的元素的規則，而button.emphasized & div.emphasized適用於特定規則，這些規則可以覆蓋更一般的（「父級」）選擇器。
應用命名約定。通常，這些名稱是小寫字母，而不是使用下劃線，而是使用減號。因此，with-icon優於with_icon。您也可以使用如下所示的大寫字母：withIcon。我個人更喜歡第一個版本。

來源

2012-03-15 09:50:40 Alp

感謝您的時間來回答這個問題。但有時候我真的被命名約定卡住了。例如C＃說要用大寫字母命名方法名稱，html表示使用減號（ - ）。 – Vivek 2012-03-15 17:02:47

每種語言都有其自己的命名約定。沒有普遍有效的慣例。如果您從一種語言切換到另一種語言，可能會很不方便。 – Alp 2012-03-15 18:59:21

它可能聽起來不專業，但我可以問你，如果我可以使用我的選擇相同的命名約定，我經常使用的所有語言lyk C＃，SQL，Java最後但並非最不重要的HTML/CSS – Vivek 2012-03-15 19:13:46

如果我理解正確..你在正確的道路上！我知道它看起來像你的源代碼太充塞，但它的工作方式。請記住，類用於多個元素的樣式，並且Id（如果以正確方式使用）用於樣式化單個實體/元素

來源

2012-03-15 09:31:05 luca

HTML/CSS的最佳實踐

回答

相關問題