by ryou

ブログテーマを作りなおした

このブログはWordpressで構築してるのですが、1年ほど前に作ってからテーマの修正をほとんどせず放置気味だったので、これからは継続的に弄っていこうと思い手始めにテーマそのものをデザインは据え置きで中身を構築しなおしました。

以前との変更点

  • タスクランナーにGulpを使用
  • CSSの命名規則をSMACSS+BEM(マルチクラス)に
  • GitHubにリポジトリを作成(ここ

タスクランナーにGulpを使用

以前はMiddlemanを使用していたのですが、現在は仕事でGulpを使用していることから、こちらでもGulpを使用することに。

jadeを使用してWordpressに組み込む前段階まで作成していたのですが、なんとなくjadeのままWordpressテーマを作成したくなったのでワンソースで静的サイト、Wordpressテーマの出力の切り替えが出来るようになってます。

# 静的サイトのビルド&監視
gulp static

# WordPressテーマのビルド&監視
gulp wp

やってはみたものの、やはりjadeのソースが結構見難くなってしまったので、個人でやる分ではともかく複数人でやる場合はこんなことは絶対しない方が良いですね。

CSSプリプロセッサにstylusを使うことも考えたのですが、結局sassを使用することに。(Bourbon/Neatを後々使いたくなる気がしたので)

CSSの規則をSMACSS+BEM(マルチクラス)に

SMACSSのモジュールレイアウトにBEMを使用した上で、なんでもかんでもモジュールとして定義しない方針に。(SMACSSはページを構成する殆どの物はモジュールレイアウトに属する、という方針のはずなのですが)

あくまで再利用する可能性が高いもののみモジュールとして作成し、各ページにしか必要なさそうなスタイルは「(ページ名).sass」で作成したファイルに記述していく方針に。

命名規則はキャメルケース

あと命名規則はスネークケースが主流な感じがしますが、スネークケースでBEMを使うとクラス名が長くなりがちなのでキャメルケースで。

// こんな感じ
.mBtn
  .mBtn_txt
  &.mBtn-blue

GitHubにリポジトリを作成

ここです。

srcディレクトリがビルド前のソース、distディレクトリが静的サイトの出力先、wp_themeディレクトリがWordpressテーマの出力先です。

以上

gulpfileやjadeソースが、試行錯誤色々した結果汚くなってしまってるので、次はまずそこの整理から始めたい。