前端編碼規範（4）－ CSS 和Sass (SCSS) 開發規範

作者：Eve Cole 更新時間：2025-01-06 10:44:28

ID and class naming

ID和class(類別)名稱總是使用可以反應元素目的和用途的名稱，或其他通用名稱。代替表象和晦澀難懂的名稱。

應該首選具體和反映元素目的的名稱，因為這些是最可以理解的，而且變化的可能性最小。

通用名稱只是多個元素的備用名，他們兄弟元素之間是一樣的，沒有特別意義。
區分他們，使他們具有特殊意義，通常需要為「幫手」。

儘管class(類別)名稱和ID 的語意化對於電腦解析來說沒有什麼實際的意義，
語意化的名稱通常是正確的選擇，因為它們所代表的訊息意義，不包含表現的限制。

不推薦

.fw-800 {
font-weight: 800;
}

.red {
color: red;
}

推薦

.heavy {
font-weight: 800;
}

.important {
color: red;
}

合理的避免使用ID

一般情況下ID不應該被套用於樣式。
ID的樣式不能重複使用且每個頁面中你只能使用一次ID。
使用ID唯一有效的是確定網頁或整個網站中的位置。
儘管如此，你應該始終考慮使用class，而不是id，除非只使用一次。

不推薦

#content .title {
font-size: 2em;
}

推薦

.content .title {
font-size: 2em;
}

另一個反對使用ID的觀點是含有ID選擇器權重很高。
一個只包含一個ID選擇器權重高於包含1000個class(類別)名稱的選擇器，這使得它很奇怪。

 // 這個選擇器權重高於下面的選擇器#content .title {
color: red;
}

// than this selector!
html body div.content.news-content .title.content-title.important {
color: blue;
}

CSS選擇器中避免標籤名

當建構選擇器時應該使用清晰，準確和有語義的class(類別)名稱。不要使用標籤選擇器。如果你只關心你的class(類別)名，而不是你的程式碼元素，這樣會比較容易維護。

從分離的角度考慮,在表現層中不應該分配html標記/語義。
它可能是一個有序列表需要被改成一個無序列表，或者一個div將被轉換成article。
如果你只使用具有實際意義的class(類別)名，
而且不使用元素選擇器，那麼你只需要改變你的html標記，而不用改變你的CSS。

不推薦

div.content > header.content-header > h2.title {
font-size: 2em;
}

推薦

.content > .content-header > .title {
font-size: 2em;
}

盡可能的精確

很多前端開發人員寫選擇器鏈的時候不使用直接子選擇器（註：直接子選擇器和後代選擇器的差別）。
有時，這可能會導致疼痛的設計問題並且有時可能會很耗性能。
然而，在任何情況下，這是一個非常不好的做法。
如果你不寫很通用的，需要配對到DOM末端的選擇器，你應該總是考慮直接子選擇器。

考慮下面的DOM:

 <article class="content news-content">
<span class="title">News event</span>
<div class="content-body">
<div class="title content-title">
Check this out
</div>

<p>This is a news article content</p>

<div class="teaser">
<div class="title">Buy this</div>
<div class="teaser-content">Yey!</div>
</div>
</div>
</article>

下面的CSS將會套用於有title類別的全部三個元素。
然後，要解決content類別下的title類別和teaser類別下的title類別下不同的樣式，這將需要更精確的選擇器再次重寫他們的樣式。

不推薦

.content .title {
font-size: 2rem;
}

推薦

.content > .title {
font-size: 2rem;
}

.content > .content-body > .title {
font-size: 1.5rem;
}

.content > .content-body > .teaser > .title {
font-size: 1.2rem;
}

縮寫屬性

CSS提供了各種縮寫屬性（如font 字體）應該盡可能使用，即使只設定一個值的情況下。

使用縮寫屬性對於程式碼效率和可讀性是有很有用的。

不推薦

css 程式碼:

 border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

推薦

color: #f3a;

ID 和Class（類別）名稱的分隔符

使用連字號（中劃線）分隔ID和Class（類別）名稱中的單字。為了增強課程理解性，在選擇器中不要使用除了連字符（中劃線）以為的任何字符（包括沒有）來連接單字和縮寫。

