about 1 year ago

CSS開發規範

命名禁止縮寫

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

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

禁止在非特殊情況寫 !important

CSS裡面本有權重設計,這樣一來任意的使用 !important 會造成權重混亂而無法維護,最後的情況就是互相
!important來!important去

不可輕易侷限寬高

請不要忘記用戶可以設定自己的瀏覽器,例如 andorid 的手機可以設定顯示字體大小,寫死的高度會讓字體相互重疊

RWD 失效

行動裝置(手機, ipad)的高是無限,寬是有限

請不要把寬寫死

當你在桌機板把高寫死

  • 頂多就是往下掉

當你在桌機板把寬寫死

  • 手機版就破版
  • 手機版就破版
  • 手機版就破版

img 請讓他自動縮放

請不要替 img 的容器設定寬或高,請讓他依裝置縮放

請使用 bootstrap 的 img-responsive

如果你非要設定請用

width:100%;
height: auto;

假設如果要給 img border-radius 的 style

請用父元素控制行為,保持 img 只載入圖片,不有樣式

優先使用 grid 排版

請不要花一堆時間在寫 media query,定一堆 breakpoint,自己寫元件樣式,自己控制每種裝置上的容器寬度。

請使用 grid sysytem,這些都是已經成熟的框架,而且有些也已經幫你處理了瀏覽器相容問題,請不要引入了然後都不使用,都自己寫

不可直接 over write 或加料在原本框架的 class

請直接寫一個新的 class,不要覆蓋原有的設計,舉例來說

如果你真的很討厭 bootstrap container 自帶的 padding

那你可以寫一隻

.no-padding {}

在使用的情況下

<body class="container-fluid no-padding">
</body>

可以一目了然這是沒有 padding 的 container。

也請不要在以有的 class 上加料,請額外單獨寫一個

.container-fluid {
 font-size :18px
}

手機先決 如果製作 RWD網站,設計請以手機排版優先設計

設計師,設計順序,以桌面版優先,再設計手機版
前端工程師,拿到視覺圖,欲刻 HTML / CSS 時以手機版為第一優先

手機開啟網頁很吃手機效能和網路狀況
關於前端工程師開發
一開始就以Mobile為優先,
可以讓 HTML一開始載入,在不必推移下,動用最少的效能快速載入網頁
當你開始製作 Desktop 時,只會些微跑版,畫面不易跑版到無法找到的位置。

情況反過來,先作桌面版時,當手機版畫面被切掉或是跑位
你需要花更多時間去通靈,要移動多少px才能回到畫面上?

再來是Iphone 上的 retina ,會將圖片放到手機上時,自動做兩倍縮小
在一開始製作時即可發現圖片載入是否吃效能
那也當然為了讓圖片能在iphone 上有更好的體驗,會花較多工時
所以建議Mobile first

Mobile First 優點是
在 mobile 時沒有任何 media query 載進來

當偵測到 media query 時,表示效能已經提升了(因為已經不是行動裝置了)

RWD 精隨

行動裝置(手機, ipad)的高是無限,寬是有限

請不要把寬寫死

當你在桌機板把高寫死

  • 頂多就是往下掉

當你在桌機板把寬寫死

  • 手機版就破版
  • 手機版就破版
  • 手機版就破版

不可使用 html tag selector

樣式不必要讓子子孫孫都背負,請直接定義 class 的樣式就好,不需要指定 html tag。
如果我要換 html tag, 那 CSS 不就要跟著改?

層級不可以超過三層

超過表示耦合度太高,不具有彈性、可維護性

用一樣的 Element 時不要把一堆東西全部寫在裡面,請把排版相關的獨立出來

把 border-radius 做在 img 上面,請把 img 保持乾淨,
定位,例如 postition absoulate

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

請注意如果要 none 掉一些樣式,請依照使用程度決定

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

使用程度中等以下,請定義一個 class

例如 Rails 裡面的 simple form

<%= f.input :title %>

他會多帶一個 label tag 出來,如果你想關掉,請直接寫

<%= f.input :title, label: false %>

reset.css

常見的

  • a tag 不要有 underline
  • list 消除原有樣式

請在 reset.css 上定義,並且設為第一隻載入

(套用框架 bootstrap 可以在文件上統一 overwrite 掉)

有 JavaScript 行為的 class 可以為命名加入 name space

#js-project-show {}

請勿任意使用 br hr tag

br是換行,請使用在 p tag 裡面,當 p 裡面文字過多時可以使用。
hr 是快速劃線,但是快被時代淘汰了,請直接用 border 寫在 class 裡面

br 必須去思考父區塊是不是 display:block;,如果要換行,應該思考是不是下一段文字?

線條請都使用 border 去寫

← [Rails] 讓分頁用無限捲軸載入 [Rails] 用 ajax + paginate 讓留言功能更出色 →
 
comments powered by Disqus