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

資訊專欄INFORMATION COLUMN

【整理】18種推薦的CSS命名和書寫規范

kgbook / 1856人閱讀

摘要:翻譯自選擇器的命名規范模塊化命名例如與布局相關的樣式以為開頭。推薦的寫法不推薦的寫法規范注釋在單列注釋中,星號與內容之間留一個半角空格。

翻譯自《CSS Naming and Writing Specification》
選擇器的命名規范1.模塊化命名

例如:

與布局相關的樣式以“g”為開頭。如“g-content”和“g-header”;

與掛鉤相關的樣式以“j”為開頭。如“j-open”和“j-request”;

與元件相關的樣式以“m”為開頭。如“m-dropMenu”和“m-slider”;

與狀態相關的樣式以“s”為開頭。如“s-current”和“s-selected”;

與工具相關的樣式以“u”為開頭。如“u-clearfix”和“u-ellipsis”。

“工具”是指與業務邏輯解耦的,能夠重用的樣式;“元件”是指自定義的可重用且可移植的基本網頁元素;“掛鉤”是指供JavaScript操縱的樣式。

以上的說明只是舉例,大家可以根據項目需求自定義開頭的字符,這樣做的目的是使CSS代碼整潔易維護。

2.選擇器皆為小寫形式

推薦的寫法:

.g-first-header
{
    line-height: 16px;
}

不推薦的寫法:

.g-FirstHeader
{
    line-height: 16px;
}
3.每個選擇器獨占一列

除最后一個選擇器外,其它每一列選擇器均以逗號結尾。若用到兄弟元素選擇器,則相關符號的左右兩端均留出一個半角空格。

推薦的寫法:

.g-first-header,
.g-second-header-1 > .g-second-header-2
{
    border: 2px solid #C3C3C3;
}

不推薦的寫法:

.g-first-header, .g-second-header-1>.g-second-header-2
{
    border: 2px solid #C3C3C3;
}
4.避開HTML標記

構建選擇器時應盡量采用語義明確的類別名稱,避開HTML標記,因為一旦HTML的結構產生更動,則與此對應的樣式也就無效了。盡量將樣式與結構分離,這樣會使得階層式樣式表在日后更易被維護。

推薦的寫法:

.g-content .g-item
{
    flex-basis: 20%;
}

不推薦的寫法:

.g-content li
{
    flex-basis: 20%;
}
5.少用ID

ID的唯一性注定了它所對應的元素的樣式就是一次性的,無法重用,一旦HTML結構發生變化,套用ID的選擇器就要隨之修改。另一個重要的原因是:ID的權重值是最高的,這可能會導致日后添加的樣式無法復寫原先的樣式。

推薦的寫法:

.g-special-content
{
    height: 100px;
    width: 300px;
}

不推薦的寫法:

#special-content
{
    height: 100px;
    width: 300px;
}
屬性的書寫規范1.按順序排列屬性

每條規則下的屬性在書寫時,應按類別進行分組,其排列順序如下:

    位置:bottom、float、display、left、position、right、top和z-index等;

    大小:height、margin、padding和width等;

    版式:color、font、letter-spacing、line-height和text-align等;

    背景:background等;

    其它:animation和transition等。

2.縮寫屬性

有些屬性是可以合在一塊的,既精簡代碼,又便于閱讀。

推薦的寫法:

.test-selector-1
{
    padding: 3px 5px;
}

不推薦的寫法:

.test-selector-1
{
    padding-top: 3px;
    padding-right: 5px;
    padding-bottom: 3px;
    padding-left: 5px;
}
3.去除小數開頭的0

推薦的寫法:

.test-selector-2
{
    font-size: .5em;
}

不推薦的寫法:

.test-selector-2
{
    font-size: 0.5em;
}
4.縮寫十六進位值

推薦的寫法:

.test-selector-3
{
    background-color: #0b0;
}

不推薦的寫法:

.test-selector-3
{
    background-color: #00bb00;
}
5.合理使用引號

對于“font-family”屬性來說,我們通常會以引號夾住帶有空格的字體名稱,而對于不具備這些特征的一般字體來說,引號存在與否并不影響頁面的顯示效果。為了保證視覺上的統一,最大程度相容各種瀏覽器,建議你在所有字體名稱的兩端均加上引號。

推薦的寫法:

.test-selector-4
{
    font-family: "Microsoft YaHei", "微軟正黑體", "5b8b4f53";
}

不推薦的寫法:

.test-selector-4
{
    font-family: "Microsoft YaHei", 微軟正黑體, 5b8b4f53;
}

