---
tags: 公益程式體驗營 - 2022
---

# 🏅 6/1 (三) 每日切版任務 - class 命名優化
## 題目

* 請用這週學到的設計模式優化以下的 class 名稱與 SASS / Scss 優化：
不限制使用任何設計模式

HTML

<ul class="product-list">
  <li class="product-item">
	<img class="product-img" src="https://process.fs.teachablecdn.com/ADNupMnWyR7kCWRvm76Laz/resize=width:705/https://file-uploads.teachablecdn.com/28314e9f03f6499da570dadc65830ca1/d6f17d51fd044699b8e4a6151c48c913">
	<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" href="#">最愛課程</a>
	<a class="product-cart" href="#">加碼課程</a>
  </li>
  <li class="product-item">
    	<img class="product-img" src="https://process.fs.teachablecdn.com/ADNupMnWyR7kCWRvm76Laz/resize=width:705/https://file-uploads.teachablecdn.com/28314e9f03f6499da570dadc65830ca1/d6f17d51fd044699b8e4a6151c48c913">
	<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" href="#">最愛課程</a>
	<a class="product-cart" href="#">加碼課程</a>
  </li>
  <li class="product-item">
    	<img class="product-img" src="https://process.fs.teachablecdn.com/ADNupMnWyR7kCWRvm76Laz/resize=width:705/https://file-uploads.teachablecdn.com/28314e9f03f6499da570dadc65830ca1/d6f17d51fd044699b8e4a6151c48c913">
	<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" href="#">最愛課程</a>
	<a class="product-cart" href="#">加碼課程</a></li>
</ul>

Scss

*,
*::before,
*::after {
  box-sizing: border-box;
}

.product-list {
  display: flex;
  justify-content: center;

  .product-item {
    width: 300px;
    background: #fef4f4;
    margin: 0 10px;
    text-align: center;
  }
  .product-img {
    display: block;
    width: 100%;
    margin-bottom: 16px;
  }
  .product-name {
    font-size: 24px;
    font-weight: bold;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #000;
  }
  .product-brand {
    margin-bottom: 16px;
  }
  .product-price {
    margin-bottom: 16px;
  }
  .product-like {
    display: block;
    text-decoration: none;
    margin-bottom: 16px;
    color: #e6b422;
    font-weight: bold;
  }
  .product-cart {
    display: block;
    text-decoration: none;
    margin-bottom: 16px;
    color: #e6b422;
    font-weight: bold;
  }
}

<!--
ans:
[沒有一個標準解答，此解答只是範例](https://codepen.io/DoLucky/pen/NWyweEO?editors=1000)
-->
---

## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）


<!-- 解答： -->

回報區
---

<!-- 1. yunyun
Codepen：https://codepen.io/yun_yunni/pen/ZEroGvP
-->

<!-- 2. Noy
https://codepen.io/MochiCodingPen/pen/RwQyPJV
-->

<!-- 3. Bruno Yu
https://codepen.io/bruno-yu/pen/rNJvVGg?editors=1100
-->

<!-- 4. 楓之聲#6945
https://codepen.io/sshane258/pen/OJQZywG
-->

<!-- 5. Chi
Codepen: https://codepen.io/YoChi84/pen/xxYjwjL
-->

<!-- 6. Peng
https://codepen.io/peng-027/pen/JjpvGRB
-->

<!-- 7. Cheng-Yu#1813
https://codepen.io/ball77111/pen/WNMJrPO?editors=1100
-->

<!-- 8. RJRS#9430
https://codepen.io/RJRS/pen/zYRjxym
-->

<!-- 9. yuyu#6310
https://codepen.io/yuyu0905/pen/MWQGyqR?editors=1100
-->

<!-- 10. Tuhacrt#0008
Codepen: https://codepen.io/Tuhacrt/pen/zYRjqQG?editors=1100
-->

<!-- 11.Joyce
https://codepen.io/joycehuang/pen/XWZqdLJ?editors=1100
-->

<!-- 12. Hao#2485
https://codepen.io/hao216/pen/NWyMrro
-->

<!-- 13. hw#0715
https://codepen.io/Lhwei/pen/zYRjKKR
-->

<!-- 14. Lina Chen
https://codepen.io/LinaChen/pen/xxYjENB
-->

<!-- 15. EllieLo#9809
https://codepen.io/ellie-lo/pen/VwQxjOG
-->

<!-- 16. Charlotte Lee
https://codepen.io/charlotte-lee/pen/RwQyoWa?editors=1100
-->

<!-- 17.IreneLee
codepen:https://codepen.io/ntjtcxpt-the-animator/pen/oNEdLBe?editors=1100
-->

<!-- 18. lyle#8123
codepen:https://codepen.io/tomys/pen/NWyMpop
-->

<!-- 19. 眠瀾#8857
CodePen: https://codepen.io/laron9486/pen/mdXLwjz
-->

<!-- 20. Erica Chen#6929
CodePen: https://codepen.io/ericachen/pen/GRQdoVq?editors=1100
-->

<!-- 21.Chaco #2993
CodePen: https://codepen.io/chaco-wang/pen/ExQLzOY?editors=0100
-->

<!-- 22. Mitour#0672
https://codepen.io/mitour/pen/RwQJbqK?editors=1100
-->

<!-- 23.amy芳#1385
https://codepen.io/amy-chieng/pen/zYRaGGm
-->

<!-- 24.hsiuhsiu
https://codepen.io/hsiuhsiu/pen/ZErRKYx?editors=1100
-->

<!-- 小不點#1793
codepen:https://codepen.io/fwmfmgkx-the-flexboxer/pen/ZErRyaE?editors=1100
-->

<!-- 26. ajhappy#6488
Codepen:https://codepen.io/ajhappy5438/pen/VwQdMXv
-->

<!-- 27. Jamie
https://codepen.io/Wu220103/pen/MWQXXJV -->

<!-- 28. 白狐
Codepen：https://codepen.io/baihu7851/pen/xxYzyxy
-->

<!-- 29. Vera#5592
Codepen：https://codepen.io/skvera/pen/YzejyOr
-->

<!-- 30. Cynthia1111
Codepen：https://codepen.io/Cynthia1111/pen/wvyxgNY?editors=1100
-->

<!-- 30. Tori#1287
Codepen：https://codepen.io/FlyTori/pen/bGLjqgP?editors=1100
-->

<!-- 31. Stanley
Codepen：https://codepen.io/sean_1215/pen/gOvjzYK
-->

<!-- 32. COLOR
Codepen:
https://codepen.io/color0602/pen/GRQBBNm?editors=1100 -->

<!-- 33. Jumpye#8601
Codepen:
https://codepen.io/Jumpye/pen/VwQGREK?editors=1100 -->

<!--34. Greta#0837
Codepen:
https://codepen.io/gretali/pen/dydgVBL
-->

<!--34. 鉦勝 #8333
Codepen:
https://codepen.io/atckmax823/pen/vYdQEJZ
-->

<!-- 35. andersonshen#4675
Codepen：https://codepen.io/luxyenni-the-bold/pen/RwQzRbo
-->

<!-- J_u_d_y#5993
https://codepen.io/J_u_d_y/pen/qBxegWx?editors=1100
-->