{%hackmd /au2gfdvHR0mEjvR_NzROqA?both %}

###### tags: `開發`

[開發] 9大常見的新手錯誤
===

[TOC]

## 01. 全部都用絕對定位、寫死高寬來排版

:::info
使用絕對定位就必須將元素「釘」在版面上，要靈活推擠難上加難！
:::


### 錯誤範例

<!-- HTML -->

<div class="wrap">
  <div class="box box-yellow"></div>
  <div class="box box-black"></div>
  <div class="box box-blue"></div>
</div>

/* CSS */

.wrap {
  position: relative;
  margin: 0 auto;
  width: 500px;
}
.box {
  height: 100px;
  width: 500px;
  position: absolute;
}

.box-yellow {
  background: yellow;
  top: 0;
}

.box-black {
  background: black;
  top: 110px;
}

.box-blue {
  background: blue;
  top: 220px;
}

> 
> <small>錯誤範例</small>

### 正確範例

<!-- HTML -->

<div class="wrap">
  <div class="box box-yellow"></div>
  <div class="box box-black"></div>
  <div class="box box-blue"></div>
</div>

/* CSS */

.wrap {
  margin: 0 auto;
  width: 500px;
}

.box {
  height: 100px;
  width: 500px;
  margin-bottom: 20px;
  /* div 區塊元素自適應推擠，再用 margin 產生邊界   */
}

.box-yellow {
  background: yellow;
}

.box-black {
  background: black;
}

.box-blue {
  background: blue;
}

> 
> <small>正確範例</small>

## 02. 缺少使用者操作回饋 (hover、focus)

:::info
網頁是會被使用者玩弄的，所以要設計一些回饋樣式提供給客戶
:::


### 錯誤範例

<!-- HTML -->

<a href="#">連結</a>

<input type="text" />

/* CSS */

/* 無設計 hover、focus 樣式 */

> 
> <small>錯誤範例</small>

### 正確範例

<!-- HTML -->

<a href="#">連結</a>

<input type="text" />

/* CSS */

a {
  text-decoration: none;
}
a:hover {
  color: red;
}
/* 增加陰影樣式 */
input:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(102, 175, 233, 0.6);
}

> 
> <small>正確範例</small>

## 03. 網頁權重設計不佳 (h1、h2、div)

:::info
每段內容都要視權重標示清楚正確的網頁標籤，
優良的語意化網頁結構才有辦法讓搜尋引擎友善的收錄
:::


### 錯誤範例

<!-- HTML -->

<!-- 用 div 去排版，無從得知網頁權重、語意 -->
<div class="wrap">
  <div class="header">
    <div class="logo"><a href=""></a></div>
    <div class="menu">
      <div class="menubox"><a href=""></a></div>
      <div class="menubox"><a href=""></a></div>
      <div class="menubox"><a href=""></a></div>
    </div>
  </div>
  <div class="content">
    <div>標題</div>
    <div>內容內容內容</div>
  </div>
  <div class="footer">
    <div>表尾</div>
  </div>
</div>

> 
> <small>錯誤範例</small>

### 正確範例

<!-- HTML -->

<!-- 使用 h1 標題、p段落、ul li 列表來標視權重 -->
<div class="wrap">
  <div class="header">
    <div class="logo"><a href=""></a></div>
    <ul class="menu">
      <li class="menubox"><a href=""></a></li>
      <li class="menubox"><a href=""></a></li>
      <li class="menubox"><a href=""></a></li>
    </ul>
  </div>
  <div class="content">
    <h1>標題</h1>
    <p>內容內容內容</p>
  </div>
  <div class="footer">
    <p>表尾</p>
  </div>
</div>

> 
> <small>正確範例</small>

## 04. 文字字型、大小在每個 class 都設定過一次

:::info
如果每個元素的字型都一樣時，可以直接在 body 設定就好
:::


### 錯誤範例

<!-- HTML -->

<h1>標題</h1>

<p>段落</p>

<div class="header">
  <a href="#">連結</a>
</div>

/* CSS */

/* 每個 class 都設定，導致設定上較為雜亂 */
h1 {
  font-family: Microsoft JhengHei;
}

p {
  font-family: Microsoft JhengHei;
}

.header a {
  font-family: Microsoft JhengHei;
}

> 
> <small>錯誤範例</small>

### 正確範例

<!-- HTML -->

<h1>標題</h1>

<p>段落</p>

<div class="header">
  <a href="#">連結</a>
</div>

<div class="footer">
  <a href="#">表尾</a>
</div>

/* CSS */

/* 可直接在body下全域設定，如果其中一兩個小地方要不一樣再額外覆蓋樣式就好 */
body {
  font-family: Microsoft JhengHei;
}

.footer a {
  font-family: Helvetica;
}

> 
> <small>正確範例</small>

## 05. 在跑迴圈的網頁元素上設定不同的 class 名稱

