国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

立即前往

CSS:編碼規(guī)范

fuchenxuan 發(fā)布于2019-08-30 12:59 / 3093人閱讀

摘要：空格強(qiáng)制選擇器與之間必須包含空格。示例長度強(qiáng)制長度為時須省略單位。示例建議顏色值中的英文字符采用小寫。示例注釋普通注釋普通注釋區(qū)塊注釋模塊命名規(guī)范命名組成命名必須由單詞，中劃線組成。設(shè)置文件編碼為。

CSS書寫格式 1.格式化代碼 1.1文件 [建議]：CSS文件使用無BOM的UTF-8編碼 1.2縮進(jìn) [強(qiáng)制]：使用 4 個空格做為一個縮進(jìn)層級，不允許使用 2 個空格或 tab 字符。

.selector {
    margin: 0;
    padding: 0;
}

1.3空格 [強(qiáng)制]：選擇器與 { 之間必須包含空格。

.selector {

}

[強(qiáng)制]：選擇器與 { 之間必須包含空格。

margin: 0;

[強(qiáng)制]：列表性屬性書在單行時，,后必須跟一個空格

font-family: Aria, sans-serif;

1.4行長度 [強(qiáng)制]：每行不得超過 120 個字符，除非單行不可分割。

[建議]： 對于超長的樣式，在樣式值的空格處或 , 后換行，建議按邏輯分組。

/* 不同屬性值按邏輯分組 */
background:
    transparent url(aVeryVeryVeryLongUrlIsPlacedHere)
    no-repeat 0 0;

/* 可重復(fù)多次的屬性，每次重復(fù)一行 */
background-image:
    url(aVeryVeryVeryLongUrlIsPlacedHere)
    url(anotherVeryVeryVeryLongUrlIsPlacedHere);

/* 類似函數(shù)的屬性值可以根據(jù)函數(shù)調(diào)用的縮進(jìn)進(jìn)行 */
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.04, rgb(88,94,124)),
    color-stop(0.52, rgb(115,123,162))
);

1.5選擇器 [強(qiáng)制]：當(dāng)一個 rule 包含多個 selector 時，每個選擇器聲明必須獨占一行。

/* good */
.post,
.page,
.comment {
    line-height: 1.5;
}

/* bad */
.post, .page, .comment {
    line-height: 1.5;
}

[強(qiáng)制]： >、+、~ 選擇器的兩邊各保留一個空格。

示例：

/* good */
main > nav {
    padding: 10px;
}

label + input {
    margin-left: 5px;
}

input:checked ~ button {
    background-color: #69C;
}

/* bad */
main>nav {
    padding: 10px;
}

label+input {
    margin-left: 5px;
}

input:checked~button {
    background-color: #69C;
}

[強(qiáng)制] 屬性選擇器中的值必須用雙引號包圍。

css
/* good */
article[character="juliet"] {
    voice-family: "Vivien Leigh", victoria, female
}

/* bad */
article[character="juliet"] {
    voice-family: "Vivien Leigh", victoria, female
}

2.選擇器與屬性縮寫 2.1選擇器 [強(qiáng)制] 如無必要，不得為 id、class 選擇器添加類型選擇器進(jìn)行限定。

解釋：在性能和維護(hù)性上，都有一定的影響。

示例：

css
/* good */
#error,
.danger-message {
    font-color: #c00;
}

/* bad */
dialog#error,
p.danger-message {
    font-color: #c00;
}

[建議] 選擇器的嵌套層級應(yīng)不大于 3 級，位置靠后的限定條件應(yīng)盡可能精確。

示例：

/* good */
#username input {}
.comment .avatar {}

/* bad */
.page .header .login #username input {}
.comment div * {}

2.2 屬性縮寫 [建議] 在可以使用縮寫的情況下，盡量使用屬性縮寫。

示例：

/* good */
.post {
    font: 12px/1.5 arial, sans-serif;
}

