スタイルガイドって知ってますか？
スタイルをガイドしてくれるやつです
こんなのを動的に生成してくれます
SCSSファイルにコメントとしてこういうのを書きます
そして、コンパイルすることでさっきのようなHTMLを生成してくれます
---
name: head通常
category:
- typography
tag:
- sp
---
通常ページ（/ryugaku, /working-holiday）以外の見出しデザインです
｀｀｀html
<div class="sp">
<section class="standard">
<h1>h1の見出しです coming soon</h1>
<h2>h2の見出しです</h2>
<h3>h3の見出しです</h3>
<h4>h4の見出しです</h4>
</section>
</div>
｀｀｀
こんなのも作れます
何ができるのか
デザインを管理できるようになる
実際の見た目とHTMLのマークアップを一緒に見れる
何が嬉しいか
作業効率の向上と一貫したデザインの作成を狙う。
そして脱属人化。
- 類似パーツが量産される
- エレメント・パーシャルの量産
- 見た目は同じなのにHTML/CSS(実装)が違う
- フォント・色がページによってまちまち
- ページ作成依頼時に過去のデザインを参考にできない など
荒れ放題、好き放題、ワガママ<body></body>に一石を投じたい（希望）
副産物
- CSS（SCSS）にコメントを書くことになるので、単純に可読性UP
- CSSを小さく区切りたくなるので、取り回しがよくなる
- スタイルガイドを書く単位でpartialにしたり、粒度の目安にできる
- 開発依頼の時に、非エンジニアがデザインカタログ的な使い方
昨今のコンポーネント化ってやつと相性がいいんじゃないかな
ただし
- 保守コスト 増
- 工数 増
性質的にはテストコードと近いものを感じます
だた、やっぱり属人化の排除には一役買ってくれるんじゃないかと思います