:::info
跟後端配合時，會從資料庫撈數筆資料並顯示在畫面時，不要每個標籤都客製化 class 名稱
:::


### 錯誤範例

<!-- HTML -->

<!-- li 每個 margin 都不一樣，又客製化每個 class，如果這區塊需要重複跑 N 筆 資料時會相當麻煩 -->
<div class="content">
  <ul class="product-list">
    <li class="product-list-1"></li>
    <li class="product-list-2"></li>
    <li class="product-list-3"></li>
  </ul>
</div>

/* CSS */

.content {
  margin: 0 auto;
  width: 600px;
}

.product-list .product-list-1 {
  width: 180px;
  margin: 0px 20px 10px 0;
  height: 100px;
  background: #000;
  float: left;
}
.product-list .product-list-2 {
  width: 180px;
  margin: 0 0px 10px 0px;
  height: 100px;
  background: #000;
  float: left;
}
.product-list .product-list-3 {
  width: 180px;
  margin: 0 10px 10px 20px;
  height: 100px;
  background: #000;
  float: left;
}

> 
> <small>錯誤範例</small>

### 正確範例

<!-- HTML -->

<!-- 可以直接拿 <li></li> 跑 N 筆資料也能夠靈活地從上到下進行推擠排版 -->
<div class="content">
  <ul class="product-list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

/* CSS */

.content{
  margin: 0 auto;
  width: 600px;
}

.product-list li{
  width: 180px;
  margin: 0px 10px 10px 10px;
  height: 100px;
  background: #000;
  float: left;
}

> 
> <small>正確範例</small>

## 06. 不了解區塊元素特性，習慣寫死寬度

:::info
div 是區塊元素，會隨著自適應延伸寬度，
所以要大區塊上面不用全部都寫死寬度
:::


### 錯誤範例

<!-- HTML -->

<div class="wrap">
  <div class="header"></div>
  <div class="content"></div>
  <div class="footer"></div>
</div>

/* CSS */

/*  每個元素都要寫了寬度，但其實是沒必要的 */
.wrap{
  width: 600px;
  margin: 0 auto;
}
.header{
  height: 80px;
  background: orange;
  width: 600px;
}
.content{
  height: 150px;
  background: gray;
  width: 600px;
}
.footer{
  height: 100px;
  background: pink;
  width: 600px;
}

> 
> <small>錯誤範例</small>

### 正確範例

<!-- HTML -->

<div class="wrap">
  <div class="header"></div>
  <div class="content"></div>
  <div class="footer"></div>
</div>

/* CSS */

/*  不寫寬度也會自適應父元素 .wrap */
/* 高度只是為了顯示區塊，非必要 */
.wrap{
  width: 600px;
  margin: 0 auto;
}
.header{
  height: 80px;
  background: orange;
}
.content{
  height: 150px;
  background: gray;
}
.footer{
  height: 100px;
  background: pink;
}

> 
> <small>正確範例</small>

## 07. 習慣寫死高度，導致網頁靈活度低

:::info
在區塊元素會自適應延伸的特定，有些時候你是可以只用 padding 留白搞定，不用都一定要寫死高度，日後新增內容還必須再調整高度一次
:::


### 錯誤範例

<!-- HTML -->

<!-- 寫死高度的話，內容不小心變太多時就容易破版 -->
<div class="form">
  <p>我是及，了隨正倒場亞接，轉或走調全事境們行，必事意業；高像活，在她後代其面家操對雖資說然是場今完主族現今術加起務臺過過取並到環流多角讀調落子農！</p>
<p>的兒事得求來車我得完國政：門間張太各更學！速企般面顧是員雖：向即代這市年平後業作你教只上不信上以商子遊都利用面竟心陸士火質說美有是到民個？方樣風教思現入上；道心富他錢。</p>
<p>看神早麗男交一演場活他命時傳於……山在上濟色升？臺的遠方精護。關形夫理寫……回著收元科家見然，主裡英經檢學生性的樣不原劇弟寫，都國生臺孩善的。</p>
<p>司刻男主日活公因就的是相的界行我時無報有道或成到人生葉令只此有得乎寫能人加過長以法！小裡事風還他沒連，書要的起入來一就。起過我的！</p>
<p>怎的不而！青輕利一頭知現急出不……法見兩，許省頭時模自出水：走觀水我型續開可來臺便星巴具紅子光當。小了動上構引我己國今常你是鄉畫我；全來回安經出相導面得所全文頭室可樣學朋而告。到投獨。長詩指；不我奇它兒但選在有重中認該護了老員多女多進者兩口開問任帶。</p>
</div>

/* CSS */

.form {
  height: 100px;
  background: #8ed58e;
  color: #000;
  width: 500px;
}
p{
  margin-bottom: 20px;
}

> 
> <small>錯誤範例</small>

### 正確範例

<!-- HTML -->

