2011-11-06 45 views
0

這裏有一個現場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 
  1. Article Element(或替代)。我正在使用文章元素。有更好的嗎?我在管子上尋找自定義元素(A List Apart,The Worm HoleAjaxian)。我應該堅持使用文章,使用不同的還是自定義的?

  2. IE。我還沒有能夠在IE中測試這個。我認爲我的基地覆蓋着inline-blockbackground-size,但我不確定child selectors。您是否看到支持此代碼的任何問題?

  3. 最後,這種方法是一個壞主意?最終,這將允許我在PHP文件中構建模塊/對象,我希望這將導致快速開發和簡單的代碼管理。

更新

我想創建一個自定義元素(模塊),卻發現是不切實際的。 data attributeCSS attribute selectors的組合爲我提供了像自定義元素一樣的工具。

<article data-module="helloWorld" /> 

所有模塊都可以通過

article[data-module] { ... } 
+0

如果您使用的是HTML5,無論支持它的任何IE版本都會支持CSS子選擇器。 – BoltClock

+0

我的印象是[HeadJS](http://headjs.com/),[Modernizr](http://www.modernizr.com/),[html5shim](http://code.google.com/p/html5shim /),並且類似的JS解決方案爲舊版本的IE添加了對HTML5元素的支持。 – w0lf42

回答

1

引用我的0.02:

  1. 歷史,定義自定義元素一直是令人難以接受的,並且,在語義上來說,應該選擇一個最接近他們的預期目標。這讓位於div s和span s的驚人使用。我個人認爲,article標籤的推出是一種折衷方案,允許高度可定製的元素,而不需要實際走出HTML框,進入XML框。從W3C規範:

    文章元素表示由在一個文檔,頁面,應用程序或網站的自包含組合物的頁面的部件,並且其意在獨立地分發或可重複使用的,例如在聯合。這可以是論壇帖子,雜誌或報紙文章,博客文章,用戶提交的評論,交互式小部件或小工具或任何其他獨立內容項目。 W3C規範

    結論 - 該article是一個很好的選擇。

  2. 這是IE瀏覽器。在IE中使用更新的想法會花費大量時間編寫非常間接且可能完全不相關的代碼。大多數舊想法在IE中不起作用。

  3. 我認爲這是一個好主意。小心你的模塊,儘管如此,根據你的服務器配置,使用php包裝來安裝模塊可能涉及大量的文件讀取和查找時間。

希望這會有所幫助。