個別屬性的值含有“url()”字串,開發者需要往其中傳入一個資源路徑。請注意,在低版本的Internet Explorer中,路徑中的空格有可能無法被辨識,導致資源無法被找到。為保險起見,不論路徑中是否含有空格,你傳入的路徑兩端最好都加上引號。

推薦的寫法:

.test-selector-5
{
    background-image: url(“../Images/BacPic.png”);
}

不推薦的寫法:

.test-selector-5
{
    background-image: url(../Images/BackPic.png);
}
6.避開!important

“!important”會給日后的維護帶來麻煩,使開發者難以查找樣式問題。如果在書寫時發現新樣式無法復寫舊樣式。通常有兩個原因:要么新樣式寫在了舊樣式的前面,要么新樣式對應的選擇器的權重比舊樣式的更低。針對后一種情況,只要增加新樣式選擇器的權重值就可以完全避開這個問題,無需用到“!important”。

推薦的寫法:

.test-selector-6 .test-selector-7
{
    font-size: 16px;
}

.test-selector-6 .test-selector-7 .test-selector-8
{
    font-size: 14px;
}

不推薦的寫法:

.test-selector-6 .test-selector-7
{
    font-size: 16px;
}

.test-selector-8
{
    font-size: 14px !important;
}
7.規范注釋

在單列注釋中,星號與內容之間留一個半角空格。

推薦的寫法:

/* 這是第一段注釋文字。 */

// 這是第二段注釋文字。

不推薦的寫法:

/*這里是一段注釋文字。*/

//這是第二段注釋文字。

在多列注釋中,多個星號要排成一條線。星號與內容之間同樣留一個半角空格。

推薦的寫法:

/**
 * 這里是一段注釋文字。
 * 這是第二段注釋文字。
 */

不推薦的寫法:

/**
*這里是一段注釋文字。
*這是第二段注釋文字。
*/

在文檔注釋中,除了要按照多列注釋的寫法以外,還要用標識符來說明文檔中的某一部分,標識符后的冒號右側與說明文字之間留一個半角空格。

推薦的寫法:

/**

* @name: 文件名;

* @description: 描述文字;

* @author: 張三、李四;

* @update: 2018年12月19日。

*/

不推薦的寫法:

/**

* @name:文件名;

* @description:描述文字;

* @author:張三、李四;

* @update:2018年12月19日。

*/
8.將標準屬性置于底部

有些屬性在部分瀏覽器中尚未完全標準化,每家瀏覽器開發商對這些屬性的實現效果或許并不統一,因此目前需要在開頭加入瀏覽器廠商的專有字符串。因此同一個屬性需要寫多次,但有一條需要注意:將不帶前置標記的屬性置于最下方。

推薦的寫法:

.test-selector-9
{
    opacity: 0;
    -webkit-transition: opacity 3s;
    -moz-transition: opacity 3s;
    -ms-transition: opacity 3s;
    -o-transition: opacity 3s;
    transition: opacity 3s;
}

不推薦的寫法:

.test-selector-9
{
    opacity: 0;
    -webkit-transition: opacity 3s;
    transition: opacity 3s;
    -moz-transition: opacity 3s;
    -ms-transition: opacity 3s;
    -o-transition: opacity 3s;
}
9.注意標點符號

每個屬性獨占一列。緊接樣式屬性的冒號,其后面要留一個半角空格。值以分號結尾。

推薦的寫法:

.test-selector-10
{
    opacity: .5;
}

不推薦的寫法:

.test-selector-10
{
    opacity:.5
}
10.樣式塊間留一空行

樣式選擇器及其樣式塊與周遭內容要保留一空行以避免內容過于擁擠,妨礙尋找。

推薦的寫法:

.test-selector-11
{
    opacity: 0.5;
}

.test-selector-12
{
    font-size: 16px;
}

.test-selector-13
{
    overflow: hidden;
}

不推薦的寫法:

.test-selector-11
{
    opacity: 0.5;
}
.test-selector-12
{
    font-size: 16px;
}
.test-selector-13
{
    overflow: hidden;
}
11.將過長的內容折為若干列

同一屬性的值不止一個或值過長時,以逗號分割這些值,每個逗號后添加一個空格,過長的值可以另起一列。

推薦的寫法:

.test-selector-14
{
    linear-gradient(135deg, deeppink 25%, transparent 25%) - 50px 0,
    linear-gradient(225deg, deeppink 25%, transparent 25%) - 50px 0,
    linear-gradient(315deg, deeppink 25%, transparent 25%),
    linear-gradient(45deg, deeppink 25%, transparent 25%);
}

