网页命名规则-30天学会HTML＋CSS，制作精美网站

在撰写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选取状态