CSS你可以不寫,但這些規範必須要知道!

前端大佬發表於2019-05-07

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

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

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

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


禁止在非特殊情況下寫!important

  • CSS本身有權重設計,任意地使用!important會造成權重混亂而無法維護。

不可輕易限定寬高

  • 使用者可以自行設定自己的瀏覽器,例如Android手機可以設定顯示字型大小,寫死的高度會讓字型相互重疊。

RWD失效

  • 移動裝置的高度是無限的,寬度是有限的。

  • 請不要把寬寫死。


img請讓它自動縮放

請不要替img的容器設定寬或高,讓它根據裝置自行縮放。 請使用bootstrapimg-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+ 前端大牛共成長

相關文章