ヒューマンリーダブルな CSS記述法
（異異次元編）
HCD-‐‑‒Net認定 ⼈人間中⼼心設計専⾨門家
⽻羽⼭山 祥樹 @storywriter
1
2016年年 5⽉月13⽇日（⾦金金） CodeGrid四周年年記念念パーティー
本プレゼンのデモは https://github.com/storywriter/hrcss で公開しています
αバージョン

2
CodeGrid4周年年、おめでとうございます！
CodeGrid のファンなので、
この場でお話させていただけるのが、
とても嬉しいです。

3
CSS の管理理で困っているなら
試み：
CSSのセレクタ命名は
「⼈人間に指⽰示する」ようにつける

⽻羽⼭山 祥樹 HAYAMA Yoshiki
v インフォメーションアーキテクト
• 使いやすいWebサイトをつくる専⾨門家
• HCD-‐‑‒Net認定 ⼈人間中⼼心設計専⾨門家
v Web業界に20年年くらい
v 担当したWebサイトが、雑誌のWebユーザビリティランキン
グで国内トップクラスの評価を受ける ほか実積多数
v 主な専⾨門分野
• ユーザーエクスペリエンス、情報アーキテクチャ、
⼈人間中⼼心設計、アクセシビリティ、⼤大規模CMS、ライター
Twi$er：@storywriter
WebSite:
storywriter.jp
4
ユーザー⼼心理理を
つかむプロです

5
じつは20年年来のフロントエンドエンジニア
HTML・CSS・JavaScript
1998 2002 2006 20161996 2010 20122004
情報デザイン IA ⼈人間中⼼心設計、UX
サーバーサイド
アクセシビリティ
Web担当者
⼤大規模CMS
品質管理理
ライター20年年来の
フロントエンド
エンジニア
10年年間
⼤大規模サイトの
HTML・CSS
7年年間
⼤大規模CMS

6
CSS は、⼤大規模な環境ほど、保守が難しい
• 数千ページ、数万ページの規模。
• 1つの CSS ファイルが、数千ページから参照される。
• CSS ファイルが散乱している。
• 何⼗十⼈人もが、つねに HTML をさわっている。
• スキルレベルや状況はさまざま。
• 初学者、コードに美学のない制作者、納期優先の実装。
• 制作会社が複数いることが常時。
• 何年年間のうちに、⼈人が⼊入れ替わっていく。
• それでも安定して運⽤用できる CSS の記法とは？

7
CSS は、⼤大規模な環境ほど、保守が難しい
スコープがないから？ 簡易易な⾔言語だから？
先⼈人たちの知恵：
• OOCSS
• BEM
• SMACSS
「領領域」を分けるように命名規則をつくることで、
わかりやすく管理理できるようにする記述法。

8
それでも CSS はこんがらがる
<p class=”header-‐‑‒link">
<a class=”header-‐‑‒link_̲_̲icon" href="#">
リンクテキスト</a>
</p> このコードひとまとまりで
標準のコンポーネント。
絶対に変えるな！
と、あれほど⾔言ったのに

<p class=”header-‐‑‒link">
<a class=”header-‐‑‒link_̲_̲icon" href="#">
リンクテキスト</a>
</p>
9
それでも CSS はこんがらがる
それをするのは、あなたの隣隣⼈人かもしれないが、
4ヶ⽉月後のあなた⾃自⾝身かもしれない。
<a class=”header-‐‑‒link_̲_̲icon" href="#”>
<p class=”new-‐‑‒link">
セレクタ
新設しちゃえ
抜き出して
使っちゃえ

10
それでも CSS はこんがらがる
結局、コードの品質とは、
制作者のモラルとプライドである。

11
それでも CSS はこんがらがる
そのなかでコントロールするには、
CSS の命名規則だけでなく、
HTML のコンポーネント単位で管理理しないと
コードの安定した運⽤用はできない。

12
セレクタの命名は誰のためにするのか
BEM：
セレクタは「⼈人間が読むため」に命名している。
ブラウザが読むだけなら、ランダム⽂文字列列で
<a class=”header-‐‑‒link_̲_̲icon" href="#”>
だって困らない。
<a class=”wfJBaVnFSzSCYb" href="#”>

13
セレクタの命名は誰のためにするのか
つまり
というのは
<a class=”header-‐‑‒link_̲_̲icon" href="#”>
という「⼈人間への指⽰示」である。
「これはヘッダ⽤用のリンクアイコンだ」

14
セレクタの命名は誰のためにするのか
ならば、もっと直接に、
「⼈人間への指⽰示」を
セレクタ名にすればいいのでは？

