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

資訊專欄INFORMATION COLUMN

CSS 編碼規范

AbnerMing / 556人閱讀

摘要：一書寫規范縮進使用個空格做為一個縮進層級。盡量最多控制在級以內。數值當數值為之間的小數時，省略整數部分的。長度長度為時須省略單位。二命名規范類名使用小寫字母，以中劃線分隔。采用駝峰式命名等中的變量函數混合采用駝峰式命名。

一、CSS 書寫規范 縮進

使用 4 個空格做為一個縮進層級。

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

1.選擇器與 "{" 之間要包含空格；
2.屬性名與之后的 ":" 之間不允許包含空格， ":" 與 屬性值之間要包含空格；
3.列表型屬性值書寫在單行時，"," 后要跟一個空格；
4.注釋 "/*" 后和 "*/" 前要有一個空格。

/* good */
.selector {
    margin: 0;
    font-family: Arial, sans-serif;
}

5.">、+、~ "選擇器的兩邊各保留一個空格。

main > nav {
    padding: 10px;
}

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

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

每個屬性聲明末尾都要加分號。

.element {
    width: 20px;
    height: 20px;

    background-color: red;
}
空行

1."}" 后最好跟一個空行，包括 scss、less等中嵌套的規則；
2.屬性之間需要適當的空行。

.element {
    ...
}

.dialog {
    color: red;

    &:after {
        ...
    }
}
換行

1."{" 后和 "}" 前；
2.每個屬性獨占一行；
3.多個規則的分隔符 "," 后。

.element {
    color: red;
    background-color: black;
}

.element,
.dialog {
    ...
}
引號

1.最外層統一使用雙引號；
2.url的內容要用引號；
3.屬性選擇器中的屬性值需要引號。

.element:after {
    content: "";
    background-image: url("logo.png");
}

li[data-type="single"] {
    ...
}
選擇器

1.避免出現過多的祖先選擇器，各瀏覽器會有性能差異，消耗在選擇器的時間也不盡相同。
盡量最多控制在3級以內。

/* bad */
ul.example {}
.example1 .example2 .example3 .example4 {}

/* good */
.example {}

.example1,
.example2 {}

2.非必要的情況下不要使用元素標簽名和 id 或 class 進行組合。

/* bad */
ul#example {}
div.error {}
/* good */
#example {}
.error {}
屬性書寫順序

1.同一 rule set 下的屬性在書寫時，應按功能進行分組，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相關） > Visual（視覺效果） 的順序書寫，以提高代碼的可讀性;
2.Formatting Model 相關屬性包括：position / top / right / bottom / left / float / display / overflow 等；
Box Model 相關屬性包括：border / margin / padding / width / height 等；
Typographic 相關屬性包括：font / line-height / text-align / word-wrap 等；
3.Visual 相關屬性包括：background / color / transition / list-style 等；
4.另外，如果包含 content 屬性，應放在最前面。

.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 #ffffd;

    /* typographic: font / aligns / text styles / ... */
    font-size: 14px;
    line-height: 20px;

    /* visual: colors / shadows / gradients / ... */
    background: #f5f5f5;
    color: #333;
    -webkit-transition: color 1s;
       -moz-transition: color 1s;
            transition: color 1s;
}
數值

當數值為 0 - 1 之間的小數時，省略整數部分的 0。

panel {
    opacity: .8;
}
長度

長度為 0 時須省略單位。 (也只有長度單位可省)

body {
    padding: 0 5px;
}
顏色

1.rgb 顏色值使用十六進制記號形式 #rrggbb。不要使用 rgb()；
2.帶有 alpha 的顏色信息可以使用 rgba()。使用 rgba() 時每個逗號后必須保留一個空格。

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

3.顏色值可以縮寫時，使用縮寫形式。

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

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

4.顏色值不要使用命名色值。

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

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

5.顏色值中的英文字符采用小寫。如不用小寫也需要保證同一項目內保持大小寫一致。

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

/* good */
.success {
    background-color: #ACA;
    color: #90EE90;
}
帶前綴的屬性

當使用特定廠商的帶有前綴的屬性時，通過縮進的方式，讓每個屬性的值在垂直方向對齊，這樣便于多行編輯。

/* Prefixed properties */
.selector {
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
            box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
不要使用 @import

與 標簽相比，@import 指令要慢很多，不光增加了額外的請求次數，還會導致不可預料的問題。替代辦法有以下幾種：

使用多個 元素；
通過 Scss 或 Less 類似的 CSS 預處理器將多個 CSS 文件編譯為一個文件；
通過 Rails、Jekyll 或其他系統中提供過 CSS 文件合并功能。
二、CSS 命名規范

1.類名使用小寫字母，以中劃線分隔。
2.避免過度任意的簡寫，要意義明確。.btn 代表 button，但是 .s 不能表達任何意思。
3.id采用駝峰式命名
4.scss、less等中的變量、函數、混合、placeholder采用駝峰式命名。

/* class */
.element-content {
    ...
}

/* id */
#myDialog {
    ...
}

/* 變量 */
$colorBlack: #000;

/* 函數 */
@function pxToRem($px) {
    ...
}