<!-- 善用 padding 推擠與 div 自適應延伸特性 -->
<div class="form">
  <p>我是及，了隨正倒場亞接，轉或走調全事境們行，必事意業；高像活，在她後代其面家操對雖資說然是場今完主族現今術加起務臺過過取並到環流多角讀調落子農！</p>
<p>的兒事得求來車我得完國政：門間張太各更學！速企般面顧是員雖：向即代這市年平後業作你教只上不信上以商子遊都利用面竟心陸士火質說美有是到民個？方樣風教思現入上；道心富他錢。</p>
<p>看神早麗男交一演場活他命時傳於……山在上濟色升？臺的遠方精護。關形夫理寫……回著收元科家見然，主裡英經檢學生性的樣不原劇弟寫，都國生臺孩善的。</p>
<p>司刻男主日活公因就的是相的界行我時無報有道或成到人生葉令只此有得乎寫能人加過長以法！小裡事風還他沒連，書要的起入來一就。起過我的！</p>
<p>怎的不而！青輕利一頭知現急出不……法見兩，許省頭時模自出水：走觀水我型續開可來臺便星巴具紅子光當。小了動上構引我己國今常你是鄉畫我；全來回安經出相導面得所全文頭室可樣學朋而告。到投獨。長詩指；不我奇它兒但選在有重中認該護了老員多女多進者兩口開問任帶。</p>
</div>

/* CSS */

.form {
  padding: 10px;
  background: #8ed58e;
  color: #000;
  width: 480px;
}
p{
  margin-bottom: 20px;
}

> 
> <small>正確範例</small>

## 08. 瘋狂包標籤買保險

:::info
網頁結構越乾淨越好，初學者容易加太多標籤導致閱讀困難
:::


### 錯誤範例

<!-- HTML -->

<!-- 選單結構太雜亂 -->
<div class="wrap">
  <div class="header">
    <div class="menu">
      <ul>
        <li><a href="#"><span><em>選單一</em></span></a></li>
        <li><a href="#"><span><em>選單二</em></span></a></li>
        <li><a href="#"><span><em>選單三</em></span></a></li>
      </ul>
    </div>
  </div>
</div>

/* CSS */

a{
  text-decoration: none;
  color: #fff;
}
.wrap{
  width: 500px;
  margin: 0 auto;
}
.header{
  height: 100px;
  background: gray;
  padding-top: 1em;
}
.menu {
  float: right;
}
.menu li{
  float: left;
  margin: 0 1em;
}
.menu li a{
  display: block;
  padding: 1em;
  background: orange;
}
.menu li a:hover{
  background: blue;
}

> 
> <small>錯誤範例</small>

### 正確範例

<!-- HTML -->

<!-- ul 外面不要再用 div 包起來，class 下在 ul 上，li裡面只需一個 a連結就好 -->
<div class="wrap">
  <div class="header">
    <ul class="menu">
      <li><a href="#">選單1</a></li>
      <li><a href="#">選單2</a></li>
      <li><a href="#">選單3</a></li>
    </ul>
  </div>
</div>

/* CSS */

a{
  text-decoration: none;
  color: #fff;
}
.wrap{
  width: 500px;
  margin: 0 auto;
}
.header{
  height: 100px;
  background: gray;
  padding-top: 1em;
}
.menu {
  float: right;
}
.menu li{
  float: left;
  margin: 0 1em;
}
.menu li a{
  display: block;
  padding: 1em;
  background: orange;
}
.menu li a:hover{
  background: blue;
}

> 
> <small>正確範例</small>

## 09. class 語意命名過於怪異

:::info
class 命名可以非常自由，只要保持語意的正確性就 ok
:::


### 錯誤範例

<!-- HTML -->

<!-- class 都沒有語意性，另外不要用方向性命名方式，例：box-left、box-right，因為在響應式網頁設計時，板塊會跟著移動的 -->
<div class="kk">
  <div class="bb">
    <div class="baby"><a href=""></a></div>
    <ul class="box">
      <li class="box-left"><a href=""></a></li>
      <li class="box-center"><a href=""></a></li>
      <li class="box-right"><a href=""></a></li>
    </ul>
  </div>
  <div class="cons">
    <h1>標題</h1>
    <p>內容內容內容</p>
  </div>
  <div class="qb">
    <p>表尾</p>
  </div>
</div>

> 
> <small>錯誤範例</small>

### 正確範例

<!-- HTML -->

<!--
wrap - 網頁容器
header - 表頭
menu - 選單
footer - 表尾
語意化的 class 名稱也方便日後維護上較容易進入狀況
-->
<div class="wrap">
  <div class="header">
    <div class="logo"><a href=""></a></div>
    <ul class="menu">
      <li class="menubox"><a href=""></a></li>
      <li class="menubox"><a href=""></a></li>
      <li class="menubox"><a href=""></a></li>
    </ul>
  </div>
  <div class="content">
    <h1>標題</h1>
    <p>內容內容內容</p>
  </div>
  <div class="footer">
    <p>表尾</p>
  </div>
</div>

> 
> <small>正確範例</small>