/* bad */
.post {
    font-family: arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
}

[建議] 使用 border / margin / padding 等縮寫時，應(yīng)注意隱含值對實際數(shù)值的影響，確實需要設(shè)置多個方向的值時才使用縮寫。

解釋：border / margin / padding 等縮寫會同時設(shè)置多個屬性的值，容易覆蓋不需要覆蓋的設(shè)定。如某些方向需要繼承其他聲明的值，則應(yīng)該分開設(shè)置。

示例：

/* centering  horizontally and highlight featured ones */
article {
    margin: 5px;
    border: 1px solid #999;
}

/* good */
.page {
    margin-right: auto;
    margin-left: auto;
}

.featured {
    border-color: #69c;
}

/* bad */
.page {
    margin: 5px auto; /* introducing redundancy */
}

.featured {
    border: 1px solid #69c; /* introducing redundancy */
}

2.3 每個規(guī)則集之間保留一個空行

/* good */
.selector1 {
  display: block;
  width: 100px;
}
.selector2 {
  padding: 10px;
  margin: 10px auto;
}

/* bad */
.selector1 {
  display: block;
  width: 100px;
}

.selector2 {
  padding: 10px;
  margin: 10px auto;
}

3.值與單位 3.1 文本 [強(qiáng)制] 文本內(nèi)容必須用雙引號包圍。

解釋：文本類型的內(nèi)容可能在選擇器、屬性值等內(nèi)容中。
示例：

/* good */
html[lang|="zh"] q:before {
    font-family: "Microsoft YaHei", sans-serif;
    content: "“";
}

html[lang|="zh"] q:after {
    font-family: "Microsoft YaHei", sans-serif;
    content: "”";
}

/* bad */
html[lang|=zh] q:before {
    font-family: "Microsoft YaHei", sans-serif;
    content: "“";
}

html[lang|=zh] q:after {
    font-family: "Microsoft YaHei", sans-serif;
    content: "”";
}

3.2 數(shù)值 [強(qiáng)制] 當(dāng)數(shù)值為 0 - 1 之間的小數(shù)時，省略整數(shù)部分的 0。

示例：

/* good */
panel {
    opacity: .8
}

/* bad */
panel {
    opacity: 0.8
}

4.3 url() [強(qiáng)制] url() 函數(shù)中的路徑不加引號。

示例：

body {
    background: url(bg.png);
}

3.3 長度 [強(qiáng)制] 長度為 0 時須省略單位。 (也只有長度單位可省)

示例：

/* good */
body {
    padding: 0 5px;
}

/* bad */
body {
    padding: 0px 5px;
}

3.4 顏色 [強(qiáng)制] RGB顏色值必須使用十六進(jìn)制記號形式 #rrggbb。不允許使用 rgb()。

/* good */
.success {
    box-shadow: 0 0 2px rgba(0, 128, 0, .3);
    border-color: #008000;
}

/* bad */
.success {
    box-shadow: 0 0 2px rgba(0,128,0,.3);
    border-color: rgb(0, 128, 0);
}

[強(qiáng)制] 顏色值可以縮寫時，必須使用縮寫形式。

示例：

/* good */
.success {
    background-color: #aca;
}

/* bad */
.success {
    background-color: #aaccaa;
}

[強(qiáng)制] 顏色值不允許使用命名色值。

示例：

/* good */
.success {
    color: #90ee90;
}

/* bad */
.success {
    color: lightgreen;
}

[建議] 顏色值中的英文字符采用小寫。如不用小寫也需要保證同一項目內(nèi)保持大小寫一致。

示例：

/* good */
.success {
    background-color: #aca;
    color: #90ee90;
}

/* good */
.success {
    background-color: #ACA;
    color: #90EE90;
}

/* bad */
.success {
    background-color: #ACA;
    color: #90ee90;
}

