使用自己的CSS架構

標籤：des   style   blog   http   使用   strong   

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

不少CSS架構已經存在了一段時間，但大多數Web開發人員避免使用它們。 相反最有經驗的開發人員希望建立自己的CSS架構，提供個人化解決方案的優勢，並減少對第三方的解決方案消極方面的依賴。雖然CSS架構，目的是加快網路開發，但是開發自己的全面的CSS架構，可能需要大量時間和精力。 本文將提供指導和精心挑選的資源，以協助你完成這一心愿。  
        
        開始之前 
        首先嘗試一些流行的CSS架構或者至少去看看他們提供的檔案： 

 

• Blueprint
• Yet Another Multicolumn Layout (YAML)
• YUI Grids CSS Foundation
• 960 Grid System

        
        您可能還需要檢查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架構中使用： 
       

• Eric Meyer CSS Reset
• YUI Reset CSS

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

• Tripoli
• YUI Base CSS

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

 

• Typetester
• Typechart
• Blueprint Typography
• CSS Type Set
• EM Calculator

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

       

• In search of the One True Layout
• 6 Keys To Understanding Modern CSS-Based Layouts
• Advanced CSS Layouts: Step by Step
• Five Simple Steps to Designing Grid Systems
• Fixed Width CSS Layouts
• Perfect Multi-Column CSS Liquid Layouts
• The ‘Holy Grail’ 3 Column Liquid Layout (Pixel Widths)
• CSS Layouts: A collection of 224 Grid and CSS Layouts
• CSS Layout Generator

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

• The Form Garden – A CSS Based Collection for Web Forms
• Fancy Form Design Using CSS
• Clean and Pure CSS FORM Design
• Blueprint Form
• A CSS Styled Table
• Top 10 CSS Table Designs

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

• IE6 CSS Fixer: Starter Kit
• CSS Hacks
• Developing CSS for IE6 and 7
• Explorer Exposed!

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

• CSS Media Types Create Print-Friendly Pages
• Print Stylesheet – The Definitive Guide

        
        你還可以做什嗎？ 
        你可以做更多的事情，這是背後即是要有你自己的CSS架構的主要思路。 您可以建立許多抽象的CSS檔案，只要你喜歡，如： 
        
        component.css （組件）
        這可能包括CSS常用的成分，比如下拉式功能表，工具提示等 
        application.css （應用）
        這可能擁有多個版本針對您經常設計的每一個不同類型的應用程式。 例如：WordPress，Drupal，BlogEngine.Net等。
        
        最後 - 使用自己的CSS架構 
        使用你的架構就是簡單地包含所有必需的檔案在你的HTML之中。但包含一些不必要的CSS檔案意味著額外的HTTP請求。為了避免這種情況你應該首先將所有的檔案合并（browser.css和print.css檔案除外），然後包含這個新的CSS在你的專案檔中。  
        
        為了保持本文的短小，只提供了一些有限的資源，所以請隨意尋找更好的替代品，並與我們其他人分享您的意見。
        您也可以在快速探索一下： 
       

• Definitive List of CSS Frameworks
• List of Really Useful Tools for CSS Developers
• CSS3 Unleashed – Tips, Tricks & Techniques

        
        ——————————————————————————————
        發表於 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》一書的。