網頁命名規則-30天學會HTML＋CSS，製作精美網站

2021 iThome 鐵人賽

DAY 10

Modern Web

30天學會HTML＋CSS，製作精美網站系列第 10 篇

13th鐵人賽 css css教學 css3

sunny

2021-09-25 11:14:31

2444 瀏覽

分享至

在撰寫HTML及CSS時，好的命名要具備可讀性，一眼就能知道這區塊的作用是什麼，也方便日後的維護管理，今天就要來介紹三種CSS的命名規則

OOCSS（Object Oriented CSS）

有兩個原則，分別是分離結構與樣式及容器與內容分離

分離結構與樣式 Separate structure and skin

像是元素的大小與顏色，bootstrap就是用這個方式寫的，以button為例

<button type="button" class="btn btn-primary btn-sm">Primary</button>
<button type="button" class="btn btn-warning btn-lg">Warning</button>
<button type="button" class="btn btn-success">Success</button>

class="btn"為預設按鈕樣式
btn-primary為主色樣式、btn-success 為成功的樣式、btn-warning 為警告樣式...
用名稱判斷就可以大約知道這是什麼功能
btn-sm為小按鈕、btn-lg為大按鈕

容器與內容分離 Separate container and content

容器是包住內容元件的框、內容就是元件，以下面例子來說.news-box就是你的容器，.img-box、.title、.txt...就是你的元件

<div class="news-box">
    <a class="item">
      <div class="img-box">
        <img src="img.jpg" />
      </div>
      <div class="content">
        <h3 class="title">title</h3>
        <p class="txt">It is a long established fact that a reader will be distracted.</p>
      </div>
    </a>
  </div>

在css都會這樣子寫

.news-box .item{
  border: 1px solid #efefef;
  display: block;
  width: 300px;
}
.news-box .content{
  padding: 10px;
}
.news-box .title{
	font-size:18px;
	margin: 0;
}
.news-box .txt{
	color:#999;
  margin: 0;
}

<div class="active-box">
	<a class="item">
		<div class="img-box">
			<img src="img.jpg" />
		</div>
		<div class="content">
			<h3 class="title">title</h3>
			<p class="txt">content</p>
		</div>
	</a>
</div>

.active-box .item{
  border: 1px solid #efefef;
  display: block;
  width: 300px;
}
.active-box .content{
  padding: 10px;
}
.active-box .title{
	font-size:18px;
	margin: 0;
}
.active-box .txt{
	color:#999;
  margin: 0;
}

所以我們可以將元件抽離出來，這樣子就可以減少很多重複撰寫的地方了

.item{
  border: 1px solid #efefef;
  display: block;
  width: 300px;
}
 .content{
  padding: 10px;
}
 .title{
	font-size:18px;
	margin: 0;
}
.txt{
	color:#999;
  margin: 0;
}

SMACSS（Scalable & Modular Architecture for CSS）

除了有類似OOCSS分離的概念外、命名規則，還將CSS分成五種結構，分別為Base、Layout、Module、State、Theme，下面分別介紹五個結構功能

Base 網頁的基本樣式

不會使用到任何class與id，像是CSS Reset

body{ 
	margin: 0; 
	padding: 0; 
}
a{
	text-decoration: none;
}
img{
	max-width:100%
}

Layout 網頁的佈局

主要區塊可以使用id命名像是#header, #menu, #footer...，
次要layout使用class命名
使用 l- 或 layout- 為佈局樣式前綴

#header{....}
.l-grid{.....}

Module 模組

可重複使用的元件
會使用class命名
模組名稱與元素名稱中間使用dash分隔，像是.card-item、.card-header、.card-body

以下是以bootstrap card為例，從名稱也可以知道每個區塊的意義是什麼

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">card's content.</p>
  </div>
</div>

State 元件狀態

與layout、module搭配
使用者觸發後改變的狀態，可使用is-為狀態前綴，像是.is-active或 tab-item acitve

以下以bootstrap tabs為例，第一個選起來的tab加入active class名稱

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
</nav>

Theme

針對整個網站的主視覺變化
以theme-為主題前綴

BEM（Block，Element，Modifier）

Block 區塊

頁面獨立區塊可重複使用
下圖在header區塊的menu、logo、search...都是獨立的一個區塊

那也能重複使用區塊，通常會出現在列表

Element 元素

區塊內的元件，像是標題、內文、圖片...，用底線 _ _(雙底線)來連接區塊及元件

Modifier 修飾子

與SMACSS的state類似，用中線 - - (雙中線)來連結元素狀態

<div class="tab-box">
	<div class="tab-box__item">tab1</div>
	<div class="tab-box__item">tab2</div>
	<div class="tab-box__item tab-box--active">tab3</div>
	<div class="tab-box__item">tab4</div>
</div>

tab-box區塊裡，有多個tab-box__item元件，tab-box—active選取狀態