3.5 2D 位置 [強(qiáng)制] 必須同時給出水平和垂直方向的位置。

解釋：
2D 位置初始值為 0% 0%，但在只有一個方向的值時，另一個方向的值會被解析為 center。為避免理解上的困擾，應(yīng)同時給出兩個方向的值。background-position屬性值的定義

示例：

/* good */
body {
    background-position: center top; /* 50% 0% */
}

/* bad */
body {
    background-position: top; /* 50% 0% */
}

4.文本編排 4.1 字體族 [強(qiáng)制] font-family 屬性中的字體族名稱應(yīng)使用字體的英文 Family Name，其中如有空格，須放置在引號中。

解釋：
所謂英文 Family Name，為字體文件的一個元數(shù)據(jù)，常見名稱如下：

字體	操作系統(tǒng)	Family Name
宋體 (中易宋體)	Windows	SimSun
黑體 (中易黑體)	Windows	SimHei
微軟雅黑	Windows	Microsoft YaHei
微軟正黑	Windows	Microsoft JhengHei
華文黑體	Mac/iOS	STHeiti
冬青黑體	Mac/iOS	Hiragino Sans GB
文泉驛正黑	Linux	WenQuanYi Zen Hei
文泉驛微米黑	Linux	WenQuanYi Micro Hei

示例：

h1 {
    font-family: "Microsoft YaHei";
}

[強(qiáng)制] font-family 按「西文字體在前、中文字體在后」、「效果佳 (質(zhì)量高/更能滿足需求) 的字體在前、效果一般的字體在后」的順序編寫，最后必須指定一個通用字體族( serif / sans-serif )

解釋：
更詳細(xì)說明可參考本文。

示例：

/* Display according to platform */
.article {
    font-family: Arial, sans-serif;
}

/* Specific for most platforms */
h1 {
    font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;
}

[強(qiáng)制] font-family 不區(qū)分大小寫，但在同一個項目中，同樣的 Family Name 大小寫必須統(tǒng)一。

示例：

/* good */
body {
    font-family: Arial, sans-serif;
}

h1 {
    font-family: Arial, "Microsoft YaHei", sans-serif;
}

/* bad */
body {
    font-family: arial, sans-serif;
}

h1 {
    font-family: Arial, "Microsoft YaHei", sans-serif;
}

4.2 字號 [強(qiáng)制] 需要在 Windows 平臺顯示的中文內(nèi)容，其字號應(yīng)不小于 12px。

解釋：由于 Windows 的字體渲染機(jī)制，小于 12px 的文字顯示效果極差、難以辨認(rèn)。

4.3 字體風(fēng)格 [建議] 需要在 Windows 平臺顯示的中文內(nèi)容，不要使用除 normal 外的 font-style。其他平臺也應(yīng)慎用。

解釋：
由于中文字體沒有 italic 風(fēng)格的實現(xiàn)，所有瀏覽器下都會 fallback 到 obilique 實現(xiàn) (自動擬合為斜體)，小字號下 (特別是 Windows 下會在小字號下使用點陣字體的情況下) 顯示效果差，造成閱讀困難。

6 變換與動畫 [強(qiáng)制] 使用 transition 時應(yīng)指定 transition-property。

示例：

/* good */
.box {
    transition: color 1s, border-color 1s;
}

/* bad */
.box {
    transition: all 1s;
}

[建議] 盡可能在瀏覽器能高效實現(xiàn)的屬性上添加過渡和動畫。

解釋：
見本文，在可能的情況下應(yīng)選擇這樣四種變換：

transform: translate(npx, npx);

transform: scale(n);

transform: rotate(ndeg);

opacity: 0..1;

典型的，可以使用 translate 來代替 left 作為動畫屬性。
示例：

/* good */
.box {
    transition: transform 1s;
}
.box:hover {
    transform: translate(20px); /* move right for 20px */
}

