爲面向未來的CSS編寫HTML代碼

查看CSS Zen Garden，我可以看到將設計和內容分開的強大和便利。可能性似乎幾乎是無止境的人們可以改變樣式表，整個網站的外觀可以徹底改變。爲面向未來的CSS編寫HTML代碼

比方說，我正在把網站的HTML部分放在一起。我怎麼知道把div放在哪裏，在哪裏嵌套等等？例如，假設我想在屏幕上放置一些東西：我通常會嵌套3個div，一個是display:table，另一個是display:table-cell，另一個是margin-left:auto;margin-right;auto，它們會有內容。

假設我只是在做HTML內容，但現階段沒有考慮設計。如果我不知道我會將它集中在屏幕上，我怎麼知道我需要將3個div拼在一起？

或者如果我現在有一個設計使用HTML/CSS，並且我的div和跨度都設置了，那麼如果我決定更改CSS以創建全新的佈局，18個月會發生什麼？有時我會有額外的div，有時候我沒有足夠的空間。

想必，擁有更多關卡總是會更好。這樣，可能發生的最糟糕的事情就是你有一些多餘的div，它們沒有風格並且沒有明顯的效果。

這是其他人有的問題嗎？我知道CSS Zen Garden是一種特殊情況，但是當您更改相應的CSS時，通常會更改HTML代碼嗎？

來源

2011-08-24 Ozzah

我在網絡開發方面工作了很多年，在現實中，事情與理論有些不同：沒有內容和表示分離的東西。您總是會滑入其他div s。

你最好遵循YAGNI的原則。在編寫HTML時不要擔心你的CSS。稍後再回來做一些必要的調整。

至於禪花園，你會發現在源代碼中的註釋：

這XHTML文件被標記爲用戶提供最大可能的靈活性設計。有更多的課程和無關的標籤比需要更多，而在現實世界的情況下，它更可能更精簡。

來源

2011-08-24 06:01:37 user123444555621

這一切都取決於您的網站是如何驅動的。如果您正在使用模板文件，更新量將會很小。

你不想用多餘的Divs超載你的代碼，因爲a）加載時間（儘管這在理論上是最小的差異），b）當別人編輯你的文件時會產生很多混淆。

在你的例子中，它看起來像你可能被用來表格樣式佈局。使用Div來包含您的佈局將使得靈活性變得非常容易。

來源

2011-08-24 05:51:58 ckaufman

理論上，爲了改變樣式，您不必觸摸數據（HTML）。在實踐中，你提到了那些問題。

我會做的是對div的一個或多或少明智的用法（例如，我認爲我可能想要移動的任何東西，或者我想要一起參考的任何一組HTML）去它自己的一個div）。否則，不要使用太多的div，因爲諸如可讀性，可維護性和HTML大小等原因。
然後，每當你想改變風格，做最小的div添加，這樣你就可以做你想做的。

來源

2011-08-24 05:56:14

這是一個真正的CSS問題，它的是由CSS3的作者認可。最近的published draft (2003) of the CSS Generated and Replaced Content module討論了一個叫做::outside的僞元素，它可以解決你描述的問題。這會，實施的時候，對於

<div class="mycontent">Some text</div>

已經允許你寫：

div.mycontent { margin-left:auto;margin-right:auto; } 
div.mycontent::outside { display:table-cell; } 
div.mycontent::outside(2) { display:table; }

不幸的是，::outside僞元素從未進入了CSS3選擇器規範，以及next draft (2011) of the CSS Generated and Replaced Content module不會提::outside僞元素。

因此，我們堅持把封裝div放在任何地方，以防萬一您注意到，不允許正確分離演示文稿和內容，並且仍然是一個非常令人不滿意的情況。

來源

2011-08-24 06:53:13 Alohci

爲面向未來的CSS編寫HTML代碼

回答

相關問題