iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 5
9

瞭解了 CSS tagclassID 三大基礎選取器之後,接著我們可以來了解選取器的另外一種不同的宣告方式。由於在製作網頁時我們會利用選取器去選取到物件後對其做視覺上面的設定,那麼是否會有一些不同 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 喔。各位金魚我們明天見。

金魚都能懂的教學系列

鐵人雙主題挑戰中,歡迎訂閱一波

金魚都能懂的這個網頁畫面怎麼切

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學
/images/emoticon/emoticon12.gif


上一篇
#ID 選取器 - 程式設計最常用到的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎
下一篇
CSS 組合式宣告 - 新手開發從這裡開始進步
系列文
金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎30

1 則留言

1
scertgogo
iT邦新手 5 級 ‧ 2019-09-20 12:26:24

這篇好!

CSScoke iT邦新手 4 級‧ 2019-09-20 12:28:28 檢舉

/images/emoticon/emoticon12.gif

我要留言

立即登入留言