從開始切版，我最容易遇到的問題就是⋯ 扣很髒很亂
今天打的程式碼睡一覺醒來後就完全看不懂程式碼在寫些什麼
切版都用不一樣的標籤，今天用header明天用top後天用up
別人打開自己的版想參考參考卻完全看不懂哪些class是做什麼用的
讓我深深覺得，再這樣下去不行！一定要想個辦法才行！
在GOOGLE上頭東搜西查，找到了有關設計模式與架構化

架構化就是制定一套規範，讓大家照著規範來進行撰寫與編輯

可是⋯為什麼要這麼做呢？
這麼做可以維持CSS樣式的可維護性、可讀性、延展性
只要保持這樣的撰寫習慣，隔天早上醒來就不會看不懂自己在寫什麼啦！

這邊使用的是OOCSS跟BEM的規範
簡單的介紹一下這兩個

OOCSS
他的兩個O分別是
O=>Object
O=>Oriented
又被稱為物件導向

OOCSS有兩個大原則
結構(Structure)與樣式(Skin)分離
容器(Container)與內容(Content)分離

把東西全部都寫在一起的話會像這個樣子

#box{
  width: 500px;
  border: solid 1px #000;
  background: #aaf;
  box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 5px;
}

#button{
  width: 100px;
  height: 50px;
  padding: 10px;
  border: solid 1px #000;
  box-shadow: rgba(0, 0, 0, .5) 5px 5px 5px;
}

把結構與外觀分離

.box{
  width: 500px;
}

.button{
  width: 100px;
  height: 50px;
  padding: 10px;
}

.skin{
  border: solid 1px #000;
  bacdground: #aaf;
  box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 5px;
}

容器與內容分離

<div class="box">
  <div class="box-img">
    <img src="...">
  </div>
  <div class="box-content">
    <p></p>
  </div>
</div>

這樣的做法好處是可以增加CSS的複用性，相同樣式東西只要套用同一個CSS就可以很輕鬆簡單的做樣式修改
Bootstarp就是個很棒的OOCSS例子，樣式都寫在CSS上面讓你自行套用
讓你編寫網頁的時候就像點菜一樣！
我要這個跟這個，不管是哪個廚師甚至不進廚房的人都能端出一模模一樣樣的菜色！

可是過度使用就會像Bootstarp一樣讓HTML的長度大幅增加也讓閱讀跟管理難度增加！