一、中文符號居中效果
對於動態輸出文字能夠不用在乎，某些頁面可能會有相似提示文案的地方，用英文標點符號，對於居中效果比較友好。css
二、元素的上下間距
佈局的時候從上往下開始寫頁面，通常都是寫下一個的元素margin-top來決定和上一個元素的間距，那麼就儘可能不要又是寫margin-top又是寫margin-bottom，若是混着用，後期很差維護，好比某一塊區域須要摞位置，或者是一個組件可能會被不少地方共用，混着寫的話後期在改的時候，可能會麻煩一點，這裏致使的問題能夠說不痛不癢，可是無論是js仍是css，注重細節並養成好的習慣，是代碼能力的一種體現。html
三、字體顏色透明
有時候設計師，在配置字體顏色的時候可能用透明的百分比，來設置幾種不一樣的顏色，好比主色是#000，淺灰色#000 80%的透明度，這種狀況下不建議web寫透明度，而是讓設計師給到對應的顏色值，由於透明色會根據背景的不一樣，好比如今看到的這種狀況，這樣擴展性就比較差。css3
四、命名 web
命名是一個讓人最糾結的事情，先看第一種,這樣命名的更詳細能夠一目瞭然的知道當前類的意思，可是長度比較長，增長代碼量。
eg: .nav-btn-float-right
第二種使用縮略命名，會使代碼更短，寫起來更快，可是不易讀。瀏覽器
eg: .nav-btn-fr
若是用縮略命名，能夠約定文檔，有約定和熟悉成本，可是熟悉之後更高效，類的命名也會變得更規範和統一.
五、0.5px邊框的理解誤區 架構
我以前寫邊框的時候就發現，只要讓邊框的顏色更淡，邊框看起來就更細，因此當設計師問我爲何邊框看起來比較粗的時候，我都告訴他們顏色調淺一點就行了，這個技巧我一直在實際使用。網上有博客說經過css3 transform的縮放scale 50%，能夠實現0.5px邊框，我一直很奇怪，1px實際是物理的最小單位，怎麼可能實現0.5px，就這樣我作了個實驗，我設置了1px顏色爲000的邊框（黑色）。dom
當使用scale縮放50%的時候，顏色變成了c5c5c5，可是實際仍然有1px。我用的是拾色工具會精確到像素，確實仍是1px，因此這種方式並不能實現0.5px而是顏色變淺了。還有些手機屏幕上1px是按照2px來的展現，因此這種方式可讓2px縮放爲1px，讓1px的邊框變得更淡，這種方式確實能讓邊框變細，但不能說是0.5px。 ide
六、user-select:none 函數
該屬性讓區域內容沒法被選中,能夠阻止用戶長按複製,也能夠避免用戶複製無關內容，好比下面我只但願用戶複製6655驗證碼，除了6655我都設置了user-select:none，長按其餘部分並不會出現複製按鈕，按鈕數字就能夠，而且第三幅圖的左右下標只能在6655間拖動
在爲dom綁定事件的時候，你們可能會直接綁定當前有樣式的class，這樣會由於修改或者替換class名稱，影響JS，而若是定義一個無樣式的js前綴的類 專門用來綁定事件，這樣就解除了樣式和邏輯的耦合，在讀代碼的時候，也能一會兒看出哪些元素綁定了事件的。 eg: <div class="item js-item"></div>工具
八、rem佈局的文字大小
你們都知道瀏覽器通常不會讓文字小於12px，若是設置小於12px瀏覽器都會顯示12px， 咱們在用到rem佈局的時候，元素是會根據屏幕寬度等比例縮放的，好比設計師給到750px的設計稿，若是某一個元素文字是22px，那麼當用戶的屏幕寬度是375的時候，文字會縮放爲11px，實際瀏覽器就會顯示爲最小12像素，那麼其餘非字體元素比例仍然會縮小，這個時候字體可能和其餘元素的比例就不是原設計稿的比例了，若是用戶屏幕是320px，那麼和原設計稿元素間的比例就差更多了。因此咱們必定要根據本身的狀況告訴設計師，在寬是750像素的設計稿裏，字體最小應該是多少像素。
eg: 設計稿 750px, 文字 22px
設計稿 375px, 文字 11px(12px)
九、object-fit: cover
咱們在作列表頁的時候，圖片都是固定的大小，好比是一個100px*100px的正方形圖片，可是頗有可能拿到的圖片並非正方形的，這個非正方形圖片放到正方形的img標籤裏，就會變形若是使用object-fit：cover 能夠裁剪超出比例的部分，這樣圖片看起來就不會是變形或者拉伸的了，可是這樣會致使圖片殘缺，根據圖片的不一樣，可能裁剪掉關鍵部分的內容，可是鑑於列表原本就是縮略圖，因此仍是能夠加上這個屬性的,是一個比較折中的辦法。
說到圖片拉伸的問題, 就要說說對於圖片的約定，由於無論是拉伸仍是裁剪都會致使圖片的殘疾，拉伸影響視覺，裁剪懼怕關鍵部位丟失，若是不嚴格按照約定的規範來，確定是不能兼容全部狀況的，所以在作項目的一開始就要和產品運營們約定好圖片比例，建議約定爲正方形。
十一、只在不得已時使用 !important
在一個類上定義 !important 是一種使代碼被有動覆蓋的方法，特別是當你試圖處理 media 查詢時。並且這對於移動端來講很麻煩。好比說，若是你但願在手機屏幕顯示某些內容，則必須使用另外一個 !important 類來覆蓋 .hide 類以在移動設備上顯示它。我沒有找到一個合理的藉口來使用 !important ，除非你是在重寫別人以前放錯位置的 !important 類。
十二、box-sizing的最佳實踐
在這裏主要回答三個問題：
問題一：box-sizing的值，取content-box好，仍是取border-box值好？
若是最低須要兼容IE六、7，那麼box-sizing不可以使用，只能使用W3C盒模型；
若是最低只需兼容IE8，那麼使用content-box在功能上徹底沒有問題，只是在一些彈性佈局和響應式佈局實現上，會稍微麻煩一點；而border-box雖然在這些方面表現更好，可是不能和IE8的min-width、min-height、max-width和max-height四個屬性一同使用，使用的話就要稍微注意一下；
若是最低只需兼容IE9，那麼本人以爲，全局配置取content-box更爲合適，局部配置兩者都可。緣由以下：
CSS3提供了calc函數（IE9+），使得W3C盒模型有了強有力的助攻，在彈性佈局和響應式佈局的表現，與IE盒模型無異；
默認優於配置原則：我我的認爲，「默認優於配置」，特別是在reset.css這種架構級、平臺級的配置文件，要儘可能避免對將來可能引入的模塊有侵入性。譬如，咱們在一個項目中時常須要引入第三方組件，若是這個組件沒有強聲明box-sizing,那麼其默認使用的就是W3C標準盒模型，若是在全局的reset.css中設置box-sizing的值爲border-box以選用IE盒模型，那麼就會影響到這一類默認基於W3C盒模型的第三方組件的樣式。這裏也給咱們提了一個醒，在封裝組件時，記得強聲明box-sizing，哪怕你使用默認的content-box。
總之，大部分場景兩者能夠互換，只是使用理念不同。小部分場景border-box更具優點，但隨着calc函數的支持，這種優點已經再也不，相反content-box是默認值的優點越發明顯。
我我的建議是：全局使用默認W3C盒模型（你的CSS代碼最低可以兼容IE6/7，在IE8也能夠和min-和max-一塊兒使用），局部場景兩者都可（僅把IE盒模型看成是一種佈局技巧來使用）。你喜歡全局使用IE盒模型也是能夠的，只要確認項目只須要兼容到IE8，即使有可能影響到引入的第三方組件，也是有辦法處理的。
問題二：若是想要全局使用IE盒模型，那麼在reset.css中，該怎樣設置box-sizing？
這裏提供一個參考：
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
這樣設置的好處有：
子元素的盒模型類型，默認由父元素決定，方便組件統一設置；
支持低版本的瀏覽器：Safari (< 5.1), Chrome (< 10), and Firefox (< 29);
問題三：Bootstrap3開始，全局使用IE盒模型（box-sizing取border-box），又是基於怎樣的考慮？怎麼協調好與基於標準盒模型開發的第三方組件的關係？
衆所周知，BS2還考慮對IE7的兼容，而BS3完全放棄了對IE7的兼容，並將box-sizing設置爲border-box。
知識點
正則小專場：
\d 匹配任何十進制數，至關於[0-9]
\D 匹配任何非數字字符，至關於[^0-9]
\s 匹配任何空白字符，至關於[\t\n\r\f\v]
\S 匹配任何非空白字符，至關於[^\t\n\r\f\v]
\w 匹配任何字母數字字符，至關於[a-zA-Z0-9_]
\W 匹配任何非字母數字字符，至關於[^a-zA-Z0-9_]
-------------------------------------------------------------------------------------------------------------
兼容性的漸變背景效果
相關代碼以下：
.gradient{
width:300px;
height:150px;
filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8*/
background:red; /* 一些不支持背景漸變的瀏覽器 */
background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));
background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
}
<div class="gradient"></div>