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

參考資料

感謝聆聽

Made with Slides.com