css編碼技巧【css揭秘讀書筆記】

Miyang 發(fā)布于2019-08-30 12:59 / 3374人閱讀

摘要：最近在看揭秘，于是寫了文章來作筆記，除此以外還會補充一些自己遇到的筆試題。舉例說明以上的代碼有什么問題呢如果需要改變字號，那么同時需要調(diào)整行高。那么經(jīng)過修改后的代碼如下關(guān)于使用還是還是百分比，需要根據(jù)具體情況來決定。

最近在看《css揭秘》，于是寫了文章來作筆記，除此以外還會補充一些自己遇到的筆試題。希望大家都有所收獲。

css編碼技巧 盡量減少代碼重復(fù)

在實踐中，代碼可維護性的最大要素是盡量減少改動時要編輯的地方。
舉例說明

padding:6px 12px;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb, #58a);
border-radius: 4px;
box-shadow: 0 1px 5px gray;
color: white;
text-shadow:0 -1px 1px #335166;
font-size:20px;
line-height:30px;

以上的代碼有什么問題呢？

如果需要改變字號，那么同時需要調(diào)整行高。
【當某些值相互依賴時，應(yīng)該把它們的相互關(guān)系用代碼表達出來】

如果將父級的字號加大，則不得不修改每一處使用絕對值作為字體尺寸的樣式。

需要確定哪些效果是應(yīng)該跟著變大變小，哪些效果是保持不變的

產(chǎn)生主色調(diào)的亮色和暗色變體，其實可以使用將半透明的黑色或白色疊加在主色調(diào)上。
background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
//作者建議使用HSLA而不是RGBA來產(chǎn)生半透明的白色。因為它的字符長度更短，重復(fù)率更低。

那么經(jīng)過修改后的代碼如下：

padding: .3em .8em;
border: 1px solid rgba(0,0,0,.1);
background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
border-radius: .2em
box-shadow: 0 .05em .25em rgba(0,0,0,.5);
color: white;
text-shadow: 0 -.05em .05em rgba(0,0,0,.5);
font-size: 125%;
line-height:1.5

關(guān)于使用rem還是em還是百分比，需要根據(jù)具體情況來決定。

【插播筆試題】 Q：line-height:1.5 與line-height:150%的差別？

line-height:1.5 是根據(jù)自身元素的font-size進行計算。

line-height:150% 是根據(jù)父元素繼承而來的font-size進行計算。

Q：rem,em,px的差別

rem css3新增單位。rem為元素設(shè)定字體大小時，相對的只是HTML根元素。【IE8以下不支持】

em 相對于父元素的字體大小。

px 像素px是相對于顯示器屏幕分辨率而言的
px，em，rem的轉(zhuǎn)換工具

繼續(xù)回到css編碼技巧。

有時候，代碼易維護和代碼量少不可兼得。

例如，為元素添加一個10px寬的邊框，但左側(cè)不加邊框
border-width: 10px 10px 10px 0;
但若以后需要改動邊框的寬度，需要同時改3個地方。那么以下這種方式可能更好。
border-width: 10px;
border-left: 0;

currentColor【IE9+支持】

例如，我們想讓所有的水平分割線元素自動與文本顏色保持一致，只需要這樣寫。
hr { background: currentColor;}
border和box-shadow默認的顏色就是當前的文字顏色，也就是類似currentColor。currentColor本身就是很多顏色屬性的初始值，例如border-color、outline-color、text-shadow和box-shadow的顏色。【iOS Safari瀏覽器下(iOS8)下，currentColor有一些bug，例如偽元素hover時候，background:currentColor的背景色不會跟著變化。關(guān)于currentColor其他信息可查看張鑫旭博客，currentColor-CSS3超高校級好用CSS關(guān)鍵字。

繼承 inherit

例如，在創(chuàng)建提示框時，可能希望小箭頭能自動繼承背景和邊框的樣式。就可以這樣做。
.callout:before {

   //其他代碼
   background: inherit;
   border: inherit;

}

相信你的眼睛，而不是數(shù)字

視覺上的錯覺在任何形式的視覺設(shè)計中都普遍存在。如果希望四邊的內(nèi)邊距看起來基本一致，需要減少頂部和底部的內(nèi)邊距。

關(guān)于響應(yīng)式網(wǎng)頁設(shè)計

作者提出了一些建議，可能可以避免不必要的媒體查詢

使用百分比長度來取代固定長度，如果做不到，嘗試使用與視口相關(guān)的單位(vw,vh,vmin,vmax)，它們的值解析為視口寬度與高度的百分比。

當需要在較大分辨率得到固定寬度時，使用max-width

不要忘記為替換元素（例如img,object,video,iframe等）設(shè)置一個max-width，值為100%

假設(shè)背景圖片需要完整的鋪滿一個容器，可以使用background-size:cover。【在移動網(wǎng)頁中通過css把一張大圖縮小顯示往往不太明智】

當圖片或其他元素以行列式進行布局，讓視口的寬度來決定列的數(shù)量。可以使用彈性盒布局(Flexbox)或者display:inline-box加上文本折行行為。

在使用多列文本時，指定column-width而不是column-count，這樣可以在較小的屏幕上自動顯示為單列布局。
【盡量實現(xiàn)彈性可伸縮的布局，并在媒體查詢的各個斷點區(qū)間內(nèi)制定相應(yīng)尺寸】

合理使用縮寫

如果要明確地去覆蓋某個具體展開式屬性并保留其他相關(guān)樣式，則需要用展開式屬性。

background: url(tr.png) no-repeat top right / 2em 2em,
            url(br.png) no-repeat bottom right / 2em 2em,
            url(bl.png) no-repeat bottom left / 2em 2em;
            
//如果只為某個屬性提供一個值，那么它會擴散并應(yīng)用到列表中的每一項。
//在簡寫時，使用一個斜杠（/）作為分隔，是為了消除歧義。

background: url(tr.png) top right,
            url(br.png) bottom right,
            url(bl.png) bottom left;
background-size: 2em 2em;
background-repeat: no-repeat;

//此時，只需要在一處修改，就可以改變所有的background-size和background-repeat