by ryou

アイコン付きテキストコーディングパターン

要件

下記画像のような見た目を実現するHTML/CSS(リンクテキストじゃない場合は、アンダーライン抜きのテキスト)

スクリーンショット 2016-01-11 20.44.12

パターン

シンプルパターン

メリット

シンプルな構造のため、わかりやすい。

デメリット

柔軟性に欠ける。

後述のモジュールパターンのように、テキストの途中でアイコンテキストを入れるといった用途に使えない。

モジュールパターン

メリット

汎用性を高めるために、BEMを使用してモジュール化。(極力リセットするCSSを書かないようにするという原則のためにwithIndentモディファイアを作成)

デメリット

汎用性のために複雑になってしまっている。インデント有りのアイコンテキストしか使わないような状況の場合は無駄。

どちらが良いか

そのサイトが汎用性のあるアイコンテキストを必要としているか否かに依存。

汎用性のあるアイコンテキストが必要な場合や、自社で保守・運用する(もちろんドキュメントを用意する前提)場合はモジュールパターンの方が良い場合が多い。

逆に、納品して終了といった場合はシンプルパターンで十分なことが多い。(モジュールパターンで作成してしまうと、クライアントの担当者にモジュール化の意図が伝わらず、逆に保守性が下がる可能性が高い。)