CSS の設計

概観

CSS の設計は CSS 設計手法 BEM を参考に、細分化したものです。

クラス名と ID 名が冗長になる問題がありますが、最終的に minify されるため問題にはなりません。クラスと ID の分類が分かりやすいように、積極的に長い名前を付けていきます。セレクタが深くならないという長所を活かすことが出来ます。

各カラーモードに対応するモジュールやパーツが色の上書きを減らすために、変数で色の管理をしています。

リンク要素は複数のインタラクションを持ちます。この各インタラクションが必ず画面の変化を伴うように設定します。

最後に、チェックシートとオールキャストページを使って確認します。

各フォルダの紹介

src/scss/ 下の各フォルダの説明です。

1. Variable 複数のファイルで使用する $VAR
2. mixin 複数のファイルで使用する @mixin
3. リセット reset, reset.form
4. タイポグラフィ, インタラクション, 入れ子
5. テーマ
6. コンテナ
7. パーツ
8. モジュール
9. articleBody
10. articleFooter
11. ライブラリ用のスタイル

1. 変数

ビルド用のフラグ、色、サイズがあります。

2. mixin

3. リセット

4. タイポグラフィ

5. テーマ

6. レイアウト

7. パーツ

8. モジュール

min-Module, min-Module_item--modifier

11. ArticleBody 下のスタイル

10. ArtickeFooter モジュールのアイテム

11. ライブラリ用のスタイル