/* bad */
.box {
    left: 0;
    transition: left 1s;
}
.box:hover {
    left: 20px; /* move right for 20px */
}

7 響應(yīng)式 [強(qiáng)制] Media Query 如果有多個逗號分隔的條件時，應(yīng)將每個條件放在多帶帶一行中。

示例：

@media
(-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
(min--moz-device-pixel-ratio: 2),    /* Older Firefox browsers (prior to Firefox 16) */
(min-resolution: 2dppx),             /* The standard way */
(min-resolution: 192dpi) {           /* dppx fallback */
    /* Retina-specific stuff here */
}

CSS注釋 普通注釋

/* 普通注釋 */

區(qū)塊注釋

/**
 * 模塊：m-detail
 * author: xxx
 * edit:   2016.5.02
 */

CSS命名規(guī)范 命名組成

命名必須由單詞，中劃線組成。例如:.info,.news-list

不推薦使用拼音來作為樣式名，尤其是縮寫的拼音、拼音與英文的混合

所有命名都使用小寫,使用中劃線 “-” 作為連接字符，而不是下劃線 “_“

命名前綴

前綴	說明	示例
g-	全局通用樣式命名	g-mod
m-	模塊命名方式	m-detail
ui-	組件命名方式	ui-selector
j-	所有用于純交互的命名，不涉及任何樣式規(guī)則。	J-switch

不允許出現(xiàn)以類似：.info, .current, .news 開頭的選擇器，比如：

.info{sRules;}
因為這樣將給我們帶來不可預(yù)知的管理麻煩以及沉重的歷史包袱。你永遠(yuǎn)也不會知道哪些樣式名已經(jīng)被用掉了，如果你是一個新人，你可能會遭遇，你每定義個樣式名，都有同名的樣式已存在，然后你只能是換樣式名或者覆蓋規(guī)則。所以我們推薦這樣寫：

.m-xxx .info{sRules;}
所有的選擇器必須是以 g-, m-, ui- 等有前綴的選擇符開頭的，意思就是說所有的規(guī)則都必須在某個相對的作用域下才生效，盡可能減少全局污染。 J- 這種級別的className完全交由JSer自定義，但是命名的規(guī)則也可以保持跟重構(gòu)一致，比如說不能使用拼音之類的

命名單詞

不以表現(xiàn)來命名，而是根據(jù)內(nèi)容來命名。比如：left, right, center, red, black這種以表現(xiàn)來定命名，不允許出現(xiàn)；

推薦使用功能和內(nèi)容相關(guān)詞匯的命名，如:

套系:package
相冊:photo-album
作品:works
攻略:raiders
普通用戶:normal-user 
達(dá)人:talent-user
攝影師:photographer
用戶昵稱:user-alias
頭像:head
地區(qū):area
關(guān)注數(shù):follow
粉絲數(shù):followers
互相注意:attention
標(biāo)簽:label
發(fā)表時間:publish-date,publish-time
標(biāo)題:title
信息:info
內(nèi)容:content
關(guān)于我:about
簡介內(nèi)容:intro-content
評論:review 
服務(wù):service
封面:cover
流行:popular
收藏:collect
查看:view
預(yù)約:reservation
促銷:sale-promotion

(待補充)

編輯器配置

將你的編輯器按照下面的配置進(jìn)行設(shè)置，以避免常見的代碼不一致和差異：

使用4個空格縮進(jìn)

使用Unix風(fēng)格換行符(LF)

保存文件時，刪除尾部的空白符。

設(shè)置文件編碼為 UTF-8。

在文件結(jié)尾添加一個空白行。

參照文檔并將這些配置信息添加到項目的 .editorconfig文件中。

// 示例
# css-creating coding style
root = true

# 為所有文件設(shè)置風(fēng)格
[*]
charset = utf-8
indent_style = space
indent_size = 4
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true

# 為 Markdown 文件保留行尾空格
[*.md]
trim_trailing_whitespace = false