-
Notifications
You must be signed in to change notification settings - Fork 1
CSS Syntax Doc
寫 CSS 跟 HTML 的時候只要有用到引號的話，統一使用雙引號 " ，在寫 JavaScript 的時候則統一使用單引號 ' 。如果要用符號來把字分隔開來的話，請用 dash - ，在寫 JavaScript 的時候則使用 underscore _ 。
如果有用到需要 url 的屬性，例如 background ，請把 url 用雙引號 " 包起來，例如：
#logo {
background: url("/img/logo.png") no-repeat;
}
一個 indent 是兩格空格。
{ 前面要有一個空格， } 要獨立一行，如果要一次下很多個 id 跟 class 的話，, 前面不用空格、後面要空一格， property 跟 : 中間不要用空格， : 跟 value 之間空一格， value 跟後面的 ; 之間不要有空格，每個 property 都佔一行，以下是範例：
#logo, .content {
color: #888;
}
.nav-item {
float: left;
padding: 8px 0 10px 20px;
}
通常只有在標出 IE hack 的時候才會加註解。如果要幫某一大段 CSS 寫註解，為了知道哪裡是開頭哪裡是結束，記得開頭跟結尾都要寫，開頭、結尾跟中間的 CSS 都不需要空行，以下是範例：
// ie hack
#logo, .content {
*color: #888;
}
.nav-item {
*float: left;
*padding: 8px 0 10px 20px;
}
// end ie hack
如果只有要幫某一行寫註解，請將註解寫在那一行的後面，CSS 跟後面的註解要空一格，以下是範例：
#logo, .content {
*color: #888; // ie hack
}
有一些會用到 hex 的屬性，在使用的時候輸入的愈少愈好，例如用 #646 取代 #664466 。有寫到英文字母的話請用小寫，例如 #ababab。
能用 shorthand 的話就使用 shorthand ，也就是盡量使用 margin 跟 padding ，非必要不要使用 margin-bottom 、 padding-left 。
設定值給的愈少愈好，例如上右下左的 margin 都是 2px 的話，就這樣寫：
.title {
margin: 2px;
}
如果是上下的 padding 是 2px ，左右是 4px 的話，就這樣寫：
.title {
padding: 2px 4px;
}
如果上 padding 是 4px ， 下 padding 是 3px ，左右 padding 是 5px 的話，就這樣寫：
.title {
padding: 4px 5px 3px;
}
如果真的上右下左都不一樣的話再給四個：
.title {
padding: 4px 5px 3px 0;
}
如果其中有值是 0 的話，不要給 0px ，給 0 ：
.title {
padding: 2px 0;
}
為了讓 style 精準的下在指定的 elements 上， style 盡量下在 class 跟 id 上，盡量不要下在 tag 上，通常只有 reset 的時候才會下在 tag 上。
盡量只用一層、不要用 tag 就指定到想要指定的 element，例如：
.example {
color: #888;
}
而不要使用：
div.example {
color: #888;
}
div#example-2 {
color: #888;
}
也不要使用：
div.example .content {
color: #888;
}
因為要讓最多的瀏覽器支援，所以不要使用 :nth 或是其他普及率比較低的屬性。
目前公司統一使用 Compass 提供的 Reset（需搭配 Compass 使用）。
大東西的定位，能不用 float 就不用 float 去推，用 absolute 定位，像是常常固定位置跟可以設固定高度的 elements 這樣寫位置比較不會出錯，裡面用推開的沒有關係。
margin 比較容易出問題，所以盡量使用 padding ，margin 拿來做置中就好了，如果遇到 border 外面也需要跟旁邊的 element 做區隔的時候，就在那個 element 外面再包一層 div 或是其他 block element ，然後加 padding 在外面新加上去的 block element。
這是為了解決 IE5/6 Doubled Float-Margin Bug ，基本上都是用 Compass 的 float mixin 來一行寫完，這樣就不會忘記加上 display: inline。
用 inline-block element 來做 gallery 或是 list 的時候，如果 inline-block element 中間有空格或是換行的話，element 之間就會有空格，雖然 minify 之後就會不見，但是會造成原始檔跟 min 版本顯示的結果不一樣，所以要用 inline-block ，記得 inline-block elements 之間不能有換行或是空格，但也有比較不麻煩的方式，就是用 float 取代 inline-block。
目前公司有整理了一些 browser hack，可以到這裡看。