CSS 群組式宣告 - 每個開發者都該學會的選取方式 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 5

Modern Web

金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎系列第 5 篇

CSS 群組式宣告 - 每個開發者都該學會的選取方式

11th鐵人賽 css 金魚 css教學網頁教學

CSScoke

2019-09-20 11:45:48

15437 瀏覽

分享至

本系列文章已集結成書，並於書中添加一些新篇章及細節補充，有興趣的朋友可至天瓏書局選購，感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
讓我們好好善用CSS選取器吧

瞭解了 CSS tag、class、ID 三大基礎選取器之後，接著我們可以來了解選取器的另外一種不同的宣告方式。由於在製作網頁時我們會利用選取器去選取到物件後對其做視覺上面的設定，那麼是否會有一些不同 class 的物件卻使用到相同的視覺外觀的狀況發生呢？這答案絕對是肯定的，例如下面這種 HTML 原始碼

<!-- 最新消息 -->
<div class="news-list">
  <a href="#" class="news-list-item">...略</a>
  <a href="#" class="news-list-item">...略</a>
  <a href="#" class="news-list-item">...略</a>
</div>

<!-- 近期活動 -->
<div class="event-list">
  <a href="#" class="event-list-item">...略</a>
  <a href="#" class="event-list-item">...略</a>
  <a href="#" class="event-list-item">...略</a>
</div>

上面可以看到兩個清單中，除了 class 名稱不一樣以外，其他無論是結構或是視覺外觀應該都長的會是差不多的才是，所以新手通常就會設定成像是下面這樣的 CSS

/*最新消息*/
.news-list{
	border: 1px solid #ccc;
	padding: 20px;
}

.news-list-item{
	color: #666;
	text-decoration: none;
	display: list-item;
}

/*近期活動*/
.event-list{
	border:1px solid #ccc;
	padding: 20px;
}

.event-list-item{
	color: #666;
	text-decoration: none;
	display: list-item;
}

從上面原始碼中可以看到，.news-list 最新消息跟 .event-list 近期活動的視覺外觀是一模一樣的，且他子層的項目 .xxx-list-item 的視覺外觀也都是完全一模一樣的，也就是說他的原始碼各重複了一份，那如果我的頁面中有十個區域都是一模一樣的外觀，但是 class 名稱都是不同的話，那麼我的原始碼不就十倍肥大了！？這對網頁越小越好的目的來說是個非常不好的狀況啊！！！所以我們可以將上面的原始碼修改成下面這樣的寫法

/*最新消息 & 近期活動*/
.news-list,
.event-list{
	border:1px solid #ccc;
	padding: 20px;
}

.news-list-item,
.event-list-item{
	color: #666;
	text-decoration: none;
	display: list-item;
}

在上面的原始碼中，Amos 將兩個不同的 class 名稱使用半形逗號「,」區隔開來，就能夠讓兩個不同的選取對象共用一份 CSS 設定，如此一來我的原始碼就可以節省一半以上的數量了，這種方式我們就稱之為群組式宣告。CSS 群組式宣告在實務上面的應用非常的多，可以說是開發時經常會用到的一個選取器宣告方式了（此類文章撰寫至今似乎尚未看到不常用的選取器就是了...笑），例如知名的網頁視覺框架 bootstrap 就用到非常之多。

使用群組式宣告的重點與誤區

如前文所述，CSS 群組式宣告是利用半形逗號「,」將不同的選取器做區隔，以達到共用設定並減少太多重複 CSS 原始碼的目的，但要特別注意到以下幾點

最後一個選取器的右側不可出現逗號，會導致該串選取器全部失效
當大量使用逗號區隔眾多選取器時，該考慮另外建立新的共用選取器，而不是濫用逗號做 CSS 群組式宣告
每個逗號右側建議添加一個空格以利閱讀
逗號前後的空間不影響選取器的選取作用
每個選取器可寫在同一行以利縮減檔案大小
當沒有前一點需求時，可將每個選取器做換行以利開發時的識別(這就看個人習慣了)

上述幾個注意事項案例如下

/*最後一個選取器的右側不可出現逗號，會導致該串選取器全部失效*/
.amos,.handsome,{ 
  ...略
}

/*當大量使用逗號區隔眾多選取器時，該考慮另外建立新的共用選取器，而不是濫用逗號做 CSS 群組式宣告*/
.news-title, .events-title, .products-title, .service-title, .contact-title, .qna-title, .media-title, .login-title, .forum-title, .shopping-title, .post-title, .design-title{
	...略
}

/*每個逗號右側建議添加一個空格以利閱讀*/
.amos, .handsome, .youtuber{ ...略 }

/*逗號前後的空間不影響選取器的選取作用*/
.amos    ,    .handsome    ,     .youtuber{ 
  ...略
}

/*每個逗號右側建議添加一個空格以利閱讀*/
/*每個選取器可寫在同一行以利縮減檔案大小*/
.amos, .handsome, .youtuber{ 
  ...略
}

/*當沒有前一點需求時，可將每個選取器做換行以利開發時的識別*/
.amos, 
.handsome, 
.youtuber{ 
  ...略 
}

實務上面的應用狀況

知道了 CSS 群組式宣告的目的跟方法之後，我們來看看在工作實務上面 Amos會使用的方式，由於重複設定太多 class 的話，要修改也不容易，但是修改的彈性卻是最大，所以基本上我會將相同視覺外觀的項目，把它共用的地方抽出來獨立用一個 class 來設定，至於差異化的部分則用另外一個單獨專有的 class 名稱來設定即可，例如以下 HTML 原始碼，我就先把他設定了一個共用的 class 名稱 .list 以及 list-item ，而差異化的 class 名稱則是 .news-list 、 .event-list、.news-list-item、.event-list-item

<!-- 最新消息 -->
<div class="list news-list">
  <a href="#" class="list-item news-list-item">...略</a>
  <a href="#" class="list-item news-list-item">...略</a>
  <a href="#" class="list-item news-list-item">...略</a>
</div>

<!-- 近期活動 -->
<div class="list event-list">
  <a href="#" class="list-item event-list-item">...略</a>
  <a href="#" class="list-item event-list-item">...略</a>
  <a href="#" class="list-item event-list-item">...略</a>
</div>

利用那個共用的 class 名稱我們就可以快速將我們想要的設定一次設定完了，完全不需要用到群組式宣告，修改較快但又能保留變化的彈性，就像下面這樣的寫法

.list{
	border: 1px solid #ccc;
	padding: 20px;
}
.list-item{
	font-size: 18px;
	color: #666;
    padding-left: 2em;
}
.news-list-item{
	background: url(news-icon.png) no-repeat left top;
}
.event-list-item{
	background: url(events-icon.png) no-repeat left top;
}

以上就是這次金魚都能懂的 CSS 選取器 - CSS 選取器的群組式宣告，不知道各位工作上面都用哪些方式，又踩過哪些雷呢，歡迎在下面留言分享給 Amos 喔。各位金魚我們明天見。