寫在前面 ,學好css,需要長期的推敲和積累 ,細節是不斷完善的,逐漸形成自己的風格 讓自己的css更加接近優雅. 下麵來總結一些我覺得比較好的css代碼風格 : 1. 一般網頁中的背景 用背景時 設置為行內樣式 style="background-image: url(img/01.jpg)"; ...
寫在前面 ,學好css,需要長期的推敲和積累 ,細節是不斷完善的,逐漸形成自己的風格 讓自己的css更加接近優雅.
下麵來總結一些我覺得比較好的css代碼風格 :
1. 一般網頁中的背景 用背景時 設置為行內樣式 style="background-image: url(img/01.jpg)";
這樣做有一點好處:圖片一般為資源 儘量寫在html中 便於後期維護 結構清晰
這樣做還有一點要註意:這裡應該使用 "background-image" 而不要偷懶 寫"background",因為行內樣式的權重比較高(1000),避免在外聯css中設置其他背景屬性設置不上;
2.左邊固定 右邊自適應
在佈局的時候，比如一些列表頁，常常左邊是一個固定大小的圖，右邊剩餘部分展示標題，
方法 有兩種
1.100%寬的div用padding-left把左邊圖片的位置留出來，div元素內容的部分就是標題，圖片絕對定位到padding-left區域，這樣就實現了左固定右自適應，（前提是box-sizing必須是border-box，否則padding加上100%寬會超出屏幕寬度），代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.container{
position: relative;
width: 50%;
margin: 0 auto;
}
.left{
width: 300px;
height: 300px;
position:absolute;
left: 0;
top: 0;
background: red;
}
.right{
box-sizing: border-box;
width: 100%;
height: 300px;
padding-left: 300px;
background: #ccc;
}
</style>
<body>
<div class="container">
<div class="left"></div>
<div class="right">
我就是左邊自適應的內容 我就是左邊自適應的內容 我就是左邊自適應的內容 我就是左邊自適應的內容 我就是左邊自適應的內容 我就是左邊自適應的內容
</div>
</div>
</body>
</html>
2.父容器width100% 左邊盒子寬度固定 左浮動 右邊盒子 overflow:hedden(原理暫不清楚) 代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container{
width: 100%;
}
.left{
float: left;
width: 300px;
height: 300px;
background: red;
}
.right{
overflow: hidden;
background: #ccc;
height: 300px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">我是左邊固定盒子</div>
<div class="right">
我就是左邊自適應的內容 我就是左邊自適應的內容 我就是 左邊自適應的內容 我就是左邊自適應的內容 我就是左邊自適應的內容 我就是左邊自適應的內容
</div>
</div>
</body>
</html>
3.元素的上下間距
佈局的時候從上往下開始寫頁面，一般都是寫下一個的元素margin-top來決定和上一個元素的間距，那麼就儘量不要又是寫margin-top又是寫margin-bottom，如果混著用，後期不好維護，比如某一塊區域需要換位置，或者是一個組件可能會被很多地方共用，混著寫的話後期在改的時候，可能會麻煩一點，這裡導致的問題可以說不痛不癢，但是不管是js還是css，註重細節並養成好的習慣，是代碼能力的一種體現。
4.字體顏色透明
有時候設計師，在配置字體顏色的時候可能用透明的百分比，來設置幾種不同的顏色，比如主色是#000，淺灰色#000 75%的透明度，這種情況下不建議web寫透明度，而是讓設計師給到對應的顏色值，因為透明色會根據背景的不同，這樣擴展性就比較差。
5.命名
命名是一個讓人最糾結的事情，先看第一種,這樣命名的更詳細可以一目瞭然的知道當前類的意思，但是長度比較長，增加代碼量。
nav-botton-float-right
第二種使用縮略命名，會使代碼更短，寫起來更快，但是不易讀。
nav-btn-fr
如果用縮略命名，可以約定文檔，有約定和熟悉成本，但是熟悉以後更高效，類的命名也會變得更規範和統一
約定 fr為 float right
6. 0.5px邊框的理解誤區
之前寫邊框的時候就發現，只要讓邊框的顏色更淡，邊框看起來就更細，所以當設計師問我為什麼邊框看起來比較粗的時候，我都告訴他們顏色調淺一點就好了，這個技巧我一直在實際使用。網上有博客說通過css3 transform的縮放scale 50%，可以實現0.5px邊框，我一直很奇怪，1px實際是物理的最小單位，怎麼可能實現0.5px，就這樣我做了個實驗，我設置了1px顏色為000的邊框（黑色）
7.rem佈局的文字大小
大家都知道瀏覽器一般不會讓文字小於12px，如果設置小於12px瀏覽器都會顯示12px， 我們在用到rem佈局的時候，元素是會根據屏幕寬度等比例縮放的，比如設計師給到750px的設計稿，如果某一個元素文字是22px，那麼當用戶的屏幕寬度是375的時候，文字會縮放為11px，實際瀏覽器就會顯示為最小12像素，那麼其他非字體元素比例仍然會縮小，這個時候字體可能和其他元素的比例就不是原設計稿的比例了，如果用戶屏幕是320px，那麼和原設計稿元素間的比例就差更多了。所以我們一定要根據自己的情況告訴設計師(也許人家就知道)，在寬是750像素的設計稿里，字體最小應該是24像素。
8.沒有必要過分的去相容低版本的IE
相容IE就是甚至浪費人力成本，比如說IE8不支持圓角，得用圖片代替，沒有沒有placeholder，得用JS來模擬。對於個人來說，技術的更新換代是大勢所趨，我們要往前看，有的是東西給你學，不要在這個地方浪費青春。
總結:
要做好css，寫好頁面，和設計師的溝通也是很重要的一個技能，因為設計師決定頁面最終要呈現的樣子，要通過項目驗收，也必須要設計師驗收通過才行。
設計師給過來一個交互效果，前端拿到，一想交互效果還可以，但是實現成本比較高，功能都做不完，不想做這麼細，然後就直接說沒時間這個做不了，設計師一想這個交互很難嗎，別人都能做，你為什麼不做，就這樣來回幾句就鬧矛盾了，鬧到產品那裡去了，最後可能交互效果還得做，時間也耽誤了。其實這個是很多前端會遇到的問題，時間壓得緊，功能可能都要延期，還來做這些交互，自然會有點抱怨，情緒一上來，把產品和設計都得罪了，最後還是要做，久而久之矛盾越來越深，溝通就越來越困難。 換個思路想問題，設計師大部分時候時間也很緊，要對產品和設計領導有所交代，前端又在催，好不容易做出來了，你這也不能實現那也不能實現，你這樣我也沒法交代啊。那麼我們換個溝通方式，比如這樣說：我們這邊時間確實有點緊，這個交互比較麻煩，比較費時間，我做是可以做，只是可能會影響項目進度，你看要不我先做簡單點，等到提測的時候有時間再加上這個交互，實在不行能不能等到上線之後，我單獨再優化一下這個地方，很快就能上線。
設計師們還是講道理的，根據web上的一些特性，設計師設計出來的一些樣式一些想法或許沒法實現，又或者實現成本太高，我們就得說服他們這個地方為什麼不能實現，因為他們不懂，所以害怕你忽悠他們（實際有時候就有人忽悠他們），所以要想說服別人，自己一定要把問題搞清楚，把知識點理清楚，不能實現的理由對設計師說清楚，並且要有理有據，同時最好網上找到相關博客或者官方解釋進行佐證。有很多矛盾和問題，就在於我們疏忽了溝通，又或者說是我們自己偷懶了，其實當自己把知識點能給外行說清楚了，這也說明是理解透了，也是對自己能力的提升。設計師辛苦設計的稿子一定要儘量達到他們的效果，也要考慮擴展性和可實現性，態度很重要，不要讓人覺得是在敷衍他們，什麼是敷衍，不解釋清楚就說不做，就是敷衍，否則碰一鼻子灰只有怪自己。技術點要搞清楚，要不解釋不清楚，別人不買單，在發現設計稿有問題的時候，耐心提醒其中一些不合適的地方，多幫別人承擔一點，前端和設計師要友好相處。
