１ヶ月後のあなたを幸せにする、CSS設計のアイデア

はじめに

CSSは簡単であるがゆえに、自由に書いてそれっぽく見た目を整えることができてしまいます。
つまり、非常に簡単な反面、破綻のリスクが割とすぐそばにあるとも言えます...
この記事では、１ヶ月後のあなたがひどいコードの修正に悩まされないようなCSS設計の、実戦で生まれた１つのアイデアをシェアします！

そもそもCSS設計について

目的

設計のゴールとして、予測・再利用・保守・拡張がしやすいことがよく言われます。
簡単にいうと、他の範囲に依存しておらず、拡張しやすいことを目指そうという感じですね。

使用される手法

• OOCSS
• SMACSS
• BEM

上記の設計手法の他にも様々な手法が作られて来ましたが、だいたい共通して言えるのはコンポーネント設計を実現するという点です。
コンポーネント設計とは、CSSのスタイリングを機能や振る舞いで（依存関係を作らず・拡張しやすく）分離しつつ実現して行くもので、適切に使用することにより上に書いたような目的を果たすことができます！

１つのアイデア（SWICSS）

そのように、責務ごとに分離したCSSを実現するための手法として、SWICSSを紹介します。
SWICSSではその責務を３種類に分け、ロジックを明確に分離させます。

３種類の責務

• 要素:　　　　HTML構造内の、最小単位の構成品
• コンポーネント: 要素から成る、使い回し可能な１つのまとまり
• レイアウト:　　要素やコンポーネントを実際に配置する上で必要となるラッパー

持つべきスタイリング情報

• 要素:　　　　その要素が独立して存在するための情報
• コンポーネント: 単一もしくは複数要素をコンポーネントとして使用するための情報
• レイアウト:　　要素やコンポーネントを配置させるための情報

使用例

見た方がイメージがつくと思うので、以下のようなページを作成しながら説明してみようと思います。

SWICSSなしの実装

before.html

<div class="blog_panel">
  <p class="blog_panel_title">ブログタイトル１</p>
  <p class="blog_panel_text">ブログ本文......ブログ本文...</p>
  <button type="button" class="blog_panel_btn">ボタン</button>
</div>

before.css

.blog_panel {
  color: skyblue;
  border-bottom: 1px solid black;
  margin-top: 30px;
  width: 300px;
}

.blog_panel_title {
  font-size: 20px;
  margin-bottom: 20px;
  margin-left: 10px;
}

.blog_panel_text {
  font-size: 14px;
  text-align: center;
  padding: 0 50px;
  margin-bottom: 10px;
}

.blog_panel_btn {
  border: 1px solid black;
  padding: 5px 20px;
  text-align: center;
  margin-bottom: 30px;
  margin-left: 10px;
}

SWICSSありの実装

after.html

<div class="blog_panel_layout">
  <div class="blog_panel">
    <div class="blog_panel_title_layout">
      <p class="blog_panel_title">ブログタイトル１</p>
    </div>
    <div class="blog_panel_text_container_layout">
      <div class="blog_panel_text_container">
        <p class="blog_panel_text">ブログ本文......ブログ本文...</p>
      </div>
    </div>
    <div class="blog_panel_btn_layout">
      <button　class="blog_panel_btn">ボタン</button>
    </div>
  </div>
</div>

after.css

.blog_panel { /* コンポーネント */
  border-bottom: 1px solid black;
  margin: 0 auto;
  width: 300px;
}
.blog_panel_layout { /* blog_panelコンポーネントのレイアウト */
  margin-top: 30px;
}

.blog_panel_title { /* 要素 */
  color: skyblue;
  font-size: 20px;
}
.blog_panel_title_layout { /* 要素のレイアウト */
  margin-bottom: 20px;
  margin-left: 10px;
}

.blog_panel_text { /* 要素 */
  color: skyblue;
  font-size: 14px;
}
.blog_panel_text_container { /* textコンポーネント */
  text-align: center;
  padding: 0 50px;
}
.blog_panel_text_container_layout { /* textコンポーネントのレイアウト */
  margin-bottom: 10px;
}

.blog_panel_btn { /* 要素 */
  border: 1px solid black;
  padding: 5px 20px;
  text-align: center;
}
.blog_panel_btn_layout { /* 要素のレイアウト */
  margin-bottom: 30px;
  margin-left: 10px;
}

変更点

• marginなど、要素やコンポーネントを配置するための責務がレイアウト(_layout)に分離された
• コンポーネントが正しく（配置のための責務が分離されたなど）作成され、使い回せるようになった
• colorやfont関係などが要素に当てられ、その要素自体が独立して存在することができるようになった（親要素などに依存しなくなった）

このように、CSSをコーディングして行く上で３種類の責務を明示的に分離することができれば、変更に強くメンテナンスしやすいコードを作成することができます。
もし配置を変えなければ！！、となればレイアウトのクラスのCSSのみ変更すればそれだけですみます。
また、別の場所にこのコンポーネントを使い回したければ、そのコンポーネントを別の場所にペーストし、その場所特有の配置があればまたレイアウトラッパーで囲って配置のロジックを書けば簡単に使用することができます。

最後に

命名規則などは今回あまり触れませんでしたが、今回のメインではなかったので皆さんのプロジェクトに合ったものを適宜使用し、カスタマイズしながらこのSWICSSを使っていただければ幸いです。
フィードバック、いいね等お待ちしています！！