OOCSSに関して

LP制作でベターだと思った思想として記載します。

OOCSSでのCSS管理する方法

管理するにあたってまず３つに分類します。

base

• １つの要素だけのスコープを切ってスタイルを当てる

  • 要素そのものを指定しているので、その指定しているタグ自体に必ずスタイルが当たるもの

  • 言い換えれば、土台になるもの

global

• 他のセクションでも使い回しができそうな見た目のもの

local

• 使い回しができないもので、その部分にしか当てないもの

  • 基本的に`大分類 中分類 小分類`みたいにパスのように指定することで可読性を意識して記述する

説明を踏まえた例

/** base **/
* {
  box-sizing: border-box;
  font-size: 14px;
  color: #333;
}
img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
a {
  display: block;
  text-decoration: none;
}

/** global **/
.button {
  hogehoge
}

/** local **/
header .nav .button {
  hogehoge
}

CSSを管理するルールを明確化しないと混乱を招くので、徹底して見てください。