這裏有一個現場example創建HTML模塊,洽CSS和HTML
我試圖創建模塊其標記和CSS不會改變(例如,我可以使用相同的模塊中的公用事業,頁腳,標題等。部分),但我仍然希望自由增加/減少模塊的大小。
理想的情況下,我的CSS是這樣的:
article {
base styles
}
article.sample1 {
custom styles
}
article.sample2 {
custom styles
}
我能夠使用此代碼調整article.login模塊的尺寸:
section.utilities > article
或
section.test > article
Article Element(或替代)。我正在使用文章元素。有更好的嗎?我在管子上尋找自定義元素(A List Apart,The Worm Hole和Ajaxian)。我應該堅持使用文章,使用不同的還是自定義的?
IE。我還沒有能夠在IE中測試這個。我認爲我的基地覆蓋着inline-block和background-size,但我不確定child selectors。您是否看到支持此代碼的任何問題?
最後,這種方法是一個壞主意?最終,這將允許我在PHP文件中構建模塊/對象,我希望這將導致快速開發和簡單的代碼管理。
更新
我想創建一個自定義元素(模塊),卻發現是不切實際的。 data attribute和CSS attribute selectors的組合爲我提供了像自定義元素一樣的工具。
<article data-module="helloWorld" />
所有模塊都可以通過
article[data-module] { ... }
如果您使用的是HTML5,無論支持它的任何IE版本都會支持CSS子選擇器。 – BoltClock
我的印象是[HeadJS](http://headjs.com/),[Modernizr](http://www.modernizr.com/),[html5shim](http://code.google.com/p/html5shim /),並且類似的JS解決方案爲舊版本的IE添加了對HTML5元素的支持。 – w0lf42