CSS編碼規(guī)范
- 命名規(guī)范：
語義化標(biāo)簽優(yōu)先泄伪；基于功能命名殴蓬、基于內(nèi)容命名、基于表現(xiàn)命名臂容；簡(jiǎn)略科雳、明了、無后患
常見命名1
.wrap or .wrapper -- 用于外側(cè)包裹
.container or .ct -- 包裹容器
.header -- 用于頭部
.body -- 頁面 body
.footer -- 頁面尾部
.aside or .sidebar -- 用于側(cè)邊欄
.content -- 和header footer 對(duì)應(yīng)，用于主要內(nèi)容
.navigation -- 導(dǎo)航元素
.pagination -- 分頁
常見命名2
.tabs > .tab -- tab 切換
.breadcrumbs -- 導(dǎo)航列表、面包屑
.dropdown -- 下拉菜單
.article -- 文章
.main -- 用于主體
.thumbnail -- 頭像，小圖像
.media -- 媒體資源
.panel -- 面板
.tooltip -- 鼠標(biāo)放置上去的提示
.popup -- 鼠標(biāo)點(diǎn)擊彈出的提示
常見命名3
.button、.btn -- 按鈕
.ad -- 廣告
.subnav -- 二級(jí)導(dǎo)航
.menu -- 菜單
.tag -- 標(biāo)簽
.message或者.notice -- 提示消息
.summary -- 摘要
.logo -- logo
.search -- 搜索框
.login -- 登錄
常見命名4
.register -- 注冊(cè)
.username -- 用戶名
.password -- 密碼
.banner -- 廣告條
.copyright -- 版權(quán)
.modal或者 .dialog -- 彈窗
常見命名5
var 名字 = {
狀態(tài): [ 'inverse', 'toggled', 'switched', 'original', 'initial', 'identified', 'disabled', 'loading', 'pending', 'syncing', 'default' ],
修飾: [ 'dark', 'light', 'shaded', 'flat', 'ghost', 'maroon', 'pale', 'intense', 'twisted', 'narrow', 'wide', 'smooth', 'separate', 'clean', 'sharp', 'aligned' ],
元素: [ 'pagination', 'modal', 'popup', 'article', 'story', 'flash', 'status', 'state', 'media', 'block', 'card', 'teaser', 'badge', 'label', 'sheet', 'poster', 'notice', 'record', 'entry', 'item', 'figure', 'square', 'module', 'bar', 'button', 'action', 'knob' ],
布局: [ 'navigation', 'wrapper', 'inner', 'header', 'footer', 'aside', 'section', 'divider', 'content', 'container', 'panel', 'pane', 'construct', 'composition', 'spacing', 'frame' ] }
- 書寫規(guī)范:
- 用兩個(gè)空格來代替制表符（tab） -- 這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法琴庵。
- 為選擇器分組時(shí)庆寺，將單獨(dú)的選擇器單獨(dú)放在一行。
- 為了代碼的易讀性撩匕，在每個(gè)聲明塊的左花括號(hào)前添加一個(gè)空格扁凛。
- 聲明塊的右花括號(hào)應(yīng)當(dāng)單獨(dú)成行。
- 每條聲明語句的
:后應(yīng)該插入一個(gè)空格洗出。 - 為了獲得更準(zhǔn)確的錯(cuò)誤報(bào)告隅茎，每條聲明都應(yīng)該獨(dú)占一行。
- 所有聲明語句都應(yīng)當(dāng)以分號(hào)結(jié)尾玻佩。最后一條聲明語句后面的分號(hào)是可選的，但是，如果省略這個(gè)分號(hào)，你的代碼可能更易出錯(cuò)。
- 對(duì)于以逗號(hào)分隔的屬性值沼头，每個(gè)逗號(hào)后面都應(yīng)該插入一個(gè)空格（例如
, box-shadow）陶因。 - 不要在
rgb()贴见、rgba()廊鸥、hsl()缘回、hsla()或rect()值的內(nèi)部的逗號(hào)后面插入空格丰滑。這樣利于從多個(gè)屬性值（既加逗號(hào)也加空格）中區(qū)分多個(gè)顏色值（只加逗號(hào)，不加空格）胃碾。 - 對(duì)于屬性值或顏色參數(shù)峦朗，省略小于 1 的小數(shù)前面的 0 （例如迄埃，
.5
代替0.5叠赦；-.5px代替-0.5px）糯累。 - 十六進(jìn)制值應(yīng)該全部小寫，例如慕的，
#fff。在掃描文檔時(shí)熔号，小寫字符易于分辨弟头，因?yàn)樗麄兊男问礁子趨^(qū)分饺窿。盡量使用簡(jiǎn)寫形式的十六進(jìn)制值，例如舵稠，用#fff代替#ffffff超升。 - 為選擇器中的屬性添加雙引號(hào)，例如哺徊，
input[type="text"]室琢。只有在某些情況下是可選的，但是落追，為了代碼的一致性盈滴，建議都加上雙引號(hào)。 - 避免為 0 值指定單位轿钠，例如巢钓，用
margin: 0;代替margin: 0px;。
- 聲明順序:
相關(guān)的屬性聲明應(yīng)當(dāng)歸為一組疗垛，并按照下面的順序排列：- Positioning(布局方式症汹、位置)：
position / top / right / bottom / left / float / display / overflow等 - Box model(盒模型、尺寸)：
border / margin / padding / width / height等 - Typographic(文本相關(guān))：
font / line-height / text-align / word-wrap等 - Visual(視覺效果)：
background / color / transition / list-style等
- Positioning(布局方式症汹、位置)：
由于定位（positioning）可以從正常的文檔流中移除元素贷腕，并且還能覆蓋盒模型（box model）相關(guān)的樣式背镇，因此排在首位。盒模型排在第二位泽裳，因?yàn)樗鼪Q定了組件的尺寸和位置瞒斩。
其他屬性只是影響組件的內(nèi)部（inside）或者是不影響前兩組屬性，因此排在后面涮总。
垂直居中有4種實(shí)現(xiàn)方式
- 上下padding相等實(shí)現(xiàn)居中
html
<body>
<div class="content">
<p>我愛學(xué)習(xí)胸囱，學(xué)習(xí)使我快樂</p>
<p>我愛學(xué)習(xí)，學(xué)習(xí)使我快樂</p>
<p>我愛學(xué)習(xí)瀑梗，學(xué)習(xí)使我快樂</p>
<p>我愛學(xué)習(xí)旺矾，學(xué)習(xí)使我快樂</p>
</div>
</body>
css
.content {
border: 1px solid red;
margin: 20px auto;
padding: 50px 0;
text-align: center;
}
.content>p {
border: 1px solid green;
}
上下padding相等
- 絕對(duì)定位實(shí)現(xiàn)居中
html
<body>
<div class="dialog">
<header>來自網(wǎng)頁的消息:</header>
<p>歡迎來到饑人谷~最有愛的前端學(xué)習(xí)社區(qū)~~</p>
</div>
</body>
css
.dialog {
position: absolute;
left: 50%;
top: 50%;
margin-left: -120px;
margin-top: -80px;
width: 240px;
height: 160px;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 0 3px #aaa;
}
.dialog>header {
padding: 10px;
background: #000;
border-radius: 9px 9px 0 0;
color: #fff;
}
.dialog>p {
padding: 20px;
}
絕對(duì)定位
注：當(dāng)width和height屬性不固定時(shí)蔑鹦，可用transform: translate(-50%,-50%)代替margin-left: ; margin-right: ;
-
vertical-align:middle實(shí)現(xiàn)居中
html
<div class="box">
</div>
css
.box {
width: 400px;
height: 200px;
border: 1px solid orange;
text-align: center;
}
.box:before {
content:"";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.box>img {
width: 180px;
vertical-align: middle;
background: #a0a0a0;
}
vertical-align
-
table-cell實(shí)現(xiàn)居中
html同上
css
.box {
width: 400px;
height: 200px;
border: 1px solid orange;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.box>img {
width: 180px;
background: #a0a0a0;
}
效果同上
實(shí)現(xiàn)如下效果
效果范例
代碼
