Skip to content

xdite/css-design-rules

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 

Repository files navigation

CSS Design Rules for Rails

CSS 語法規則

目錄規則

  • 「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
  • 禁用 @import。

HTML 語法規則

請遵照有語意 (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 移走文字、置換成圖片。

Windows & IE

IE Hack 規則

  • 使用 * 或 _ 來對 IE 做特殊處理。
  • 請直接加在要 hack 的 attribute 底下,方便其他人辨認。如 *margin-top:10px;

常見 IE bug

  • 在 a 下 width 或 font-size 導致爆版

特別注意事項

  • 禁止使用 text-shadow 。原因是 Win7 + Chrome 在中文 + text-shadow 的情況下,會有 bug,導致瀏覽器直接當掉。

HTML 結構

其他 CSS 教學文件

About

css-design-rules

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published