使用本身的CSS框架（轉）

時間 2019-11-10

標籤使用本身 css 框架欄目 CSS 简体版

原文原文鏈接

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

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

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

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

        爲何要創建本身的CSS框架？
        在現代的網頁設計中CSS起着相當重要的做用，它是真的不是很難學。沒有理由不去尋求一個捷徑完成這個彷佛一勞永逸的事情。

        這裏有一些具體緣由/優勢：

        更有成效：
        您將可以使用本身更有效的框架。

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

        更少的頭痛的事：
        你會不會繼承錯誤或由其餘人建立的缺陷。固然，你本身的CSS框架可能有錯誤或缺陷，但你會更好地解決這些問題。

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

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

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

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

        爲了輕鬆維護您的框架的每一部分，將它分爲多個CSS文件，例如：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驗證服務驗證html

        以CSS Reset, Base & Typography做爲堅實的基礎
        不一樣的瀏覽器各類元素有不一樣的默認樣式（邊距，邊空，邊界，輪廓等）。reset文件刪除不一致的默認樣式，並確保全部主要的瀏覽器會使用一致的樣式渲染出你的網站。這裏有兩個最流行的CSS Reset，您可能會考慮在你本身的CSS框架中使用：
       css3

        完成CSS Reset以後，下一個合乎邏輯的步驟是設置本身的Base，提供適用於全部主流瀏覽器一致的默認樣式。這多是在一個單獨的所謂base.css文件中完成或與您Reset文件一塊兒。這裏有一些資源，協助您創建你的Base：
       web

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

        佈局（Layout，Layouts） - 尋找聖盃

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

        Forms & Tables - 爲何不？

        表單和表格兩者都可以包括在你的base.css文件之中。不過，擁有更多的附加模板，將爲您的設計能應對不一樣的需求增長很大的價值。
        在做出最後決定以前，先看看這些資源：
       app

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

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

        你還能夠作什麼？
        你能夠作更多的事情，這是背後便是要有你本身的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