CSS框架表達它

2010 2010年 5月 20 日

循環再用CSS：在看CSS框架

再騎自行車是Buzzword的，並在web開發中，這意味著沒有什麼不同。它節省能源，努力！

編寫CSS和從設計創建HTML多年，我都遵循一些最佳實踐，在節省時間和精力，我們俗稱為“重新發明輪子”的長期追求。一次又一次，我告訴自己，我必須創建一些模板，一些標準的可重複使用的CSS，我會用我今後的工作中的開箱。雖然不是完全，但我還是設法實現一些目標。

在推進，再利用CSS的，我看比我自己，在為數不多的CSS框架，通常是提供給我們，並決定把他們使用，因為這些嘗試和測試，並創建由許多經驗豐富的開發。更重要的是“避免重新發明”。

雖然退伍軍人的常識，我已經嘗試鋼筆的一些關鍵概念/最佳做法/已進入了這些框架的建立，使盡可能循環再用CSS的想法。希望這將有助於一些CSS開發只是最近登上了CSS的行列！

鍵重新CSS的循環：

使用命名約定

這是最重要的因素，在可重複使用的CSS / HTML。給予一致的名稱，頁面元素，使很少或修改頁面組件和他們的風格與再利用。按照這種說法，即使HTML5的，比其前任的重大變化而變化，是引進一些結構性的標籤，即。 <article>，的<section>，的<Header>，<aside>，<nav> 的HTML5將帶來什麼？ ]。甚至與HTML 4（或更低），它是最好的，就像在下面簡單的例子consistanly命名您的網頁的標準部分...

請記住，你的項目大多數網頁，最終具有相同的核心結構元素。確定這些共同的核心頁面元素....

  <div id="container">
    <div id="header"> ... </ DIV>
    <div id="nav"> ... </ DIV>
    <div id="sidebar"> ... </ DIV>
    <div id="footer"> ... </ DIV>
   </ DIV>

重置默認樣式（CSS的重置）：無論您使用的框架或自己寫的，你必須提供的CSS重置[ 什麼是CSS重置？ ]，因為它們減少或有時消除各種瀏覽器之間發生的視覺不一致。在簡單的話，CSS復位機制設置為零或空值的HTML元素的樣式，因此重寫他們可能帶來的任何瀏覽器的默認值。這提供了一個乾淨的石板，設置這些元素的任何默認的User-Agent無效[ CSS2.1的用戶代理樣式表默認的屬性]。所有的CSS框架的復位機制。如果你正在寫你自己的CSS重置的忠告是，如果你碰巧忘記重置鍵屬性，它可能會導致跨瀏覽器問題，是非常難以調試。記住，保持復位樣式的副本，他們拖放到你創建的每一個新項目。

 身體，DIV，DL，DT，DD，UL，OL，李，H1，H2，H3，H4，H5，H6，前，表格，字段集，輸入，選擇，textarea的，P，BLOCKQUOTE，表，TH，TD {邊框：0px;保證金：0;填充：0;}

設置默認值（基準樣式）元素：

當您設置（零或空）某些HTML元素的某些屬性的默認值，它是要運用這些元素在每一個實例的一些風格。這些默認設置可能會有所不同，按設計或根據你遵循的最佳做法。

最CSS框架，介紹了一些新的默認設置，除了重置瀏覽器默認風格。
這些默認值是無效的默認用戶代理（離剝離的CSS復位），這些都將是跨瀏覽器保持一致。

記住，基準樣式用於設置將會被用來設計樣式。例如。

  HTML字體大小：77％;字體家庭：宋體，無襯線;}
強，H1，H2，H3，H4，H5，H6 {字體重量：大膽;}

常見的HTML組件和公共類的抽象風格：

幾頁組成的大多數項目將整個網站使用常見的HTML元素，例如一些排序形式，警報和錯誤，自定義彈出窗口，燈箱等，由於這些組件再次使用，整個項目，這將是有益的提供設置預定義的樣式與這些組件相關的類，你可以自己節省了很多時間。

