15分鐘讓你寫好CSS
- OOCSS
Lecturer: 土豆
Date: 2019/11/17
大綱
- OOCSS介紹
- 實際案例
- class命名
OOCSS介紹
OOCSS =
Object Oriented CSS
假設今天我想要一顆藍色的button
我可能會直接這樣寫
如果還要一顆紅色的button
就再加上這段
.btn-red {
display: inline-block;
background-color: rgb(200, 0, 0);
padding: 10px 30px;
color: white;
font-size: 20px;
border-radius: 5px;
border: none;
transition-duration: 100ms;
transition-timing-function: ease-in-out;
}
.btn-red:hover {
background-color: rgb(100, 0, 0);
} <button class="btn-red">
I'm a button too
</button>還要綠色的、黃色的、有邊框的按鈕
簡單，小事
.btn-green {
display: inline-block;
background-color: rgb(0, 200, 0);
padding: 10px 30px;
color: white;
font-size: 20px;
border-radius: 5px;
border: none;
transition-duration: 100ms;
transition-timing-function: ease-in-out;
}
.btn-green:hover {
background-color: rgb(0, 100, 0);
}
.btn-yellow {
display: inline-block;
background-color: rgb(200, 200, 0);
padding: 10px 30px;
color: white;
font-size: 20px;
border-radius: 5px;
border: none;
transition-duration: 100ms;
transition-timing-function: ease-in-out;
}
.btn-green:hover {
background-color: rgb(100, 100, 0);
}
.btn-border {
display: inline-block;
padding: 10px 30px;
background-color: transparent;
color: black;
font-size: 20px;
border-radius: 5px;
border: 2px solid rgb(0, 0, 200);
transition-duration: 200ms;
transition-timing-function: ease-in-out;
}
.btn-border:hover {
color: white;
background-color: rgb(0, 0, 200);
} <button class="btn-green">
I'm a button too too
</button>
<button class="btn-yellow">
I'm a button too too too
</button>
<button class="btn-border">
I'm a button too too too too
</button>老闆，再來個紫色的、橘色的、墨綠色的、圓形的、正方形的、大的、小的、極小的、極大的、大的紫色、小的橘色、極大的圓形的墨綠色的按鈕!
加邊框加到飽!!
夠了喔，你當我這裡是吃到飽自助餐是不是
OOCSS兩個概念
- 結構與樣式的分離
- 內容與容器的分離
結構與樣式的分離
內容與容器的分離
容器
內容
可以這樣裝
也可以這樣裝
實際案例
利用結構與樣式分離的概念
改改button
容器與內容分離
假設有個header跟footer
一個紅字一個藍字
我想讓藍色的字也出現在container
.container h1 {
color: #00d;
}<div class="container">
<h1>Hello!</h1>
</div>我想讓紅色的字也出現在container
.container .container-blue {
color: #00d;
}
.container .container-red {
color: #d00;
}<div class="container">
<h1 class="container-blue">Hello!</h1>
<h1 class="container-red">Hello!</h1>
</div>我想讓header跟footer又紅又藍
header .header-red {
color: #d00;
}
header .header-blue {
color: #00d;
}
footer .footer-red {
color: #d00;
}
footer .footer-blue {
color: #00d;
}<header>
<h1 class="header-red">Hello!</h1>
<h1 class="header-blue">Hello!</h1>
</header>
<!-- ... -->
<footer>
<h1 class="footer-red">Hello1</h1>
<h1 class="footer-blue">Hello1</h1>
</footer>我想讓navbar又紅又藍
sidebar又紫又黃
footer 又黑又白
container來個彩色
又來個奧客啊!!!
容器與內容分離
容器: footer, header, div, navbar, sidebar...
內容: h3
class命名
其實剛剛那些命名並不好
想像一下老闆今天跟你說: 「耶，那個網頁藍色的部分全部換成咖啡色好不好?」
「好啊，當然好」
怎麼改?
.btn-brown {
background-color: rgb(117, 52, 5);
color: white;
}
.btn-brown:hover {
background-color: rgb(80, 32, 0);
}<button class="btn btn-brown">I'm a button</button>別忘了還有文字
/* ... */
header .header-brown {
color: #00d;
}
/* ... */
footer .footer-brown {
color: #00d;
}<header>
<!-- ... -->
<h1 class="header-brown">Hello!</h1>
</header>
<div class="container">
<!-- ... -->
<h1 class="footer-brown">Hello1</h1>
</div>
<footer>
<!-- ... -->
<h1 class="footer-brown">Hello1</h1>
</footer>別忘了還有你剛做好的navbar
還有sidebar, card, progress bar, input, alert, form......
終於改好後...
老闆說: 「耶，那個網頁咖啡色好難看，全部改回藍色好不好?」
盡量用抽象化的方式命名
blue
primary
red
secondary
green
info
sidebar-right
sidebar
col-4
參考資料
感謝聆聽
15分鐘讓你寫好CSS - OOCSS
By Sam Yang
