1、謹慎使用外邊距屬性
當一個元素的下邊距和一個元素的上邊距相遇，兩者中大的會被留下

2、利用盒子模型佈局
Flexbox更容易精確建立我們想要的佈局設計，瀏覽器對Flexbox的支援已經接近完美。

.container{
    display:flex;
    display:-webkit-flex;
}

3、執行CSS重置
方法：一個css重置檔案為所有的元素設定預設樣式，在所以瀏覽器產生的效果相同。
很多庫：normalize.css, minireset,ress, 不行使用庫可以使用下面簡單的css

*{
    margin:0;
    padding
 
:0;
    box-sizing:border-box;
}

4、為所有的元素使用border-box
使用了border-box，border和padding將會被包含在寬度的尺寸當中

5、圖片作為背景
利用一個div標籤並設定background屬性，而不是用img
更有利於設定圖片樣式，保持原來的尺寸或者根據比例變化，需要藉助background-size，background-position

<div></div>
.div{
    width:200px;
    height:200px;
    background:url('');
    background-position:center center;
    background-size:cover;
}
 

缺點是頁面可訪問性略有打擊，因為圖片不會被螢幕閱讀器和引擎抓取，這個問題可以被object-fit解決，但不是所有瀏覽器支援。

6、更好的table邊框
在HTML中table加邊框會有重複雙邊框，在table上加border-collapse：collapse

7、更好的註釋方法
單行註釋 /* */
多行註釋 /*———
——–*/

8、 css命名連線
css對大小寫不敏感，所以駱駝命名法不適合，很久以前下劃線不被支援，所以破折號是預設約定

 .header-top-content{} //推薦使用

9、不要重複設定css樣式
css中的許多屬性都是從DOM樹上一層中繼承下來的，層疊樣式表，不需要每級都寫

10、css動畫與變換
不要通過改變元素的寬度和高度，或者元素的top/bottom/left/right來實現動畫，
最好用transform()，他提供了更加圓滑的多讀效果，transform以及它的所有方法（translate，rotate，scale等）幾乎擁有一致的瀏覽器相容性，可以自由使用

11、不要DIY，使用庫
css社群非常龐大，不斷出現新的庫，大部分是開源的

12、保持選擇器的特指讀低
使用特指度高的選擇器將使你不斷的使用更高的去覆蓋那些原本存在的選擇器，這將最終導致 !important 效果。

13、不要使用 !important
只有在一種情景中使用 !important 是可以接受的，就是你想覆蓋那些在 HTML 中定義的行內樣式。而且書寫行內樣式也是一種非常糟糕的方式，建議停止使用
行內樣式就是直接把CSS程式碼新增到HTML的標記中，可以很簡單地對某個元素單獨定義樣式。

14、使用text-transform

h1 {text-transform:uppercase;}   //全部大寫
h2 {text-transform:capitalize;}   //每個單詞開頭大寫
h3 {text-transform:lowercase;}   //全部小寫
p {text-transform:none;}  //預設

15、Em， Rem 和 Pixel
開發者和專案都是不同的，所以不應該嚴格的規則說明什麼時候該用哪一種。下面是一些提示和良好的做法：

em - 1 em 的大小與直接父元素的字型大小有關。 通常用於媒體查詢，em 對響應式設計而言是非常棒的 ，但是 em 值轉換為 px 的比例是非常難

以計算的，要在 DOM 樹上逐級跟蹤元素。

rem - 以 元素中的 font-size 為基準， rem 將比例化頁面中的標題和段落變得很容易。保持 中預設的 font-size 並且為其它的元

素設定 rem 。

px - 畫素是最精確的控制方式，但是在 響應式設計中它並不友好，因為它不會隨螢幕大小變化而自動縮放.

有時候 em 和 rem 很省事，尤其對於響應式介面。

16、在大專案中使用前處理器
Sass, Less, PostCSS, Stylus 。前處理器是 CSS 發展的下一階段。 它們提供的功能諸如變數， CSS 函式，選擇器巢狀以

及其它一些非常酷的東西。這使得 CSS 程式碼非常易於管理，尤其在大專案中。
下面是使用了 CSS 變數和函式的 Sass 程式碼片段:
$accent-color: #2456F3; a { background-color:$accent-color;
}
a:hover {
background-color: darken($accent-color,10%);
}
使用 CSS 前處理器的唯一缺點是，它們需要編譯成真正的 CSS 程式碼

17、Autoprefixers
為各個瀏覽器新增字首，有很多工具可以自動的幫你實現這一過程，甚至可以讓你指定你需要支援的瀏覽器 ：

線上工具： Autoprefixer
文字編輯器外掛 - Sublime Text, Atom
庫 - Autoprefixer

18、在專案中使用精簡程式碼
使用精簡程式碼 . 程式碼的精簡版本會移除掉空白和重複的部分會削減檔案的大小. 但是 CSS 程式碼將會變得非常難以閱讀,所以最好總是提供一個 .min 的精簡版本和一個常規的發展版本.
有很多不同的方法去精簡 CSS 程式碼 :
線上工具 - CSS Minifier, CSS Compressor
文字編輯外掛 - Sublime Text, Atom
庫 - Minfiy , CSSO 和 CSSNano

19、Can I use
不同的瀏覽器仍然存在著很多不一致的相容性問題, 利用 caniuse 或者其它類似的服務檢測你正在使用的屬性是否被廣泛支援, 是否需要新增字首, 或者說是否會在某平臺下出現 bug .
僅僅檢測是否仍然是不夠的, 你仍然需要測試佈局是否會無緣無故的崩潰.

20、Validate
驗證 CSS 程式碼可能沒有驗證 HTML 或者 JavaScript 程式碼重要, 但是在一個 CSS 驗證器上執行你的程式碼還是有幫助的, 它會提示你是否書寫了錯誤或者比較糟糕的程式碼, 甚至會給出一些比較中肯的建議幫助你改進程式碼。