除了常見的HTML組件的定義可重複使用的樣式定義，我們可以排版，顏色，甚至佈局類的抽象風格有關。我傾向於使用...像Clearfix，Font08，FontGrey，AlignL，DisplayB等常見的類

 表單輸入{邊框：0px;背景：＃FFFFFF;填充：0px 10px; _padding：0px 0px;高度：26px;顏色：＃000000;線高度：30像素字體大小：1.1em;}
表單的TEXTAREA {邊框：0px;背景：＃FFFFFF顏色：＃000000;字體大小：.9 EM;線高度：1.5em;溢出：可見;}
 ，fbold {字體重量：大膽;顏色：＃CCCCCC;}
 fgrey {顏色：＃666666;}
 flightgrey {顏色：＃BBBBBB;}
 clearfix {明確：既;}
分頻器{邊界：1px固體＃647B06;邊境底：1px固體＃9CC00A;高度：0px;}
 。displayb。displayn {顯示：塊;} {顯示：無;}
 alignr {文本對齊：右}。alignc {文本對齊：中心}
 {浮動：權利;}。floatr。floatl {浮動：左;}

修復常見的瀏覽器怪癖

各種瀏覽器實現的CSS代碼和CSS規範的支持，提供不同的級別。這樣做的結果.... “瀏覽器怪癖”，我們開發人員留下來處理。尤其是，IE6的困擾的最後期限，以滿足大多數CSS編碼。好消息是經驗已經聚集了可能出現的可重複使用的修復這些問題（通常被稱為CSS的黑客）。

請記住，保持這些黑客/修復方便

  / *以下變焦：1規則是專門為IE6 + IE7的。  * /
    * HTML。clearfix
    *：第一胎+ HTML clearfix {
          變焦：1;
      }

不斷完善你的CSS

循環再用的習慣，不會來找你的一天。它有發達。因此，打算再騎自行車。牢記這一點，你可以抽象的默認樣式，排版的定義，佈局，HTML元素的樣式等嘗試超前思考。
還看你過去的項目，這將有助於確定風格，你傾向於經常使用跨項目對接洽談。它抽象。
刪除任何未使用的樣式。這種做法將繼續從你的CSS框架，一種常見的症狀稱為“腹脹” -
刪除重複性風格。
建立了一套有足夠的靈活性，移植整個項目的樣式。

在看看CSS框架

最後。如果你有啟發，並打算使用一個或多個CSS框架，繼承人是幾個流行的快速列表....

960網格系統：960網格系統是通過提供常用的尺寸，寬度960像素的基礎上，為了簡化Web開發工作流程。有三種型號：12，16和24列，它可以單獨或串聯使用。思想無關，你不能為自己創造一個輕鬆足夠，該框架提供了在打印PDF格式，可以使用，勾畫頁designs.Bet網格模板，它將使一個專業的印象，如果你攜帶時幾張你去到一個客戶端的UI需求收集。它也像煙花，閃光時，InDesign，Illustrator中時，Photoshop，Visio中，提供了一個“十起動器”，開始您的設計工作等提供了基本的網格模板，流行的設計軟件。
藍圖：藍圖提供了明顯分類的CSS文件重置，網格，表格，打印，排版，插件按鈕，標籤和精靈等，它還提供了一個單獨的包括對IE的支持。
SenCSs ：不同於上述兩種，SenCSs（讀感），不會有佈局的CSS定義。它包括字體，填充，邊距，表格，列表，標題，引用文字，表格和更多。
的BlueTrip ：它原來的聲名鵲起，它是其他人的框架，從那裡得到它的名字......像藍印花布 ，旅遊 OLI提供最好的功能組合。其功能集，包括24列格，排版樣式，ORM樣式，打印，按鈕等。
YUI的網格：給您帶來的Yahooo開發網絡，支持流體寬度750px，950px，974px（100％）的佈局以及預設固定寬度的佈局，並能夠輕鬆地自定義任意數量。正如你可以看到，它在技術上只是佈局組件。銳還提供了其他網頁元素的HTML / CSS套
YAML的（另一個多列佈局）
emastic