2011-04-19 82 views
54

嘿,大家好,— HTML5 BoilerplateHTML5 Reset是兩個HTML,CSS和JavaScript模板,內置了很多現代最佳實踐。他們的目標在很大程度上是相同的:HTML5 Boilerplate與HTML5重置

  • 快速,穩健的,現代的Web開發
  • HTML5(!咄)
  • 跨瀏覽器正常化(包括IE6和移動瀏覽器支持)
  • 漸進增強和優雅降級
  • 性能優化
  • 沒有一個框架,但你的下一個項目的起點

顯然,它們在功能上非常相似。他們的實現在哪些方面有所不同(例如,可能使用不同的技術實現IE特定的CSS修復)?它們的範圍有什麼不同?看起來好像HTML5 Boilerplate有點大(構建工具,服務器配置等),但是當涉及到人們會看到的實際網站時,很難知道它超出了HTML5 Reset的範圍。

回答

47

一般而言,這兩個項目都是爲開發Web項目的開發人員提供一個堅實的起點。他們都擺脫了許多繁瑣的,一些容易出錯的樣板,許多開發人員發現他們自己爲每個項目重新創建。他們如何去做的細節略有不同,但在大多數情況下,他們取得了相同的結果。

正如您所指出的那樣,HTML5Boilerplate已添加到某些構建腳本中,以幫助開發人員按照最佳實踐加快其服務器端項目(如遠期過期標題等)的頁面速度。 HTML5Reset項目更側重於語義,內容和樣式。例如,HTML5Reset對於HTML5中的頁面內容有更多的示例結構(以幫助向人們展示如何使用一些新元素),而HTML5Boilerplate則沒有。

隨着越來越多的用戶在移動平臺上發現自己,並且Google增加了效果page response times have on page rank,HTML5Boilerplate包含的響應時間和頁面速度部分變得越來越重要。有很多論文顯示頁面響應時間的小幅增加會對您的網站的影響產生可衡量的負面影響used and perceivedespecially in an eCommerce setting ...通常慢100ms的頁面會減少銷售量的百分比)。

在CSS方面,兩個項目的大部分重置樣式部分都非常相似,基線設置的部分有一些細微差異。然而,IE特定的修補程序基本上是相同的,HTML5Boilerplate比HTML5Reset更能控制IE樣式,如表單元素(例如複選框/單選按鈕和有效/無效狀態)。

兩個主要HTML5Boilerplate覆蓋HTML5Reset的CSS區域不是常見的幫助類,它們可以幫助您更方便地訪問網站,例如.hidden.visuallyhidden,以及對打印樣式進行一些實質性的調整,這些打印樣式既可以使瀏覽器的打印更加類似,也可以作爲一些節省成本和可訪問性的東西,例如使背景圖像透明(不要浪費碳粉),並將實際的URL添加到鏈接和標題縮寫中。

我強烈建議閱讀這兩個項目的信息,以及他們如何做並排比較的事情,因爲相似之處,以及差異(和背後的推理)是相當豐富的信息,並幫助我更好地確定每個我想使用的部分。最終,就像任何「庫」類項目一樣,作爲開發人員,您需要了解自己在做什麼,並且可能應該調整基準以滿足項目的特定需求。

+1

您可以提供指向頁面響應時間與頁面排名參考的論文的鏈接嗎? – 2011-04-19 16:49:18

+0

@s_hewitt - 按照您的要求,添加引文。 – cdeszaq 2011-04-19 16:50:04

+0

很好的答案,cdeszaq。 – Francisc 2011-04-19 18:39:14

0

我在一個環境中工作,在這個環境中,以前的開發人員使用JQueryPrototype來使公司陷入混亂。我們不僅需要解決兼容模式問題,而且還需要考慮它帶來的額外開銷。在調試時,Prototype「劫持」Firebug中的調試信息,這導致更多的工作。而令人生氣的部分是,我已經解開了這個爛攤子好幾個月,剛剛開始接近完成它......而就在我即將拉上Prototype插件時,我似乎總是找到另一個依靠它的部分...

這就是爲什麼我每次都反對具有類似目的的框架組合。例如,無論你認爲YUI Grids有多酷,如果你加載整個YUI Framework,你最好不要在做jquery,Moo或Prototype。你會不必要地陷入困境。它殺死了加載時間(其中wrecks the user experience),只是給開發人員頭痛和不必要的工作。

看看你的網站的這個階段,像建立基礎。你有機會使用任何你想使用的東西,但是你必須小心,不要讓自己陷入一個角落。因此,請使用基於您資源的專用工具和一流工具。不要只是使用一些可愛的東西!我們很幸運,許多高質量的工具都是免費的,所以我們有一個選擇。但是要知道,你正在爲未來指引你的網站的方向,而且如果你的決定是匆忙做出的,你可能就像我這樣的人必須處理後果。因此,除非你永遠不會使用另一個框架,否則我支持重置...或甚至只是執行高質量標準的CSS。

+1

我完全同意你對JavaScript框架的想法,但我們在這裏討論的HTML5框架大多是標記,而不是活動代碼,而且大部分都幾乎相同。具體的CSS略有不同,但像一個優秀的開發人員遇到的情況一樣,重要的部分是理解你將要使用的內容,而不是盲目地應用它。沒有開發人員對語義HTML和CSS都有深刻理解,HTML5框架都無法實現項目的全部潛力。 – cdeszaq 2011-04-19 17:01:10

+2

在我最後的演出中,我遇到了一個使用jQuery和Dojo的項目。我認爲這只是他們第一次接觸AJAX。但後來我們聘請了一家非常昂貴的諮詢公司,它使用jQuery和Ajax.net發回代碼。然後我放棄並退出。 – 2011-04-21 19:55:57

+1

對於框架來說,這是一個很好的建議,但是我發現很難想象它是如何適用於這兩種不是框架的節省時間的工具。 – JohnC 2011-12-28 22:05:31

0

您可以使用一個...

像@murtaugh說(http://5by5.tv/bigwebshow/45)你不需要學習任何東西當u先用復位啓動。根據我的經驗,在R部門工作時,當需要演示或做快速迭代時,可以使用Reset(或者如果你已經知道它,則爲Boiler)。當我需要構建產品進行部署時,我只是因爲有更多的東西而轉向鍋爐。 適用於我,但現在因爲我知道我可以很容易地使用任何一個。

0

我其實很想說使用傳統的reset.css是最好的...我發現我的移動應用程序沒有兼容性問題。但是,我正在使用jQuery移動框架開發這些應用程序。

所以我想這是真正有條件的,你正在使用什麼樣的工具。 Phonegap似乎沒有任何問題編譯我的代碼到所有操作系統。在仿真器中查看我的源代碼看起來非常好......

所以我真的沒有看到樣板的要點,除非您嘗試實現polyfills。