CSS：base、新增子模組
CSS：base(基底)
在做一個專案之前，可以觀察設計稿當中究竟有哪些共通的元素，那就可以在開發之前就建立一個基本的樣式，例如說文字的顏色，文字的間距等等…
那在做一個專案之前是不是能夠把這些共通的元素先設定起來？
base 就是這樣的一個概念，base就是建立一個網站的基本樣式，如果今天你的網站標題都是 #555 的顏色，那就可以先把h1~h5都設定#555的字體顏色。
雖然說base這樣的基本樣式沒辦法所有的元素都共用，但只要能滿足80%以上就能夠讓程式碼更加的簡潔了！
模組化概念 - 新增子模組
這個概念跟base有異曲同工之妙，在做專案的時候可能會有兩個按鈕大小都相同，可能只有顏色或是文字不同 (如下)
Demo 範例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| //html
<button class="btn-submit">
送出
</button>
<button class="btn-reset">
重置
</button>
//css
.btn-submit{
padding: 10px 15px;
background-color: #fc0;
color: #fff;
border: none;
border-radius: 10px;
}
.btn-reset{
padding: 10px 15px;
background-color: #666;
color: #fff;
border: none;
border-radius: 10px;
}
|
其實.btn-submit .btn-reset的程式碼當中有許多重複的屬性，就是因為如此所以有開發者想出了模組化的概念。
先建立一個.btn的基礎樣式，再利用新增子模組來改變他們不同的屬性。(如下)
Demo 範例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| //html
<button class="btn btn-submit">
送出
</button>
<button class="btn btn-reset">
重置
</button>
</div>
//css
.btn{
padding: 10px 15px;
color: #fff;
border: none;
border-radius: 10px;
}
.btn-submit{
padding: 10px 30px;
background-color: #fc0;
}
.btn-reset{
background-color: #666;
}
|
如上方CSS所示，藉由.btn來建立一個基礎樣式，那.btn-submit .btn-reset只要輸入他們兩個屬性上的差別就可以了，方便管理也能達到code的簡潔。