使用自己的CSS框架（轉） - w2xh－IT工程師數位筆記本

文章出處

[經典推介]CSS框架選擇向導

不少CSS框架已經存在了一段時間，但大多數Web開發人員避免使用它們。相反最有經驗的開發者希望創建自己的CSS框架，提供個性化解決方案的優勢，并減少對第三方的解決方案消極方面的依賴。雖然CSS框架，目的是加快網絡開發，但是開發自己的全面的CSS框架，可能需要大量時間和精力。本文將提供指導和精心挑選的資源，以協助你完成這一心愿。

        開始之前
        首先嘗試一些流行的CSS框架或者至少去看看他們提供的文件：

        您可能還需要檢查CSS框架的權威清單。

        為什么要建立自己的CSS框架？
        在現代的網頁設計中CSS起著至關重要的作用，它是真的不是很難學。沒有理由不去尋求一個捷徑完成這個似乎一勞永逸的事情。

        這里有一些具體原因/優點：

        更有成效：
        您將能夠使用自己更有效的框架。

        更好的設計兼容性：
        您的設計將不依賴于如何制定一個框架，框架將自動支持你的設計的喜好。

        更少的頭痛的事：
        你會不會繼承錯誤或由其他人創建的缺陷。當然，你自己的CSS框架可能有錯誤或缺陷，但你會更好地解決這些問題。

        更大的靈活性：
        當您的設計偏好與需求的有所變化時，您將能夠輕松地對其進行修改。

        額外的好處：
        你不會花費您寶貴的時間來學習的框架，相反你的時間會花在學習更珍貴的東西：CSS。

        讓我們開始 - 分組及規則
        最主要的反對意見是，開發自己的CSS框架將是復雜的任務。 CSS框架只不過是一個簡單的在您的項目中您反復使用的CSS代碼集合。優化和改善代碼質量和效用的過程，需要額外的努力，技巧和時間。

        讓我們來看看什么類型的CSS代碼是我們的項目中反復使用的。我們總是使用CSS布局，排版，表格和常用的如列表，圖片等，我們還可以使用CSS來確保整體外觀元素和感覺在所有Web瀏覽器中致。此外，我們有些人可能喜歡的組件（如菜單，圖集，滑塊等），我們在我們的項目反復使用; 包括它們在我們框架中的樣式。

        為了輕松維護您的框架的每一部分，將它分為多個CSS文件，例如：

        reset.css
        base.css
        typography.css
        layout.css
        form.css
        table.css
        browser.css
        print.css

        上面的列表只是一個建議，你可以將你的框架分成任意數量的文件。不過，為了從你的CSS框架獲得最大利益，你必須確保：

        您已徹底測試所有的主流瀏覽器的輸出
        Litmus – 讓兼容性測試更容易的在線服務
        你已經遵循了CSS的最佳做法：
        CSS標準和最佳實踐
         CSS最佳實踐-洞察行業最佳實踐
        簡潔的代碼，合理的結構和適當的文檔
        Styleneat -在線工具，組織和規范你的CSS -選擇，子選擇器和屬性
        用最少的class和ID
        它已經過錯誤測試，并已通過W3C的CSS驗證服務驗證

        以CSS Reset, Base & Typography作為堅實的基礎
        不同的瀏覽器各種元素有不同的默認樣式（邊距，邊空，邊界，輪廓等）。reset文件刪除不一致的默認樣式，并確保所有主要的瀏覽器會使用一致的樣式渲染出你的網站。這里有兩個最流行的CSS Reset，您可能會考慮在你自己的CSS框架中使用：

        完成CSS Reset之后，下一個合乎邏輯的步驟是設置自己的Base，提供適用于所有主流瀏覽器一致的默認樣式。這可能是在一個單獨的所謂base.css文件中完成或與您Reset文件一起。這里有一些資源，協助您建立你的Base：

        文字排版（Typography）是緊隨每個具體設計的，所以包括在一個CSS框架中似乎首當其沖被認為是討厭的和不明智的想法。但有一個覆蓋了所有的基礎的文字排版文件，是一個真正的節省時間的手段。甚至在一段時間內，針對不同詳細的樣式，因不同風格的字體的需要，你可能最終不得不用更多的不同的排版文件。
        這里有一些資源和工具來幫助您入門：

        布局（Layout，Layouts） - 尋找圣杯

        布局是最棘手的，也許是一個CSS框架中最有爭議的部分。就像排版，布局隨設計千變萬化和您應該謹慎選擇是否要讓它成為你的CSS框架的一部分。你甚至可以考慮在你的框架中有一個以上布局文件的可能性。
        這里是一個可能提供進一步援助的資源清單：

        Forms & Tables - 為什么不？

        表單和表格二者均可以包括在你的base.css文件之中。不過，擁有更多的附加模板，將為您的設計能應對不同的需求增加很大的價值。
        在作出最后決定之前，先看看這些資源：

        瀏覽器特定CSS
        不幸的是，很多場合需要我們寫一些瀏覽器特定CSS workarounds。但是，CSS的hacks 或 workarounds可能會產生在CSS驗證錯誤。為了克服這個問題，你應該在你的HTML文件使用條件標記包含browser.css。
        這里有一些資源，供您參考：

        打印樣式
        一個單獨的打印樣式表將極大地改善您網站的可用性，特別是對大量的內容頁面。
        以下是一些額外的指導資源：

        你還可以做什么？
        你可以做更多的事情，這是背后即是要有你自己的CSS框架的主要思路。您可以創建許多抽象的CSS文件，只要你喜歡，如：

        component.css （組件）
        這可能包括CSS常用的成分，比如下拉菜單，工具提示等
        application.css （應用）
        這可能擁有多個版本針對您經常設計的每一個不同類型的應用程序。例如：WordPress，Drupal，BlogEngine.Net等。

        最后 - 使用自己的CSS框架
        使用你的框架就是簡單地包含所有必需的文件在你的HTML之中。但包含一些不必要的CSS文件意味著額外的HTTP請求。為了避免這種情況你應該首先將所有的文件合并（browser.css和print.css文件除外），然后包含這個新的CSS在你的項目文件中。

        為了保持本文的短小，只提供了一些有限的資源，所以請隨意尋找更好的替代品，并與我們其他人分享您的意見。
        您也可以在快速瀏覽一下：

        ——————————————————————————————
        發表于 April 1st, 2009 原作： Saud Khan
        原文網址：http://www.w3avenue.com/2009/04/01/guidelines-for-developing-your-own-css-framework/

        譯者注：這實際是一篇老文章了。但至今看起來仍然讓人興奮。主要是在于，此文章不在于讓你學會什么，而在于指導你做什么。自 OO CSS（面向對象CSS）概念產生以后，隨后的老牌的OOCSS框架，BulePrint框架面世，到現在，數10種CSS框架，讓你無法確定該選擇哪一個。
        另一方面，選擇以后，必然會有后悔。正如上文所說。所以，多數人的愿望是：自己寫一個。
        當然，能按本文寫一個象樣的CSS框架，按本文所說，初學者一樣能做到。因為，本文讓你參考的都是權威，經典，名篇。當然，另一方面，如果你真的有一定的CSS功底，那就更是水到渠成。所以，希望自己寫的，但愿你是至少讀過《精通CSS》一書的。

模版世界:http://www.templatesy.com

文章列表