脱CSS無法地帯！！CSS設計を取り入れてWebサイトのメンテナンス性を向上！

ジーピーオンラインのフロントエンドエンジニア、コウモリ男爵です。
単純に書くだけであれば簡単なCSSですが、その場しのぎの自分ルールのCSSを書いていると、中規模以上のWebサイトになると、運用期間が長くなるにつれて、管理するのは難しくなってくるものです。誰が見ても理解しやすく管理しやすいコードを記述しておくことは、その後の作業効率にも大きく関わってきます。
この記事では、CSS設計の概要と弊社が使用しているFLOCSS（フロックス）という設計手法についてご紹介したいと思います。

ジーピーオンラインにWebサイト制作の相談をする

CSS設計とは

CSS設計とは、CSSのメンテナンス性や作業の効率化のためのHTMLクラス名の規則と、CSSのコードの管理方法の考え方です。
良いCSSの条件として「予測しやすい」「再利用しやすい」「保守しやすい」「拡張しやすい」の4つがあげられます。後々の作業で困らないように、制作ルールに沿った設計手法で構築することで、作業の効率化と全体のクオリティの統一を図ることができます。

CSS設計を取り入れるメリット

CSS設計を取り入れるメリットとして以下が挙げられます。

• 大規模サイトや複数人作業時のクオリティを担保
• メンテナンス性が向上することによる作業の効率化

大規模サイトや複数人作業時のクオリティを担保

大規模サイトになってくると複数人で作業することが多くなります。そういった時に陥りがちなのが、それぞれが自分のルールで制作してしまうために、同じようなCSSが複数個所に記述されていたり、ページによってスタイルが異なったりしてしまうケースです。

また、そのようなコードが整理されていないWebサイトでは、他の人が作業するときに時間がかかったり、関係のないページに影響が出てしまうこともあります。CSS設計を正しく取り入れて、コーディングに必要なパーツをコンポーネント化することで、Webサイト全体のスタイルルールを統一し、他の人が作業してもクオリティを担保することができます。

メンテナンス性が向上することによる作業の効率化

正しいCSS設計手法が取り入れられたWebサイトでは、更新時にも修正箇所が明確になっているのでメンテナンス性が高いです。制作の初期段階ではコンポーネントの作成に時間がかかりますが、ある程度コンポーネントが出来てしまえば、パーツ化されたコードを組み合わせていくことで、新規ページがほぼ出来上がることもよくあることなので、作業の効率化になります。

さまざまなCSS設計手法

• OOCSS
• BEM
• SMACSS
• MCSS
• FLOCSS 　等

さまざまなCSSの設計手法があり、それぞれの手法を組み合わせた独自の設計手法を用いているケースもあります。
他の人が制作したWebサイトを更新する場合は、自分がそのWebサイトを破綻させてしまわないためにも、レギュレーションやサイト全体の構造を把握して、どのようなルールで作られているかを理解する必要があります。そのためにも、どのようなCSS設計手法があるかを把握しておくことは大事なことだと考えます。弊社では、採用しているサイトが多いことと、導入のしやすさから、FROCSSを採用してWebサイト制作をおこなっています。

FLOCSS(フロックス)とは

まず、FLOCSSを初めて聞いたという方に意味を押さえておきましょう。

FLOCSS（フロックス） は、OOCSSやSMACSS、BEM、SUitCSSのコンセプトを取り入れた、モジュラーなアプローチのためのCSS構成案です。

FROCCSのメリット

• OOCSS, SMACSS, BEM, SuitCSS, MCSSなどの考え方の良いとこどりをした設計手法なので比較的扱いやすく導入しやすい
• コンポーネントが他の案件でも再利用しやすい
• マルチクラスのFLOCSSは、同じ名前のblock要素を何度も書く必要がありますがSassだと「&」を使って記述できるので、Sassとの親和性が高い

▼Sassの記述例
.c-media {
  position: relative;
  &__img {
    width: 40%;
  }
  &__body {
    width: 60%;
  }
}
▼コンパイル後のcss
.c-media {
  position: relative;
}
.c-media__img {
  width: 40%;
}
.c-media__body {
  width: 60%;
}

• 「Component」なら「c-」、「Project」なら「p-」、「Utility」なら「u-」といった風にそれぞれのクラスに接頭辞を付与するので、ソースを見ている時点でどこにCSSが書かれているかの見当がつきやすい

<a class="c-btn" href="#">詳しく見る</a>

クラス名が「c-btn」の場合、css/object/component/_btn.scssに記述されてることが予想できます。

まとめ

今回はCSS設計とFROCSSをご紹介させていただきました。
サイト制作において、CSS設計をしっかりしておくことは、Webサイト全体のクオリティを担保するとともに、制作後の運用にも大きく関わってきます。弊社では制作後もメンテナンスしやすいWebサイト制作を心がけています。興味を持たれた方は、ぜひお気軽にご相談ください！

ジーピーオンラインにWebサイト制作の相談をする