風格問題 - 樣式和樣式表的方法

Question

我有一個網站通常在首頁的頂部有新聞項目，有時（對於特定的時間段）在新聞項目下有一個或多個「快速鏈接」，以引導用戶進入熱門話題頁面。在這些之下是平常的街舞。

我們有這些網站的替代語言版本，這些網站通常不包含新聞項目或快速鏈接，但可能會不時。

以前，當外觀不那麼動態時，每個部分都被絕對定位，並且適當地配置了top屬性。但是，由於需要更微妙的變化，我發現自己斬斷和改變了基本的HTML和樣式表規則。

我的問題是人們如何看待這個問題的不同方法，他們是否有任何我沒有考慮過的建議。實現理想的結果很簡單，但我正在考慮編寫好的代碼，這使得網站更易於閱讀&調試。

我可以有單獨的樣式類爲每個項目的每個變化：

.news {top: 100px; etc...;} 
.news2 {top: 150px; etc...;} 
.ql {top: 150px; etc...;} 
.ql2 {top: 200px; etc...;} 
.main {top: 200px; etc...;} 
.main2 {top: 250px; etc...;} 

...這似乎有點太冗長。

或者，也許：

.news {etc...;} 
.ql {etc...;} 
.main {etc...;} 
.top100 {top: 100px;} 
.top150 {top: 150px;} 
.top200 {top: 200px;} 
.top250 {top: 250px;} 

有些更緊湊，並保持風格的樣式表，並遠離HTML。

或者，甚至：

.news {etc...;} 
.ql {etc...;} 
.main {etc...;} 

在HTML

：

<div class="news" style="top:100px;"> 
<div class="ql" style="top:150px;"> 
<div class="main" style="top:200px;"> 

這是最「直接」的解決方案，但顯然有些造型是在HTML從一個較真的點的觀點是'不'否定';這種觀點有實際的理由，但在這種情況下，這可能是處理將要求的各種任意變化的最簡單方法。

注意：該網站（很差）由第三方設計，儘管我試圖在沒有完全重寫的情況下進行搶救。然而，這個網站可能會在2009年第3季度或第4季度重新開發。在那個階段，我希望從絕對定位的方法轉向更流暢的方法 - 所以這個問題是關於什麼在過渡期間做，也作爲風格的一般問題。

Answer 1

.top100 {top: 100px;} 
.top150 {top: 150px;} 
.top200 {top: 200px;} 
.top250 {top: 250px;} 

這是一個不好的做法，因爲您現在將樣式信息添加到HTML中。 更好地使用描述性名稱並將它們鏈接在一起。像：

.news {top: 100px; etc...;} 
.news2, .ql {top: 150px; etc...;} 
.ql2, .main {top: 200px; etc...;} 
.main2 {top: 250px; etc...;} 

您可以稍後添加更多規則。

如果它真的是一個臨時解決方案，請繼續，讓自己容易。但是現在，大多數臨時解決方案都存在很多年了。

Answer 2

那麼，你使用"<classname>"沒有快速鏈接，「<classname>2"有什麼時候？

你知道，你可以在一個元素上使用多個類名。例如，你可以有<elem class="<classname> quicklinks">。在你的CSS中有一個單獨的.quicklinks類來將所有內容向下移動50px。

絕對定位並不意味着這樣的事情。如果您將文字大小調整得如此之大，事情會開始重疊。

有可能只是快速鏈接的存在可以用來使其他所有內容都下降，因爲您不需要定位這樣的元素。

Answer 3

其實，最好的解決辦法可能是這樣的：

.news, .news2 {top: 100px; etc...;} 
.news2 {top: 150px;} 
.ql, .ql2 {top: 150px; etc...;} 
.ql2 {top: 200px;} 
.main, .main2 {top: 200px; etc...;} 
.main2 {top: 250px;} 

但我同意你的觀點（S）GameCat ...

感謝