CSS編碼規范
- 命名規范：
語義化標簽優先；基于功能命名、基于內容命名、基于表現命名；簡略、明了、無后患
常見命名1
.wrap or .wrapper -- 用于外側包裹
.container or .ct -- 包裹容器
.header -- 用于頭部
.body -- 頁面 body
.footer -- 頁面尾部
.aside or .sidebar -- 用于側邊欄
.content -- 和header footer 對應，用于主要內容
.navigation -- 導航元素
.pagination -- 分頁
常見命名2
.tabs > .tab -- tab 切換
.breadcrumbs -- 導航列表、面包屑
.dropdown -- 下拉菜單
.article -- 文章
.main -- 用于主體
.thumbnail -- 頭像，小圖像
.media -- 媒體資源
.panel -- 面板
.tooltip -- 鼠標放置上去的提示
.popup -- 鼠標點擊彈出的提示
常見命名3
.button、.btn -- 按鈕
.ad -- 廣告
.subnav -- 二級導航
.menu -- 菜單
.tag -- 標簽
.message或者.notice -- 提示消息
.summary -- 摘要
.logo -- logo
.search -- 搜索框
.login -- 登錄
常見命名4
.register -- 注冊
.username -- 用戶名
.password -- 密碼
.banner -- 廣告條
.copyright -- 版權
.modal或者 .dialog -- 彈窗
常見命名5
var 名字 = {
狀態: [ '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' ] }
- 書寫規范:
- 用兩個空格來代替制表符（tab） -- 這是唯一能保證在所有環境下獲得一致展現的方法。
- 為選擇器分組時，將單獨的選擇器單獨放在一行。
- 為了代碼的易讀性，在每個聲明塊的左花括號前添加一個空格。
- 聲明塊的右花括號應當單獨成行。
- 每條聲明語句的
:后應該插入一個空格。 - 為了獲得更準確的錯誤報告，每條聲明都應該獨占一行。
- 所有聲明語句都應當以分號結尾。最后一條聲明語句后面的分號是可選的，但是，如果省略這個分號，你的代碼可能更易出錯。
- 對于以逗號分隔的屬性值，每個逗號后面都應該插入一個空格（例如
, box-shadow）。 - 不要在
rgb()、rgba()、hsl()、hsla()或rect()值的內部的逗號后面插入空格。這樣利于從多個屬性值（既加逗號也加空格）中區分多個顏色值（只加逗號，不加空格）。 - 對于屬性值或顏色參數，省略小于 1 的小數前面的 0 （例如，
.5
代替0.5；-.5px代替-0.5px）。 - 十六進制值應該全部小寫，例如，
#fff。在掃描文檔時，小寫字符易于分辨，因為他們的形式更易于區分。盡量使用簡寫形式的十六進制值，例如，用#fff代替#ffffff。 - 為選擇器中的屬性添加雙引號，例如，
input[type="text"]。只有在某些情況下是可選的，但是，為了代碼的一致性，建議都加上雙引號。 - 避免為 0 值指定單位，例如，用
margin: 0;代替margin: 0px;。
- 聲明順序:
相關的屬性聲明應當歸為一組，并按照下面的順序排列：- Positioning(布局方式、位置)：
position / top / right / bottom / left / float / display / overflow等 - Box model(盒模型、尺寸)：
border / margin / padding / width / height等 - Typographic(文本相關)：
font / line-height / text-align / word-wrap等 - Visual(視覺效果)：
background / color / transition / list-style等
- Positioning(布局方式、位置)：
由于定位（positioning）可以從正常的文檔流中移除元素，并且還能覆蓋盒模型（box model）相關的樣式，因此排在首位。盒模型排在第二位，因為它決定了組件的尺寸和位置。
其他屬性只是影響組件的內部（inside）或者是不影響前兩組屬性，因此排在后面。
垂直居中有4種實現方式
- 上下padding相等實現居中
html
<body>
<div class="content">
<p>我愛學習，學習使我快樂</p>
<p>我愛學習，學習使我快樂</p>
<p>我愛學習，學習使我快樂</p>
<p>我愛學習，學習使我快樂</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相等
- 絕對定位實現居中
html
<body>
<div class="dialog">
<header>來自網頁的消息:</header>
<p>歡迎來到饑人谷~最有愛的前端學習社區~~</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;
}
絕對定位
注：當width和height屬性不固定時，可用transform: translate(-50%,-50%)代替margin-left: ; margin-right: ;
-
vertical-align:middle實現居中
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實現居中
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;
}
效果同上
實現如下效果
效果范例
代碼
