---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 Day 50

## 設計模式

### 題目

請用這週學到的設計模式優化以下的 class 名稱：
不限制使用任何設計模式（OOCSS、BEM）

HTML

<ul class="product-list">
  <li class="product-item">
	<img class="product-img">
	<h3 class="product-name">Poppy & Barley</h3>
	<h4 class="product-brand">Jo Malone</h4>
	<h4 class="product-price">NT1,380</h4>
	<a class="product-like">...</a>
	<a class="product-cart">...</a>
  </li>
  <li class="product-item">...</li>
  <li class="product-item">...</li>
</ul>

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：https://codepen.io/hexschool/pen/oNqVBBR

沒有標準答案，此解答只是範例
-->

回報區
---

| Discord | CodePen / 答案 |
|:-------------:|:-------------------------------------------------------------:|
| 布魯諾#7239 | [ CoalPants ](https://codepen.io/bruno-yu/pen/LYmYpOx) |
| Clara#1275 | [ Codepen ](https://codepen.io/bsupixqu/pen/NWMWGYe) |
| LinaChen#1796 | [ Codepen ](https://codepen.io/LinaChen/pen/zYjYvRr) |
| WEI_RIO#9342 | [codepen](https://codepen.io/wei_wu/pen/qBYBOLm?editors=1000) |
| Chi#7605 | [ Codepen ](https://codepen.io/YoChi84/pen/zYjYveK) |
| 大衛#4869 | [codepen](https://codepen.io/exnsrpjc/pen/PoeoZwX?editors=1010) |
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/JjvjXPe) |
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/QWrWNNv) |
| azami#5986 |[CodePen](https://codepen.io/azami/pen/LYmYGwM)|
| CloThEs#7837 |[CodePen](https://codepen.io/CloThEsZ/pen/eYrYZEj)|
| 雷雷#7844 |[CodePen](https://codepen.io/lei-yi-jie/pen/QWrWNaO)|
|int#7518|[Codepen](https://codepen.io/intHuang/pen/YzLzqjw?editors=1010)|
|Tuhacrt#0008|[Codepen](https://codepen.io/Tuhacrt/pen/LYmYZPp)|
| yuyu#6310 |[Codepen](https://codepen.io/yuyu0905/pen/bGMGeOz?editors=1010)|
|Henry#7386|[Codepen](https://codepen.io/h1nr9/pen/dyeypww)|
|ssozr#4680|[codepen](https://codepen.io/ssozr/pen/KKRKWpw)|
|IreneY#0086|[Codepen](https://codepen.io/HalfPlannedJourney/pen/XWqWzMr)|
|zera#6060|[codepen](https://codepen.io/zera-tseng/pen/gOzOgRo)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/oNdgZyq)|
|Joyce#3790|[Codepen](https://codepen.io/joycehuang/pen/MWGYvMJ?editors=1010)|
|mei#8421|[Codepen](https://codepen.io/Shila-Chen/pen/NWMqgja?editors=1010)|
| Amberhh #2465 | [Codepen](https://codepen.io/Amberhh/pen/bGMdopG?editors=1000) |
| QOO #8446 | [Codepen](https://codepen.io/QOOQOOQ/pen/QWrbaoL?editors=1100) |
|Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/yLjeVay?editors=1000)|
|kancheng#3915|[Codepen](https://codepen.io/kancheng/pen/VwxpKmQ)|
|Vera#5592|[Codepen](https://codepen.io/skvera/pen/vYjegoE)|
|Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/zYjPxVg)|