OOCSS, SMACSS

1.  OOCSS容器與內容分離
   https://www.youtube.com/watch?v=SAW4UosA-4o
2.  SMACSS
   a. Base Rules  -- 通常會先清掉瀏覽器預設樣式(用reset.css或normalize.css)，在寫入自己想要的預設樣式
   
   *{
       text-decoration: none;
   }
   
   b. Layout Rules -- 在每頁都有的共通的區塊算做為佈局，佈局樣式還可以根據重用分為主要樣式和次要樣式。用命名區分出針對的樣式(非內容)，用 > 限定影響範圍
   
   .l-grid > li { display: inline-block; margin: 0 0 10px 10px; /* IE7 hack to mimic inline-block on block elements */ *display: inline; *zoom: 1; }
   c. Module Rules -- 每個模塊都應設計為作為獨立組件存在。如果操作正確，則可以輕鬆地將模塊移動到佈局的不同部分，而不會錯誤。
   
   <div class="fld"> <span class="fld-name">Folder Name</span> // 獨立組件 <span class="fld-items">(32 items)</span> // 獨立組件
   <span>123</span> // 可以保有原本span的特性 </div>
   當我們在不同部分中具有相同的模塊時，可以分類class去達成共用
   <div class="pod pod-constrained">...</div> <div class="pod pod-callout">...</div>
   pod-constrained, pod-callout是pop的擴充，且可以重複用在不同的地方
   
   不建議用html tag或id來做選擇器，因為html tag不好獨立開，id會有跟php衝突與只能唯一的情況
   
   https://www.youtube.com/watch?v=7HQg94jxTwM
   d. State Rules -- 通常由js觸發，用作開關
   class="is-hidden"
   class="is-error"
   
   id 權重會比自命名的class要高，所以建議state rules 使用時加上!important。
   
   https://www.youtube.com/watch?v=77SiAoekmeo
   e. Theme Rules
   
   http://smacss.com/book/type-theme

https://cythilya.github.io/2018/06/05/css-methodologies/