[css 揭祕]：CSS編碼技巧

CSS編碼技巧

個人github地址：https://github.com/FannieGirl/ifannie

喜歡的給我一個星吧

儘可能減小代碼重複

1. 儘可能減小改動時須要編輯的地方
2. 當某些值相互依賴時，應該把它們的相互關係用代碼表示出來
3. 代碼易維護 VS 代碼量少
4. currentColor —— CSS有史以來第一個變量
5. inherit能夠用在任何CSS屬性中，並且它老是綁定到父元素的計算值

關於響應式網頁設計

1. 每一個媒體查詢都會增長成本
2. 媒體查詢的端點不該該由具體設備來決定

建議：

1. 使用百分比長度取代固定長度。若是實在作不到這一點，也應該嘗試使用與視口相關的單位（vw、vh、vmin 和 vmax），他們的值解析爲寬度或高度的百分比。

2. 當你須要在較大分辨率下獲得固定寬度時，使用max-width而不是width，由於它能夠適應較小的分辨率，而無需使用媒體查詢。

3. 不要忘記爲替換元素（好比img、object、video、iframe等）設置一個max-width，值爲100%。
   加入北京圖片須要完整地鋪滿一個容器，無論容器的尺寸如何變化，background-size:cover這個屬性均可以作到。可是，咱們也要時刻牢記——帶寬並非無限的，所以在移動網頁中經過CSS把一張大圖縮小顯示是不太明智的。

4. 當圖片（或其餘元素）以行列式進行佈局時，讓視口的寬度來決定列的數量。彈性盒佈局（即FlexBox）或者display:inline-block加上常規的文本折行行爲，均可以實現這一點。

5. 在使用多列文本時，指定column-width（列寬）而不是指定column-count（列數），這樣他就能夠在較小的屏幕上自動顯示爲單列布局。

6. 總的來講，咱們的思路是盡最大努力實現彈性可伸縮的佈局，並在媒體查詢的各個端點區間內指定響應的尺寸。

合理使用簡寫

1.在使用展開式屬性的寫法時，一般會遇到這樣的問題：展開式寫法並不會幫助你清空全部相關的其餘屬性，從而可能會干擾你想要達到的效果。

2. 固然，能夠把全部的展開式戶型所有設置一遍，但可能會漏掉幾個；或者，CSS工做組在將來引入更多的展開式屬性。

3. 合理使用簡寫是一種良好的防衛性編碼方式，能夠抵禦將來的風險。固然，若是咱們要明確地去覆蓋某個具體的展開式屬性並保留其餘相關樣式，那就須要用展開式屬性。

咱們應該使用預處理器嗎？

若是使用得當，在大型項目中可讓代碼更加靈活。可是預處理器也不是天衣無縫的：

1. CSS的文件體積和複雜度可能會失控
   2.調試難度增長
2. 預處理器在開發或城中引入了必定程度地延時
3. 每次抽象都必然會帶來更高的學習成本
   5.他們都有本身的bug
4. 不少受預處理器啓發的特性都已經以各類方式融入到原生的CSS中了。

建議是，在每一個項目開始時使用純CSS，只有當代碼變得開始沒法保持DRY時，才切換到預處理器方案。爲了不可能發生的「依賴」或「濫用」，在引入預處理器的問題上須要冷靜的決定，不該該在每一個項目一開始時就不懂腦筋順着慣性來。

css 揭祕的第一章 告訴你總體寫css的一些技巧。大方向的指導，這些坑我是一個一個踩過來的。有一種相見恨晚的感受，不過呢，本身不踩怎麼印象深入，吸收教訓呢。後面的章節是細節的css技巧，我非常期待，向css更高級進發，每個技巧，每一段代碼都應該去實踐，你可以深入的去理解吧！

書已到手裏，學到一個技巧，就應該記錄下來。這些都是本身走過來的路。儘管寫的很辣雞，若是你看到了，很是感謝，儘管來吐槽我吧！跪求虐

 

個人github地址：https://github.com/FannieGirl/ifannie

喜歡的給我一個星吧 

感恩你