標籤：開發工程師 前端開發 應該 問題 分類 表現層 ade ext 效果
如何寫出優雅的css代碼？對於同樣的項目或者是一個網頁，儘管最終每個前端開發工程師都可以實現相同的效果，但是他們所寫的代碼一定是不同的。有的優雅，看起來井井有條，清晰易懂，這樣的代碼有利於團隊合作和後期的維護；而有的混亂，雖然表達出了最終的效果，然而卻晦澀難懂，顯然團隊成員在讀這樣的代碼時就顯得無從下手，更不利於後期的維護了。那麼如何寫出優雅的代碼呢？下面我將以一個很小的項目就以下幾個方面簡單的表達一下自己的看法，如有不妥，望批評指正。
第一部分：如何整理一個項目。
當我們接手一個表白牆的小項目時，怎麼去分類整理呢？是把所有的html檔案、css檔案、js檔案和圖片等等混亂的放在一起？好吧，那就看看這樣是什麼效果吧？
可能你會覺得這沒有什麼啊？檔案都可以找到啊，但是你試圖在sublime編輯器中開啟看看是什麼效果：
有沒有覺得很混亂呢?！此外，如果項目更大了呢？你需要的html檔案、css檔案、js檔案、以及圖片的需求量更大了呢？你還能保證可以順利的找出每一個你想要的檔案並編輯嗎？顯然顯然是否定的。所以對於這種項目，我的建議是可以對不同檔案類型進行分類，將同一類型的檔案放在一個檔案夾下，再將所有檔案都放到一個檔案夾下，如所示：
這樣，在sublime text編輯器裡開啟上述檔案也會變得更加清晰明了，如下所示：
這樣，我們就可以很輕鬆的尋找、編輯、維護我們的代碼了！當然，對於不同的項目，如何架構和整理是不同的，我們應該具體問題具體分析，這裡只是說明了一般的小項目可以遵循的做法。
第二部分：如何寫出清晰易懂的HTML代碼
HTML規範，我在博文《HMTL代碼規範》中做了詳盡的介紹，大家有興趣可以去看看。這裡我們簡單回顧一下規範並以我的看法說明寫HTML代碼的一個整體思路。
1.寫HTML時，最基礎的整體結構是不可缺少的，包括<!DOCTYPE html> <html> <meta> <title> <head><body>等等。實際上這個結構在sublime編輯器中我們只要先打出！，再按一下tab鍵即可完成。
2.HMTL的代碼結構和視覺順序基本保持一致，即按照從上到下從左至右的視覺順序寫HMTL結構。我的建議是：可以先根據視覺稿，從大局著眼，將主要的幾個部分寫出來，如header部分，main部分，side部分，footer部分，即把整個結構先搭出來，然後再逐一地向內部填寫內容，而不是先把header部分寫完然後再寫main部分，把main部分全部寫完在寫side部分．．．因為前者的思路會更加清晰。
３．結構層（structural layer）、表現層（behavior layer）、行為層（presentation layer）三者分開，避免內聯，即使用script將js檔案引入（注意：瀏覽器渲染頁面是自上而下進行的，js檔案有時多在</body>前引入，有時也會在head中引入，這一部分可以看我的博文《探究移動端開發》），使用link將css檔案引入。
4.保持良好的樹形結構，即每一個區塊層級元素都另起一行，使用tab縮排（相對於父元素）。如果不是區塊層級元素，如<a><img><span>等，把他們寫在一行即可。
5. 可以在不同的部分（如header、main、footer）之間使用空行分開，而在一個模組內不要使用多餘的空行，實際上這也遵循了設計中的親密性原則。（推薦前端工程師可以看看《寫給大家看的設計書》，非常不錯）
6.在html代碼裡你覺得可能不是很好理解的地方予以注釋如：<!-- 一些注釋 -->。
第三部分：如何寫出優雅的css代碼。
如何寫出優雅的css代碼？
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