另外，作為此標準，預設屬性選擇器能辨識連字符（中劃線）作為單字[attribute|=value]的分隔符，
所以最好的堅持使用連字符作為分隔符號。

不推薦

.demoimage {}
.error_status {}

推薦

#video-id {}
.ads-sample {}

Hacks

避免用戶代理檢測以及CSS“hacks” – 首先嘗試不同的方法。透過用戶代理檢測或特殊的CSS濾鏡，變通的方法和hacks 很容易解決樣式差異。為了達到並維持一個有效的和可管理的程式碼庫，這兩種方法都應該被認為是最後的手段。換句話說，從長遠來看，用戶代理檢測和hacks
會傷害項目，作為項目往往應該採取阻力最小的途徑。也就是說，輕易允許使用用戶代理檢測和hacks 以後將過於頻繁。

聲明順序

這是一個選擇器內書寫CSS屬性順序的大致輪廓。這是為了確保更好的可讀性和可掃描重要。

作為最佳實踐，我們應該遵循以下順序（應該按照下表的順序）：

結構性屬性：
display
position, left, top, right etc.
overflow, float, clear etc.
margin, padding
表現性屬性：
background, border etc.
font, text
不推薦

.box {
font-family: 'Arial', sans-serif;
border: 3px solid #ddd;
left: 30%;
position: absolute;
text-transform: uppercase;
background-color: #eee;
right: 30%;
isplay: block;
font-size: 1.5rem;
overflow: hidden;
padding: 1em;
margin: 1em;
}

推薦

.box {
display: block;
position: absolute;
left: 30%;
right: 30%;
overflow: hidden;
margin: 1em;
padding: 1em;
background-color: #eee;
border: 3px solid #ddd;
font-family: 'Arial', sans-serif;
font-size: 1.5rem;
text-transform: uppercase;
}

聲明結束

為了確保一致性和可擴展性，每個聲明應該用分號結束，每個聲明換行。

不推薦

css 程式碼:
.test {
display: block; height: 100px
}

推薦

css 程式碼:

 .test {
display: block;
height: 100px;
}

屬性名結束

屬性名的冒號後使用一個空格。出於一致性的原因，
屬性和值（但屬性和冒號之間沒有空格）的之間總是使用一個空格。

不推薦

css 程式碼:

 h3 {
font-weight:bold;
}

推薦

css 程式碼:
h3 {
font-weight: bold;
}

選擇器和聲明分離

每個選擇器和屬性聲明總是使用新的一行。

不推薦

css 程式碼:

 a:focus, a:active {
position: relative; top: 1px;
}

推薦

css 程式碼:

 h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}

規則分隔

規則之間總是有一個空白行（雙換行符）分隔。

推薦

css 程式碼:

 html {
background: #fff;
}

body {
margin: auto;
width: 50%;
}

CSS引號

屬性選擇器或屬性值用雙引號（””），而不是單引號（”）括起來。
URI值（url()）不要使用引號。

不推薦

css 程式碼:

 @import url('//cdn.com/foundation.css');

html {
font-family: 'open sans', arial, sans-serif;
}

body:after {
content: 'pause';
}

推薦

