コンポーネントとタイポグラフィの分離 #CSS

コンポーネントに適用するスタイルを以下のように分けてみる。

配置 (position, float, margin 等)
構造 (width, height, padding 等)
見た目 (border, background, box-shadow 等)
文字 (font, color 等)
その他 (display, content 等)

「配置・構造・見た目」はコンテナへの指定だけど、「文字」はコンテンツへの指定。ここを分離することで良いことが起きないだろうか。

タイポグラフィ（英: typography）は、活字（あるいは一定の文字の形状を複製し反復使用して印刷するための媒体）を用い、それを適切に配列することで、印刷物における文字の体裁を整える技芸である。
(https://ja.wikipedia.org/wiki/タイポグラフィ)

コンポーネントが再利用性を想定するように、テキストスタイルもパターン化して用いたい。文書構造だけでなく、前後の関係や言いたい内容、見た目や配置先のスペースなどから派生することもある。
これをコンポーネントに点在させると管理しきれないし (そのために値を変数化する)、細かい指定の差はデザイナーじゃないと気づけない。

→ タイポグラフィのうち (全部は無理なので) ヒエラルキーを形づくるためのスタイルを別で管理して、カスタムデータ属性で指定してみたい。

※カスタムデータ属性を用いるのは、コンポーネント側のclassと衝突しないこと、テキスト要素の意味性 (見出しと段落だけでなく) を補強できること、単純に記述の見通しがよくなること、どうせ分離するならしっかり分けたい、などから。

コンポーネントから分離する主なプロパティ

font-family
font-weight
font-style
font-size
letter-spacing
line-height

※color, text-alignなどはコンテナ側に残した方がいいかもしれない。この辺の精査は必要。

命名規則

[data-type="namespace-typename--modifier"]

※ECSSを参考にして名前空間を持たせた。

例

HTML

<div class="heroimg">
    <div class="heroimg__content">
        <h2 data-type="heroimg-title">LOREM IPSUM</h2>
        <p data-type="heroimg-lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href="#" class="heroimg-button" data-type="button-label">Button</a>
    </div>
</div>

Component CSS

.heroimg { 
    position: relative; width: 100%; height: 50vw; margin: 0 auto; 
    background: #eee url(lorem.jpg) no-repeat center center; background-size: cover; }
.heroimg__content { 
    position: absolute; top: 50%; transform: translateY(-50%); width: 35%; 
    margin-left: 5%; padding: 2em; background-color: rgba(0,0,0,0.8); color: #fff; }
.heroimg-button { 
    display: inline-block; margin-top: 1.5em; padding: 0.5em 1.25em;
    border: 1px solid #fff; color: #fff; }

Typography CSS

[data-type="heroimg-title"] { 
    font-family: "Bold"; font-size: 2rem; line-height: 1.25; }
[data-type="heroimg-lead"] { 
    font-family: "Thin"; font-size: 1.125rem; line-height: 1.75; letter-spacing: 0.05em; }
[data-type="button-label"] { 
    font-size: 1rem; line-height: 1.25; }