70個專家的CSS編碼經驗談一：CSS編碼流程

1、 CSS編碼的(準備工做)流程

關鍵詞(Keyword)：CSS,CSS工做流程,CSS經驗

原文爲：" 70 Expert Ideas For Better CSS Coding "

CSS並非一直都那麼容易處理的。CSS徹底依賴於你的使用技巧和經驗，尤爲是當你沒法肯定哪些樣式選擇器已經應用到你的文檔元素時，CSS編碼就會變成一個噩夢。其實，一種下降代碼複雜性的簡單方法，就是使用不太經常使用的CSS屬性來建立適用性比較強且語義正確的標記。

咱們將在如下內容中列出，專家已經使用過的最有用的CSS技巧、小提示、觀點、方法、技術和解決方案。這裏還將包括一些你在平常的項目開發中常常用到的，可是你須要的時候又比較難以找到的一些基本技巧。

這裏所列出來的是超過70個專家在CSS方面的觀點，能夠改善你的CSS編碼效率。若是你願意，能夠(點擊)查閱每段結尾提到的參考資料或相關文章列表。

英文原文感謝的言辭這裏省略，Jackson在這裏仍是很是感謝這些共享經驗的專家們。

1.1 工做流程：起步階段

當你迎來了一個設計, 應該從一個空白內容頁開始。
「（這個空白內容頁應該）包括你的頁頭、導航條、內容示例和頁腳。而後開始添加你的HTML標記, 最後添加你的CSS樣式,這樣工做起來會更好更合理。」 [CSSing]
Jackson的ps:：這是開始頁面創建的初始流程，就不用多解釋了。

使用一個主樣式表。
「我看到一個很是常見的錯誤在於，不少初學者和中級學者在使用CSS樣式表的時候, 沒有將瀏覽器默認的樣式去掉。這將致使你的設計在不一樣的瀏覽器中會出現不一致的效果。

並最終致使設計師們埋怨瀏覽器（的兼容性）。這是個錯誤的埋怨。所以，當你對一個網站作任何編輯工做以前，你應該重置（主）樣式表。」（你能夠到如下做者博客查看重設方法） [Master Stylesheet: The Most Useful CSS Technique(主樣式表: 最有用的CSS技術)], [Ryan Parr] 圖1CSS主樣式表技巧示例

Jackson的ps：這個技巧不少朋友確定會忘記設置，你會發現當你沒有作重設，會導致你的CSS代碼特別是須要精確到像素的屬性值在各個瀏覽器中失效，而後出現位置不精確的問題。咱們真得多多注意！並且在原文中Ryan Parr還提到咱們須要將一些排版的規則整理成全局的類樣式，這樣就能夠重複使用而不須要處處定義，仍是看看原文吧。

圖1CSS主樣式表技巧示例 

務必重置你的CSS樣式
你能夠經過設置某個屬性的默認值來忽略該屬性須要指定的屬性值。有些人喜歡經過 Global white space reset全局（樣式）重設，在樣式表的開頭將全部（頁面標籤）元素的margin和padding屬性值都清零。（你能夠到如下做者博客查看重設方法）[Roger Johansson]

Jackson的ps：若是你想佈局DIV的能夠緊貼住瀏覽器呈現出來，這條技巧很是有用。

保存（收藏）一些有用的CSS類庫
這很是有利於(頁面樣式的)調試，可是應該避免在發佈版本中使用(區分開標籤和語義描述)。你如今可以使用多個類名了(就象這樣 <p class="floatLeft alignLeft width75">...</p>)，所以你能夠利用它們來調試你的(頁面)標籤。（你能夠到如下做者博客查看相關內容出處）[Richard K. Miller] 圖2CSS類庫表示例

Jackson的ps：這條技巧的意思是，咱們可使用一些有佈局語義的類名獨立命名每個屬性，當你調用的時候能夠將這些有語義的類名重複使用。

圖2CSS類庫表示例

(如下爲更多的參考文章)Eric Meyer's Global Reset(Eric Meyer寫的全局重置)，Christian Montoya's initial CSS file(Christian Montoya寫的初始化CSS文件)，Mike Rundle's initial CSS file(Mike Rundle寫的初始化CSS文件)，Ping Mag's initial CSS file(Ping Mag寫的初始化CSS文件)。

Jackson儘可能翻譯得與原來意思一致，基本上我都會從專家原文去揣摩一些原文的意思，再結合原文的代碼和本身的經驗翻譯出來的。確定會有錯漏的地方，但願各位朋友指正，讓你們共同進步，謝謝！下次將介紹，70個專家的CSS編碼經驗談二：(如何)組織好你的CSS代碼。

本文轉載自OECP社區http://www.oecp.cn/hi/jackson/blog/316