Nic Lin's Blog

喜歡在地上打滾的 Rails Developer

CSS 團隊協作規範

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 去寫

comments powered by Disqus