フロントエンドエンジニア暦3年目がCSS設計を1年実践してみてどう変わったか #CSS

クリスマスまで1週間、年明けまで2週間を切ってしまいましたね。

実は私、フロントエンドエンジニア暦3年目にして、ようやくCSS設計を取り入れたコーディングをするようになりました。
この記事では、CSS設計手法のひとつであるPRECSSについてざっくりなご紹介・個人的お気に入りポイントと、
私がこの1年間でCSS設計を使ったコーディングを実践してきて感じた「良い」変化について書いていきます。

まえおき

CSS設計について学ぶにあたり、下記書籍とWebサイトを参考に勉強しました。

いまでも設計について迷うときは、上記を何度も読み返してます。
「詳しくCSS設計について知りたい！学びたい！」という方は、ぜひ上記を参考にしてみてください。

PRECSSについてざっくりご紹介

PRECSS（プレックス）

prefixed CSS（接頭辞付きCSS）の略

特徴

名前の通り、すべてのクラス名に役割を応じた2文字の接頭辞をつける

基本設計

CSSを役割に応じて下記6つのグループに分類

1. ベース

接頭辞：なし
サイト全体にまつわるスタイルを要素セレクタに直接指定する

2. レイアウト

接頭辞：ly_（layoutの略）
ヘッダー、ボディエリア、メインエリア、サイドエリア、フッター等の大きなレイアウトを形成する要素

3. モジュール

1. ブロックモジュール

接頭辞：bl_（blockの略）
複合モジュール（いくつかの子要素をもつ、ひとかたまりのモジュール）
ひとつの塊として持ち運び可能

2. エレメントモジュール

接頭辞：el_（elementの略）
最小単位のモジュール（ボタンやラベル、見出し等）
どこにでも埋め込むことが可能

4. ヘルパー

接頭辞：hp_（helperの略）
基本的に1つのスタイルのみ
「ここのスタイルだけ調整したい」というような場合に用いる

5. ユニーク

接頭辞：un_（uniqueの略）
ある1ページでしか使用されていないことを明示するグループ

6. プログラム

接頭辞：js_（JavaScriptの略）
- JavaScriptにて要素を取得するためのクラス
接頭辞：is_（英語のbe動詞のisから）
- 要素の状態を管理するためのクラス

※ PRECSSについて、詳しい使い方やルールについては「まえおき」でご紹介した書籍・Webサイトをご参照ください。実践的なコードも紹介されてます。

PRECSSの個人的お気に入りポイント

PRECSSを使ってて便利だなーと感じた特徴は下記です。

1. クラス名で使用する単語は意味や可読性が損なわれない限り省略可能

Google HTML/CSS Style Guideに基づくことを推奨
Emmetのショートハンドに準じて省略可能
- 例：「 __backgroundColorOrange 」→「 __bgcOrange 」
「まえおき」でご紹介した書籍・Webサイトでよく使われる省略語の例が提示されてるので迷ったとき参考にできて便利
（Webサイトだとこちらで紹介されてます）

2. プロジェクトに応じて柔軟に接頭辞と共にグループを追加できる

例１：columnの略として「.cl_4」、「.cl_6」
例２：ブラウザ幅ごとに有効なクラス名として「.lg_」（デスクトップ幅）、「.md_」（タブレット幅）、「.sm_」（スマートフォン幅）

3. ヘルパークラスが便利

痒い所に手が届く（特定箇所の余白の調整、色変更、text-alignの調整など）
私は、実装の初めの方で使えそうなヘルパークラスを作成しちゃいます（下記例）

テキスト水平位置用ヘルパークラス

.hp_taCenter {
  text-align: center !important;
}

.hp_taLeft {
  text-align: left !important;
}

.hp_taRight {
  text-align: right !important;
}

文字色用ヘルパークラス

.hp_colorBlack {
  color: #000 !important;
}

.hp_colorRed {
  color: #f00 !important;
}

余白用ヘルパークラス

.hp_mt10 {
  margin-top: 10px !important;
}

.hp_pb20 {
  padding-bottom: 20px !important;
}

インデント用ヘルパークラス

.hp_ti1em {
  padding-left: 1em !important;
  text-indent: -1em !important;
}

CSS設計を1年間実践してみて変わったこと

1. 作業の効率化

PRECSSのルールに従って実装していく中で、次第にモジュールの作り方のパターンがみえてくるようになった
→ 結果、コードが書きやすくなり、コーディングスピードが上がった

2. コードの拡張性・保守性・品質アップ

後で変更が入ったときに修正に困ることが減った
客観的にわかりやすいコードが書けるようになった（気がする）
自分が書いたコードを見返したときに「なんでこんな書き方してたんだっけ・・？」と思うことが減った

3. 自分が書いたコードに少し自信を持てるようになった

自己流でモジュール作ってたときは、「これで本当にいいのか・・？」という不安があった
「PRECSSを使って書いている」という根拠がある

まとめ

今年に入り複数ページにわたる中規模サイトを制作する機会が増え、
CSS設計を実践してみて恩恵を感じることが多かったので、本腰入れて学習してよかったと思った1年でした。

LPや短期的な案件であれば、CSS設計を使う必要はそこまでないと思いますが、
「CSS設計をつかったコーディングをこれから始めたいな」と思ってる方は、使い方に慣れるまで時間がかかると思うので、
まずは小規模案件で少しずつ練習して慣れていくのがいいかなと思います。

私もまだまだ修行中なので、今後もよりよいコードを書けるように精進します。

最後まで読んでいただきありがとうございました。
クリスマス・お正月に備えて、みなさまどうぞご自愛ください。

フロントエンドエンジニア暦3年目がCSS設計を1年実践してみてどう変わったか