css 揭秘 CSS編碼技巧

喜歡的給我乙個星吧

儘量減少改動時需要編輯的地方

當某些值相互依賴時，應該把它們的相互關係用**表示出來

**易維護 vs **量少

currentcolor —— css有史以來第乙個變數

inherit可以用在任何css屬性中，而且它總是繫結到父元素的計算值

每個**查詢都會增加成本

**查詢的端點不應該由具體裝置來決定

建議：使用百分比長度取代固定長度。如果實在做不到這一點，也應該嘗試使用與視口相關的單位（vw、vh、vmin 和 vmax），他們的值解析為寬度或高度的百分比。

當你需要在較大解析度下得到固定寬度時，使用max-width而不是width，因為它可以適應較小的解析度，而無需使用**查詢。

不要忘記為替換元素（比如img、object、video、iframe等）設定乙個max-width，值為100%。

加入北京需要完整地鋪滿乙個容器，不管容器的尺寸如何變化，background-size:cover這個屬性都可以做到。但是，我們也要時刻牢記——頻寬並不是無限的，因此在移動網頁中通過css把一張大圖縮小顯示是不太明智的。

當（或其他元素）以行列式進行布局時，讓視口的寬度來決定列的數量。彈性盒布局（即flexbox）或者display:inline-block加上常規的文字折行行為，都可以實現這一點。

在使用多列文字時，指定column-width（列寬）而不是指定column-count（列數），這樣他就可以在較小的螢幕上自動顯示為單列布局。

總的來說，我們的思路是盡最大努力實現彈性可伸縮的布局，並在**查詢的各個端點區間內指定響應的尺寸。

當然，可以把所有的展開式戶型全部設定一遍，但可能會漏掉幾個；或者，css工作組在未來引入更多的展開式屬性。

合理使用簡寫是一種良好的防衛性編碼方式，可以抵禦未來的風險。當然，如果我們要明確地去覆蓋某個具體的展開式屬性並保留其他相關樣式，那就需要用展開式屬性。

如果使用得當，在大型專案中可以讓**更加靈活。但是預處理器也不是完美無缺的：

css的檔案體積和複雜度可能會失控

2.除錯難度增加

預處理器在開發或城中引入了一定程度地延時

每次抽象都必然會帶來更高的學習成本

5.他們都有自己的bug

很多受預處理器啟發的特性都已經以各種方式融入到原生的css中了。

建議是，在每個專案開始時使用純css，只有當**變得開始無法保持dry時，才切換到預處理器方案。為了避免可能發生的「依賴」或「濫用」，在引入預處理器的問題上需要冷靜的決定，不應該在每個專案一開始時就不懂腦筋順著慣性來。

css 揭秘的第一章告訴你整體寫css的一些技巧。大方向的指導，這些坑我是乙個乙個踩過來的。有一種相見恨晚的感覺，不過呢，自己不踩怎麼印象深刻，吸取教訓呢。後面的章節是細節的css技巧，我很是期待，向css更高階進發，每乙個技巧，每一段**都應該去實踐，你能夠深刻的去理解吧！

書已到手裡，學到乙個技巧，就應該記錄下來。這些都是自己走過來的路。儘管寫的很辣雞，如果你看到了，非常感謝，儘管來吐槽我吧！跪求虐

喜歡的給我乙個星吧

感恩你