ヒューマンリーダブルな CSS 記述法（異次元編）：2016年5月13日 CodeGrid 四周年記念パーティー

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

16. 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

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

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

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

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

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

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

23. 23 デモ： WYSIWYG HTML Editor for Human Readable CSS

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

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

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

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

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

ヒューマンリーダブルな CSS 記述法（異次元編）：2016年5月13日 CodeGrid 四周年記念パーティー

Yoshiki Hayama

ヒューマンリーダブルな CSS 記述法（異次元編）：2016年5月13日 CodeGrid 四周年記念パーティー