CSSファイルは複数ファイルに分けたほうがよいのか

この記事が良ければ、ぜひシェアお願いします

国内外の無料・有料のWordPressのテーマを見て、日本語を基本としてサイトを運営する場合には一度シンプルなテーマを作成して、それをベースに拡張していく方が柔軟性も高いんじゃないかと思い、【WordPressテーマ作成】として連載を個人で始めましたが、参考テーマをデフォルトのテーマである”Twenty Eleven 1.3″を元に進めていたので、XHTMLの構造の理解に続いてはCSSの中身を見ていたのですが、あまりに行数が多くて疲れてきてしまいました。。。(笑)

それも、この”Twenty Eleven 1.3″のスタイルシートである”style.css”が、コメント分や空白行も含めてですが、『2680行』もあるからです。このテーマの前のデフォルトだった”Twenty Ten 1.3″の”style.css”が『1359行』だったので、うっかり倍近く量が増えている訳です。

テンプレートが増えていることが要因にあると思うのですが、さすがにこの量を全て把握するのは時間が勿体ないと思ってしまいました。また、書き方がコンテントによって微妙に異なるので、その点でもガイドラインにするには難しいと考えました。

そこで、『CSSファイル、つまりスタイルシートは複数ファイルに分けたほうがよいのか?』と考えました。

WordPress上でのスタイルシート編集という観点

WordPressでサイトを運営していく上では、個人的にはスタイルシートは集約して1ファイルにした方が良いのではないかと考えています。理由は、「外観」>「テーマ編集」で手を加えるときに、CSSファイルが複数枚あると、どのファイルをいじったらわかりにくくなってしまうからです。1ファイルにまとめて、コンテント毎にコメントを適切に入れておけば、管理はしやすいのではないかと考えます。ただこれは、運用する人がXHTML+CSSにそこまで詳しくない、という前提ベースで考えた場合です。

でも、さすがに3000行近くのスタイルシートをテキストエリアで編集するイメージはそんなに浮かばないですよね。。。(^^;
以前、1テンプレート毎にスタイルシートを1枚以上作ってきたデザイン会社と会ったときは、ぶっとんでるなぁと思いましたが(笑)

例とさせて頂いて恐縮なんですが、WEBクリエイターボックスの中の人であるManaさんが作成されて公開しているテーマを拝見させて頂きましたが、『466行』と簡潔にまとめられています。これなら管理する上でも、カスタマイズする上でも分かりやすくていいなぁと思いました。

>無料WordPressテーマ「New World」作りました | WEBクリエイターボックス

複数のCSSファイルに分けるメリット

こちらも個人的な意見になるのですが、『テーマを作る側』、あるいは『カスタマイズを頻繁にする側』から見た場合には、スタイルシートの行数が多すぎる場合には、複数ファイルした方がやはり分かりやすいのではないかと思います。CSSリセットや印刷用CSS、特定のテンプレート向けのCSSなど、あまり修正をしないCSSが含まれていると、分かりにくくなったしまうのではないかと考えます。

また、参考にさせて頂いたサイトにも書かれていましたが、【余分なものを読み込ませない】ということも理由にあります。スマートフォンが普及するにつれて、表示速度を速めるためにはなるべく軽量化した方が良いです。また、そもそも表示速度を速めた方がユーザーの満足が上がる、というのはマーケティング観点でも有名な話です。(Amazonではページ表示速度が0.1秒遅くなると1%売り上げが減り、Googleでは0.5秒遅くなると、検索数が20%減少すると聞いた事があります。)

>サイト高速化でコンバージョンは上がる!高速化したサイトの実証実験結果公開!

CSSファイルを分ける場合には、import.cssを作って分ける方法が一般的だと思います。

@charset "utf-8";
@import url(common.css);
@import url(post.css);
@import url(pring.css);

参考サイト : CSSファイルどう分ける? | Hato-Style
参考サイト : スタイルシートを分けて管理する方法をまとめる
参考サイト : CSSファイルの分割 | d-spica
参考サイト : CSS、サイト作成の際にCSSを複数に分ける | Andante

WordPressでは、CSSファイルをどうするのがよいのか?

運営観点、作成/編集観点それぞれで考えると、「じゃあ、どうすればよいんだ!?」となりますよね。CSSファイルを分割することで、却って煩雑になる可能性もあるので、微妙なところではあります。なので、CSSファイルのボリュームや、作成者が複数人になるかで、1枚にまとめるか複数に分割するかを決めるべきかなぁと思います。

考えうるコンテントとしては、こんなところかと思います。

  • CSS-Reset(CSSリセット)
  • Structure(構造)
  • General(全般/一般)
  • Header(ヘッダー)
  • Menu(メニュー)
  • Post(記事)
  • Comment(コメント)
  • Pagenavi(ページナビゲーション)
  • Footer(フッター)
  • Widget(ウィジェット)

全然答えにはなっていないかもしれませんが(笑)、シンプルなテーマであれば1枚のCSSファイル、機能性やテンプレートが複数あるような手の込んだテーマであれば、複数のCSSファイルに分割するのを検討する、のが良いと思います。

私の場合はとりあえず1枚で進めてみたいと思います!
 

スポンサーリンク

この記事が良ければ、ぜひシェアお願いします

もぐ
年齢 : 30代半ばの1児の新米パパ。ITネットワークから始まり、WEBディレクター、WEBシステム系のプロマネ、データ分析など色々やってるエンジニアです。WordPress、Webサービス構築、BIツール、IoTなどがトレンド。新しくて面白い仕事募集中。
スポンサーリンク

コメント

  1. […] が増えることについては、別記事をぜひ閲覧ください。 […]