/* 混合 */
@mixin centerBlock {
    ...
}

/* placeholder */
%myDialog {
    ...
}

附常用類 / id 命名規范：

頁　眉：header
內　容：content
容　器：container
頁　腳：footer
版　權：copyright　
導　航：menu
主導航：mainmenu
子導航：submenu
標　志：logo
標　語：banner
標　題：title
側邊欄：sidebar
圖　標：icon
注　釋：note
搜　索：search
按　鈕：btn
登　錄：login
鏈　接：link
信息框：message

三、CSS 注釋

1.注釋可以統一用"/* */"；
2.縮進與下一行代碼保持一致；
3.可位于一個代碼行的末尾，與代碼間隔一個空格。

/* Modal header */
.modal-header {
    ...
}

/*
 * Modal header
 */
.modal-header {
    ...
}

.modal-header {
    /* 50px */
    width: 50px;

    color: red; /* color red */
}
四、編輯器配置

將你的編輯器進行設置，可以避免常見的代碼不一致和差異。
具體配置信息可查看這里

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114334.html

相關文章

  • 前端編碼規范之：樣式（scss）編碼規范

    摘要：前端編碼規范之使用規范前端編碼規范之樣式編碼規范前端編碼規范之結構規范前端編碼規范之最佳實踐前端編碼規范之編碼規范命名的原則是通俗易懂，盡量保持不重復沖突，盡量不要用。我覺得應該避免出現出現這種方式用預處理器拼接出來的名稱，會生成。 前端編碼規范之：Git使用規范 前端編碼規范之：樣式（scss）編碼規范 前端編碼規范之：HTML結構規范 前端編碼規范之：Vue最佳實踐 前端編碼規范...

    reclay 評論0 收藏0

  • 前端、HTML+CSS+JS編寫規范（終極版）

    摘要：文檔規范和文檔必須采用編碼格式文檔必須使用的標準文檔格式編寫規范和的標簽屬性類名都必須使用小寫字母和的屬性類名命名必須具有語義化代碼必須保持文檔結構清晰，必須合理的進行代碼縮進文件禁止樣式表內引用文件編寫格式，樣式代碼保持一行，多個選擇器 HTMLCSS文檔規范 HTML和CSS文檔必須采用UTF-8編碼格式； HTML文檔必須使用HTML5的標準文檔格式； HTMLCSS編寫規范...

    jsyzchen 評論0 收藏0

  • 前端、HTML+CSS+JS編寫規范（終極版）

    摘要：文檔規范和文檔必須采用編碼格式文檔必須使用的標準文檔格式編寫規范和的標簽屬性類名都必須使用小寫字母和的屬性類名命名必須具有語義化代碼必須保持文檔結構清晰，必須合理的進行代碼縮進文件禁止樣式表內引用文件編寫格式，樣式代碼保持一行，多個選擇器 HTMLCSS文檔規范 HTML和CSS文檔必須采用UTF-8編碼格式； HTML文檔必須使用HTML5的標準文檔格式； HTMLCSS編寫規范...

    _Dreams 評論0 收藏0

  • 前端、HTML+CSS+JS編寫規范（終極版）

    摘要：文檔規范和文檔必須采用編碼格式文檔必須使用的標準文檔格式編寫規范和的標簽屬性類名都必須使用小寫字母和的屬性類名命名必須具有語義化代碼必須保持文檔結構清晰，必須合理的進行代碼縮進文件禁止樣式表內引用文件編寫格式，樣式代碼保持一行，多個選擇器 HTMLCSS文檔規范 HTML和CSS文檔必須采用UTF-8編碼格式； HTML文檔必須使用HTML5的標準文檔格式； HTMLCSS編寫規范...

    Developer 評論0 收藏0

  • 編碼規范 —— 編寫靈活、穩定、高質量的 HTML 和 CSS 代碼的規范

    摘要：用兩個空格代替制表符這是唯一能保證在所有環境下獲得一致展現的方法。編輯器配置將你的編輯器按照下面的配置進行設置，以免常見的代碼不一致和差異用兩個空格代替制表符保存文件時刪除尾部的空白符設置文件編碼為在文件結尾添加一個空白行。 黃金定律 永遠遵循同一套編碼規范 - 可以是這里列出的，也可以是你自己總結的。如果發現規范中有任何錯誤，敬請指正。 HTML 語法 用兩個空格代替制表符 (ta...

    Karuru 評論0 收藏0

  • 前端代碼質量管理（一）

    導語: 隨著業務的增長和開發團隊的成員快速增加，其中很多新人來自于五湖四海各大門派，在編碼的風格和習慣中也出現各異。 通常在相互 codereview 時發現很多代碼上的問題，久而久之代碼出現了代碼難以維護的問題，甚至還會出現低級錯誤。 因此，我嘗試在前端代碼質量的管控上做了些探索，也總結了一些經驗分享給大家。 作者：鄭振波 本文大綱介紹 編碼規范 冗余文件與代碼 1. 編碼規范 在一些老項...

    yy13818512006 評論0 收藏0

發表評論

0條評論

AbnerMing

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<