- 「CSS 目錄夾」請放在 app/assts/stylesheets 下
- 「CSS 內用的圖片」 請放在 app/assets/stylesheets/images 下
- 「CSS 內用的 spriate 小圖」 請放在 app/assets/images 下
- 「假圖的目錄」或「網頁內放的圖」請放在 public/images 下
- 簡潔、高重用性、高維護性。
- 務必依據「功能」或「區塊位置」模組化 css 條目,讓每個模組彼此不會互相影響,大型模組須獨立成檔案。
- 須依照以下順序引用 CSS
- reset.css
- base.css
- xxx.css (xxx.css 代表不同模組檔案)
- application.css
- 使用 reset.css
- compass/reset
- Mayer 版本的 reset.css
- 禁用 @import。
請遵照有語意 (semantic) 的命名法則。
-
id 與 class 屬性命名規則
- 請全數用小寫英文、數字,儘量不要使用縮寫。
- 文字連結可使用 _ 符號,如 user_name。
- 語意分隔符號一律用 - 區隔,如 header-logo,勿使用 header_logo 命名。
- 網站單一頁面不能有同名的 id 屬性,應使用 class 屬性。
-
Tag 使用規則
- 排版請使用 div 標籤,列表才能用 table 標籤。
- 單一頁面中 h1 ~ h6 請依序使用,維持階層性,勿跳著使用。
- 只有屬於內文時,才可以使用 p 標籤。
- 欲包裹文字區塊請用 span 或 div 標籤,視需求加上 display:block; 來達到區塊效果。
- img 標籤都要用 div 包起來並限制大小。
- Logo 請先用 h1 和 a 標籤包裹文字,再用 css 移走文字、置換成圖片。
- 使用 * 或 _ 來對 IE 做特殊處理。
- 請直接加在要 hack 的 attribute 底下,方便其他人辨認。如 *margin-top:10px;
- 在 a 下 width 或 font-size 導致爆版
- 禁止使用 text-shadow 。原因是 Win7 + Chrome 在中文 + text-shadow 的情況下,會有 bug,導致瀏覽器直接當掉。