<p class=”header-‐‑‒link_̲_̲you-‐‑‒can-‐‑‒use-‐‑‒this-‐‑‒
selector-‐‑‒just-‐‑‒only-‐‑‒in-‐‑‒header">
<a class=”header-‐‑‒link_̲_̲icon" href="#">
リンクテキスト</a>
</p>
15
では、たとえば、こんなセレクタ命名
ルールは守られるかもだが、読みづらい。
コードにも、ユーザビリティ（とくに視認性）は重要。

16
ここで仕様書に注⽬目
HTML5：
CSS3:
class 属性のなかは、じつはどんな値を⼊入れてもよい。
CSS として成⽴立立しない⽂文字列列でもよい。
例例：class=“( -‐‑‒⽇日本語 )” も HTML5 としては「適合」
「-‐‑‒」（半⾓角ハイフン）からはじまる⽂文字列列は不不可。
逆にいうと「-‐‑‒」からはじまる⽂文字列列は、
CSS として衝突するおそれがない。安⼼心。
本当にこれそのまま
HTML5仕様書: https://www.w3.org/TR/html/dom.html#classes
CSS3仕様書: https://www.w3.org/TR/css3-‐‑‒selectors/#lex

<p class=”header-‐‑‒link ( -‐‑‒ブロック )">
<a class=”header-‐‑‒link_̲_̲icon ( -‐‑‒テキスト編集の
み可 )" href="#">
リンクテキスト</a>
</p>
17
こう書いたらどうか？
区切切りはいろいろ試したが「( )」の視認性がよかった。
しかも、既存の CSS と共存できる。

<p class=”header-‐‑‒link ( -‐‑‒block )">
<a class=”header-‐‑‒link_̲_̲icon ( -‐‑‒editable )"
href="#">
リンクテキスト</a>
</p>
18
もう少し、受け⼊入れやすくした（海外にも）
くりかえすが（驚くべきことに！）
これは HTML5 の仕様に準拠している。

<p class=”header-‐‑‒link ( -‐‑‒block )">
<a class=”header-‐‑‒link_̲_̲icon ( -‐‑‒editable )"
href="#">
リンクテキスト</a>
</p>
19
なんと、この書式は jQuery でもあつかえる
$( ʻ‘.-‐‑‒editableʼ’ ) で参照できる。
なんと jQuery であつかえる。
もう驚きしかない。

<p class=”header-‐‑‒link ( -‐‑‒block )">
<a class=”header-‐‑‒link_̲_̲icon ( -‐‑‒editable )"
href="#">
リンクテキスト</a>
</p>
20
補⾜足：data 属性を使わず、CSS のみで書く
data 属性を使わない。class 属性（CSS の世界）だけ
に閉じることで、初⼼心者にも馴染みやすい。

21
Human Readable CSS
この記法を、⼈人間中⼼心のコーディングということで、
Human Readable CSS（HRCSS）
と呼ぶことにしました。

22
それでも、それでも CSS はこんがらがる
ここまでやっても、⼤大規模な運⽤用では、
すべてを無視する、
コードにこだわりのない制作者もいる。
そもそも、コードを書かずに、
⾃自然とスタイルガイドをまもった実装ができる
「しくみ（システム、ツール）」があればよい。

23
WYSIWYG HTML Editor の提供
HRCSS に対応した WYSIWYG HTML Editor を、
HRCSS の⽂文法とともに、オープンソースで提供。
https://github.com/storywriter/hrcss で公開。

24
デモ：
WYSIWYG HTML Editor for
Human Readable CSS

25
WYSIWYG HTML Editor の提供
スタイルガイドやコーディング規約だけでは、
解釈が、どうしても制作者により跛⾏行行する。
スタイルガイドとともに、
それをラクに、確実に実装できる「しくみ」
（WYSIWYG HTML Editor）も提供して、
品質を担保する。

26
試み：
CSSのセレクタ命名は
「⼈人間に指⽰示する」ようにつける

27
⼤大規模でも保守しやすい CSS のために
1. セレクタ名は⼈人間への指⽰示のために書く。
2. セレクタのなかに、必要な情報を含める。
3. セレクタは読みやすく、そして理理解しやすく書く。
4. しくみ（WYSIWYG HTML Editor）も提供する。

28
ありがとうございました。
⽻羽⼭山 祥樹 @storywriter

⽻羽⼭山のプレゼンのアレ が、
スタンプになりました！
スタンプ名：ハーミィ（CSS編） 作者名：⽻羽⼭山 祥樹
https://store.line.me/stickershop/product/1228201/ja
Web・CSSネタ
全40種類