css 程式碼:

 @import url(//cdn.com/foundation.css);

html {
font-family: "open sans", arial, sans-serif;
}

body:after {
content: 「pause」;
}

選擇器嵌套(SCSS)

在Sass中你可以嵌套選擇器，這可以使程式碼變得更清潔和可讀。嵌套所有的選擇器，但盡量避免嵌套沒有任何內容的選擇器。
如果你需要指定一些子元素的樣式屬性，而父元素將不什麼樣式屬性，
可以使用常規的CSS選擇器鏈。
這將防止您的腳本看起來過於複雜。

不推薦

css 程式碼:

 // Not a good example by not making use of nesting at all
.content {
display: block;
}

.content > .news-article > .title {
font-size: 1.2em;
}

不推薦

css 程式碼:

 // Using nesting is better but not in all cases
// Avoid nesting when there is no attributes and use selector chains instead
.content {
display: block;

> .news-article {
> .title {
font-size: 1.2em;
}
}
}

推薦

css 程式碼:

 // This example takes the best approach while nesting but use selector chains where possible
.content {
display: block;

> .news-article > .title {
font-size: 1.2em;
}
}

嵌套中引入空白行(SCSS)

巢狀選擇器和CSS屬性之間空一行。

不推薦

css 程式碼:

 .content {
display: block;
> .news-article {
background-color: #eee;
> .title {
font-size: 1.2em;
}
> .article-footnote {
font-size: 0.8em;
}
}
}

推薦

css 程式碼:

 .content {
display: block;

> .news-article {
background-color: #eee;

> .title {
font-size: 1.2em;
}

> .article-footnote {
font-size: 0.8em;
}
}
}

上下文媒體查詢(SCSS)

在Sass中，當你嵌套你的選擇器時也可以使用上下文媒體查詢。
在Sass中，你可以在任何給定的巢狀層次中使用媒體查詢。
由此產生的CSS將被轉換，這樣的媒體查詢將包裹選擇器的形式呈現。

這技術非常方便，
有助於保持媒體查詢屬於的上下文。

第一種方法這可以讓你先寫你的手機樣式，然後在任何你需要的地方用上下文媒體查詢以提供桌面樣式。

不推薦

css 程式碼:

 // This mobile first example looks like plain CSS where the whole structure of SCSS is repeated
// on the bottom in a media query. This is error prone and makes maintenance harder as it's not so easy to relate
// the content in the media query to the content in the upper part (mobile style)

.content-page {
font-size: 1.2rem;

> .main {
background-color: whitesmoke;

> .latest-news {
padding: 1rem;

> .news-article {
padding: 1rem;

> .title {
font-size: 2rem;
}
}
}

> .content {
margin-top: 2rem;
padding: 1rem;
}
}

> .page-footer {
margin-top: 2rem;
font-size: 1rem;
}
}

@media screen and (min-width: 641px) {
.content-page {
font-size: 1rem;

> .main > .latest-news > .news-article > .title {
font-size: 3rem;
}

> .page-footer {
font-size: 0.8rem;
}
}
}

推薦

css 程式碼:

 // This is the same example as above but here we use contextual media queries in order to put the different styles
// for different media into the right context.

.content-page {
font-size: 1.2rem;

@media screen and (min-width: 641px) {
font-size: 1rem;
}

> .main {
background-color: whitesmoke;

> .latest-news {
padding: 1rem;

> .news-article {
padding: 1rem;

> .title {
font-size: 2rem;

@media screen and (min-width: 641px) {
font-size: 3rem;
}
}
}
}

> .content {
margin-top: 2rem;
padding: 1rem;
}
}

> .page-footer {
margin-top: 2rem;
font-size: 1rem;

@media screen and (min-width: 641px) {
font-size: 0.8rem;
}
}
}

巢狀順序和父級選擇器(SCSS)

當使用Sass的巢狀功能的時候，
重要的是有一個明確的嵌套順序，
以下內容是一個SCSS區塊應具有的順序。

目前選擇器的樣式屬性<br/>父級選擇器的偽類選擇器(:first-letter, :hover, :active etc)
偽類元素(:before and :after)
父級選擇器的聲明樣式(.selected, .active, .enlarged etc.)
用Sass的上下文媒體查詢子選擇器作為最後的部分
The following example should illustrate how this ordering will achieve a clear structure while making use of the Sass parent selector.

Recommended

css 程式碼:

 .product-teaser {
// 1. Style attributes
display: inline-block;
padding: 1rem;
background-color: whitesmoke;
color: grey;

// 2. Pseudo selectors with parent selector
&:hover {
color: black;
}

// 3. Pseudo elements with parent selector
&:before {
content: "";
display: block;
border-top: 1px solid grey;
}

&:after {
content: "";
display: block;
border-top: 1px solid grey;
}

// 4. State classes with parent selector
&.active {
background-color: pink;
color: red;

// 4.2. Pseuso selector in state class selector
&:hover {
color: darkred;
}
}

// 5. Contextual media queries
@media screen and (max-width: 640px) {
display: block;
font-size: 2em;
}

// 6. Sub selectors
> .content > .title {
font-size: 1.2em;

// 6.5. Contextual media queries in sub selector
@media screen and (max-width: 640px) {
letter-spacing: 0.2em;
text-transform: uppercase;
}
}
}