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

ヒューマンリーダブルな 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 はこんがらがる

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

9
それをするのは、あなたの隣隣⼈人かもしれないが、
4ヶ⽉月後のあなた⾃自⾝身かもしれない。
<a class=”header-‐‑‒link_̲_̲icon" href="#”>

セレクタ
新設しちゃえ
抜き出して
使っちゃえ

10
結局、コードの品質とは、
制作者のモラルとプライドである。

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

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

13
つまり
というのは
という「⼈人間への指⽰示」である。
「これはヘッダ⽤用のリンクアイコンだ」

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

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

<a class=”header-‐‑‒link_̲_̲icon ( -‐‑‒テキスト編集の
み可 )" href="#">

17
こう書いたらどうか？
区切切りはいろいろ試したが「( )」の視認性がよかった。
しかも、既存の CSS と共存できる。

<a class=”header-‐‑‒link_̲_̲icon ( -‐‑‒editable )"
href="#">

18
もう少し、受け⼊入れやすくした（海外にも）
くりかえすが（驚くべきことに！）
これは HTML5 の仕様に準拠している。

href="#">

19
なんと、この書式は jQuery でもあつかえる
$( ʻ‘.-‐‑‒editableʼ’ ) で参照できる。
なんと jQuery であつかえる。
もう驚きしかない。

href="#">

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種類

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

More Related Content

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