CSS你能夠不寫，但這些規範必需要知道！

前端技術棧的日益豐富，各位媛兄更多的是把技術專一點放在了JavaScript與框架上，對CSS有深刻探究的少之又少，不知作別的公司什麼樣，咱們部門關於寫HTML+CSS的，直接就會丟給公司的實習生來完成，寫的說不上好，但也不算差，沒有什麼亮點，並且CSS寫的也不是那麼規範，很不利於後期的維護與修改，今天咱們就來聊一聊CSS代碼上的一些規範，你能夠不親自去寫CSS，可是在指導新人的時候還能裝一把大牛不是。

對樣式命名的時候不要縮寫

• 精簡扼要地對class命名，請勿使用自定義縮寫。

• class name的命名必須是行爲、有語意的。

---

禁止在非特殊狀況下寫！important

• CSS自己有權重設計，任意地使用!important會形成權重混亂而沒法維護。

---

不可輕易限定寬高

• 用戶能夠自行設定本身的瀏覽器，例如Android手機能夠設定顯示字體大小，寫死的高度會讓字體相互重疊。

---

RWD失效

• 移動設備的高度是無限的，寬度是有限的。

• 請不要把寬寫死。

---

img請讓它自動縮放

請不要替img的容器設定寬或高，讓它根據設備自行縮放。 請使用bootstrap的img-responsive。 若是確實要用：

width: 100%;
  height: auto;
複製代碼

若是要給img border-radius設定樣式，請使用父元素控制行爲，保持img只載入圖片，沒有樣式。

---

優先使用grid排版

• 請不要花不少時間在寫media query，設定一堆breakpoint，本身寫組件樣式，本身控制每種設備上的容器寬度。

• 請使用grid system，這些都是已經成熟的框架，並且有些也已經幫你處理了瀏覽器相容問題。

---

不可直接over write或在本來框架的class增長內容

• 直接寫一個新的class，不要覆蓋原有的設計。

• 不要再已有的class上添加樣式，請額外單獨寫一個。

---

設計RWD網站，請遵循移動設備優先原則

• 設計師的設計順序，以桌面版優先，再設計手機版。

• 前端工程師拿到視覺圖，開始寫HTML/CSS時以手機版爲第一優先。

• 手機開啓網頁很吃手機效能和網絡情況，前端工程師一開始就以手機版爲優先，可讓HTML一開始載入，使用最少的效能快速載入網頁。當開始製做桌面版時，只會少量跑版，作適當微調便可。

• 相反，若是先製做桌面版，當手機版畫面被切掉或是跑版，須要花更多時間去調整。

• 再來是iPhone手機的retina，會將圖片放到手機上時自動作兩倍縮小，在一開始製做時便可發現圖片載入是否吃效能。爲了讓圖片能在iPhone上有更好的體驗，建議移動版優先。

---

不可以使用html tag selector

• 請直接定義class的樣式，不須要指定html tag。

---

層級不能夠超過三層

• 超過三層表示耦合度過高，不具備彈性、可維護性。

---

用同樣的element時不要把一堆東西所有寫在裏面，請把排版相關的獨立出來

• 把border-radius寫在img上面，請把img保持乾淨。定位，例如position: absolute;

---

不要隨意none掉畫面上的tag或行爲

• 請注意若是要none掉一些樣式，請依照使用程度決定。

• 使用程度遍及整個網站，請直接使用reset.css

• 使用程度中等如下，請定義一個class

---

reset.css

• 常見的a tag不要有underline

• list消除原有樣式

• 請在reset.css上定義，而且設爲第一載入次序

---

有JavaScript行爲的class能夠爲命名加入name space

#js-project-show {}
複製代碼

---

請勿任意使用br hr tag

• br是換行，請使用在p tag裏面，當p裏面文字過多時可使用。
• hr是快速劃線，可是即將被淘汰，請直接使用border寫在class裏面。
• br必須去思考父區塊是否是display: block;，若是要換行，應該思考是否是下一段文字。
• 線條請都是用border去寫。

---

關注更多高質量精彩技術文章，請關注公衆號：前端社

專業的前端開發者社區，天天推送一篇高質量技術文章，與 20000+ 前端大牛共成長