不推薦的寫法:

.test-selector-14
{
    linear-gradient(135deg, deeppink 25%, transparent 25%) - 50px 0, linear-gradient(225deg, deeppink 25%, transparent 25%) - 50px 0, linear-gradient(315deg, deeppink 25%, transparent 25%), linear-gradient(45deg, deeppink 25%, transparent 25%);
}
12.避開CSS Hack

所謂“CSS Hack”,就是在樣式表中加入少許特殊符號,讓能夠辨識不同符號的瀏覽器在同一個元素上計算出來的樣式各不相同。出現CSS Hack的原因就在于老式的瀏覽器(諸如飽受詬病的Internet Explorer 6)對同一套樣式表的計算結果與其它瀏覽器的并不相同,這就很有可能會造成版式上的錯亂。因此在過去,我們通常要針對個別怪異的瀏覽器撰寫有針對性的CSS。如width: 300px; _width: 200px;對其它瀏覽器來說,該選擇器的寬度值應為300個像素,但IE 6能夠辨識出底線,因此它計算出的寬度就是200個像素。

13.減少使用影響性能的屬性

樣式表中不要含有過多的濾鏡表達式和repeat關鍵字等,這些屬性會降低網頁的渲染性能。若要重復背景圖片,那么原圖的寬高各不小于8px。



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

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

相關文章

  • 整理18推薦CSS命名書寫規范

    摘要:推薦的寫法不推薦的寫法注意標點符號每個屬性獨占一列。推薦的寫法不推薦的寫法將過長的內容折為若干列同一屬性的值不止一個或值過長時,以逗號分割這些值,每個逗號后添加一個空格,過長的值可以另起一列。 選擇器的命名規范 1.模塊化命名 例如: 與布局相關的樣式以g為開頭。如g-content和g-header; 與掛鉤相關的樣式以j為開頭。如j-open和j-request; 與元件相關的樣...

    MonoLog 評論0 收藏0
  • 整理18推薦CSS命名書寫規范

    摘要:推薦的寫法不推薦的寫法注意標點符號每個屬性獨占一列。推薦的寫法不推薦的寫法將過長的內容折為若干列同一屬性的值不止一個或值過長時,以逗號分割這些值,每個逗號后添加一個空格,過長的值可以另起一列。 選擇器的命名規范 1.模塊化命名 例如: 與布局相關的樣式以g為開頭。如g-content和g-header; 與掛鉤相關的樣式以j為開頭。如j-open和j-request; 與元件相關的樣...

    TwIStOy 評論0 收藏0
  • 整理18推薦CSS命名書寫規范

    摘要:推薦的寫法不推薦的寫法注意標點符號每個屬性獨占一列。推薦的寫法不推薦的寫法將過長的內容折為若干列同一屬性的值不止一個或值過長時,以逗號分割這些值,每個逗號后添加一個空格,過長的值可以另起一列。 選擇器的命名規范 1.模塊化命名 例如: 與布局相關的樣式以g為開頭。如g-content和g-header; 與掛鉤相關的樣式以j為開頭。如j-open和j-request; 與元件相關的樣...

    lily_wang 評論0 收藏0
  • 前端規范大總結

    摘要:目的為了提高工作效率,便于后臺人員添加功能及前端后期優化維護,輸出高質量的文檔,在網站建設中,使結構更加清晰,代碼簡明有序,有一個更好的前端架構。基本準則符合標準,使用具有語義的標簽,使結構表現行為分離,兼容性優良。目的:為了提高工作效率,便于后臺人員添加功能及前端后期優化維護,輸出高質量的文檔,在網站建設中,使結構更加清晰,代碼簡明有序,有一個更好的前端架構。 基本準則:符合web標準,使...

    番茄西紅柿 評論0 收藏0
  • Web前端開發規范文檔

    摘要:前端開發規范文檔規范目的使開發流程更加規范化。中的非注釋類中文字符須轉換成編碼使用,以避免編碼錯誤時亂碼顯示。文件規范文件名用英文單詞,多個單詞用駝峰命名法。書寫規范命名規范。圖片規范命名應用小寫英文數字組合,便于團隊其他成員理解。 Web前端開發規范文檔 規范目的: 使開發流程更加規范化。 通用規范: TAB鍵用兩個空格代替(WINDOWS下TAB鍵占四個空格,LINUX下TAB鍵...

    付倫 評論0 收藏0

發表評論

0條評論

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