縮進(jìn)
- 使用 4 個(gè)空格做為一個(gè)縮進(jìn)層級(jí)，不允許使用 2 個(gè)空格 或 tab 字符脐瑰。
.selector {
margin: 0;
padding: 0;
}
屬性
- 屬性定義必須另起一行省撑。
/* good */
.selector {
margin: 0;
padding: 0;
}
/* bad */
.selector { margin: 0; padding: 0; }
- 屬性選擇器中的值必須用雙引號(hào)包圍。
/* good */
input[name="juliet"] {
voice-family: "Vivien Leigh", victoria, female;
}
/* bad */
input[name='juliet'] {
voice-family: "Vivien Leigh", victoria, female;
}
- 屬性定義后必須以分號(hào)結(jié)尾悯周。
/* good */
.selector {
margin: 0;
}
/* bad */
.selector {
margin: 0
}
選擇器
- 為選擇器分組時(shí)，將單獨(dú)的選擇器單獨(dú)放在一行
/* good */
.post,
.page,
.comment {
line-height: 1.5;
}
/* bad */
.post, .page, .comment {
line-height: 1.5;
}
- 如無必要俊扭，不得為 id队橙、class 選擇器添加類型選擇器進(jìn)行限定,在性能和維護(hù)性上，都有一定的影響萨惑。
/* good */
#error,
.danger-message {
font-color: #c00;
}
/* bad */
dialog#error,
p.danger-message {
font-color: #c00;
}
- 盡量減少直接使用標(biāo)簽選擇器
/* good */
.nav{ color:#ddd; }
/* bad*/
nav{ color:#ddd; }
- 選擇器的嵌套層級(jí)應(yīng)不大于 3 級(jí)
/* good */
#username .inp{}
.comment .avatar {}
/* bad */
.page .header .login #username input {}
.comment div * {}
屬性縮寫
- 在可以使用縮寫的情況下捐康，盡量使用屬性縮寫。
使用 border / margin / padding 等縮寫時(shí)庸蔼，應(yīng)注意隱含值對(duì)實(shí)際數(shù)值的影響
/* good */
.post {
font: 12px/1.5 arial, sans-serif;
}
/* bad */
.post {
font-family: arial, sans-serif;
font-size: 12px;
line-height: 1.5;
}
- 屬性書寫順序
同一 rule set 下的屬性在書寫時(shí)解总，應(yīng)按功能進(jìn)行分組，并以 Formatting Model（布局方式姐仅、位置） > Box Model（尺寸） > Typographic（文本相關(guān)） > Visual（視覺效果） 的順序書寫花枫，以提高代碼的可讀性。
1.Formatting Model 相關(guān)屬性包括：position / top / right / bottom / left / float / display / overflow 等
2.Box Model 相關(guān)屬性包括：border / margin / padding / width / height 等
3.Typographic 相關(guān)屬性包括：font / line-height / text-align / word-wrap 等
4.Visual 相關(guān)屬性包括：background / color / transition / list-style 等
.sidebar {
/* formatting model: positioning schemes / offsets / z-indexes / display / ... */
position: absolute;
top: 50px;
left: 0;
overflow-x: hidden;
/* box model: sizes / margins / paddings / borders / ... */
width: 200px;
padding: 5px;
border: 1px solid #ddd;
/* typographic: font / aligns / text styles / ... */
font-size: 14px;
line-height: 20px;
/* visual: colors / shadows / gradients / ... */
background: #f5f5f5;
color: #333;
-webkit-transition: color 1s;
transition: color 1s;
}
文本
- 中文網(wǎng)站默認(rèn)字體微軟雅黑掏膏，英文網(wǎng)站默認(rèn)Arial,在進(jìn)行多語言版本網(wǎng)站制作時(shí)注意修改body中的字體劳翰。
/*中文*/
body{ font-family:"Microsoft YaHei"; }
/*英文*/
body{ font-family:Arial; }
- 需要在 Windows 平臺(tái)顯示的中文內(nèi)，無襯線字族不小于13px 襯線字族不小于12px馒疹。（企業(yè)站默認(rèn)13px）
- 行高
line-height 在定義文本段落時(shí)佳簸，應(yīng)盡量使用em 相對(duì)單位。
全局默認(rèn)行高1.5
注釋
代碼是由人編寫并維護(hù)的颖变。請(qǐng)確保你的代碼能夠自描述生均、注釋良好并且易于他人理解。
- 請(qǐng)?jiān)跇邮奖眍^部添加注釋腥刹，填寫開發(fā)者姓名檢索马胧，方便后期調(diào)整對(duì)號(hào)入座
/*
* author: gjx
* date: 2017-02-16
*/
- 功能區(qū)塊，頁面添加注釋
/*產(chǎn)品詳情*/
/*產(chǎn)品列表*/
/*新聞詳情*/
/*新聞列表*/
- 后期調(diào)整樣式表添加修改日期 和修改人注釋
/*fix on 2017-02-16 by gjx*/
.nav { width:200px; }
- 多人協(xié)作時(shí)衔峰，要加各自姓名注釋佩脊，且注意class命名沖突問題。
class 命名
- 避免過度任意的簡(jiǎn)寫垫卤。.btn 代表 button邻吞，但是 .s 不能表達(dá)任何意思。
- class 名稱應(yīng)當(dāng)盡可能短葫男，并且意義明確抱冷。形式以下劃線鏈接單詞，單詞應(yīng) 頁面模塊功能或位置 news_top ,news_left
- id 小駝峰 newTop
CSS樣式適度分離----
.mb10{ margin-bottom:10px;}
.pb10{ padding-bottom:10px;}
企業(yè)站常見命名可參考
wrapper 頁面外圍控制整體布局寬度
container或#content 容器,用于最外層
layout 布局
head, #header 頁頭部分
foot, #footer 頁腳部分
nav 主導(dǎo)航
sub_nav 二級(jí)導(dǎo)航
menu 菜單
sub_menu 子菜單
side_bar 側(cè)欄
main 頁面主體
tag 標(biāo)簽
msg message 提示信息
tips 小技巧
vote 投票
friendlink 友情連接
title 標(biāo)題
summary 摘要
loginbar 登錄條
search_input 搜索輸入框
hot 熱門熱點(diǎn)
search 搜索
search_output 搜索輸出和搜索結(jié)果相似
search_bar 搜索條
search_results 搜索結(jié)果
copyright 版權(quán)信息
branding 商標(biāo)
logo 網(wǎng)站LOGO標(biāo)志
siteinfo 網(wǎng)站信息
siteinfo_legal 法律聲明
siteinfo_credits 信譽(yù)
joinus 加入我們
partner 合作伙伴
service 服務(wù)
regsiter 注冊(cè)
arr/arrow 箭頭
guild 指南
sitemap 網(wǎng)站地圖
list 列表
home_page 首頁
sub_page 二級(jí)頁面子頁面
tool, toolbar 工具條
drop 下拉
dorp_menu 下拉菜單
status 狀態(tài)
scroll 滾動(dòng)
tab 標(biāo)簽頁
news 新聞
news_detail 新聞詳情
download 下載
banner 首頁banner
channel_ban 內(nèi)頁banner
