Notes
「REMM」の要約やコンセプト、特性についての説明と、コーディングに関するコラムです。
REMMの特性
「REMM」は、同じ記法を使いながらも、プロジェクトごとに異なるスタイリングアプローチを採択できます。
利用方法・コーディングのガイドとして「Guide｜CSS設計パターンガイド」などの情報を掲載していますので、是非ご参考ください。
ドキュメントの方針
このドキュメントは、学習の二次コスト（現場や環境に伝播・浸透させるための時間）を低減するために作成しています。
様々な設計手法をご存知の方であれば、回りくどく感じるかもしれませんが、多くの事例を掲載することによって、ビギナーからベテランまでより多くの方のコストを軽減できるよう心がけています。
ルールや概念の伝達、方針の共有などに必要であれば、外部の参照用ドキュメントとしてご自由にお使いください。
Column
REMMのコンセプト・方針
REMMは以下の方針によって考案されたものです。
- 脳がルールを受け入れやすく、フレキシブルに思考・反応・判断できる概念であること
- 予測しやすさ、冗長さ回避、拡張しやすさ、影響分離をバランスよく「良いところ取り」できること
- 同じ記法でサイトやプロジェクトの特性に応じて設計を切り替えられること
手法に振り回されることなく、少量のルールによって業務効率を改善する試みです。
使用する単語や文字列の重要性
人の「予測しやすさ」を確保するためには単語の連結ルールも重要ですが、それよりも「どんな単語や文字列を選択し、どのように認識を一致させるのか」といったことの方が遥かに重要です。
これについての考察、手法は、今後別の機会（サイト）で詳しく紹介する予定です。
ケバブケースへのこだわり
「REMM」における単語や文字列の区切りは「-」（ハイフン）を利用しています。
以下のような理由で定めたものです。
- 一般的なキーボードにおいて、補助キーなしで入力できる
- 主要単語の連結に、キャメルケース（パスカルケース）とスネークケースの両方が使える（選べる）
- エディタ上でテキストをダブルクリックした時に「-」で選択が止まるため、構造単位で単語を選択できる
- CSSフレームワークの多くがケバブケースを採択しており、併用したときの読みやすさを保ちやすい
次世代までの効率化
2019年中頃の現在、命名を半自動で一意化して出力する仕組み・ツールや、プロトタイピングツールによるコード出力機能やアセット取得機能など、フロントエンド・エンジニアリングの環境はめまぐるしく進化し続けています。
特定の現場ではこういった「概念によるCSS制御」の仕組みは不要かもしれません。
いずれCSSのプロパティ汚染の話など、「古い時代の昔話・笑い話」として語られる時代が来るのでしょう。
しかし今はまだ「人が概念をもってCSSを制御しなければならない現場」は多いのではないでしょうか。
「コードは機械が自動出力し、変更にも強く、問題は何も起きないのが業界標準」
そんな環境が整うまでの間、この手法がいずれかの現場でお役に立てれば幸いです。