ヒューマンリーダブルな CSS 記述法（異次元編）：2016年5月13日 CodeGrid 四周年記念パーティー
28 likes18,961 views
2016年5月13日 CodeGrid 四周年記念パーティーでの「ヒューマンリーダブルな CSS 記述法（異次元編、α版）」の資料です。大規模な運用でも、CSSをヒューマンリーダブルに保つ方法について、その試みを提案しました。スライド中のデモは https://github.com/storywriter/HRCSS で公開しています。
Ad
More Related Content
What's hot (20)
Viewers also liked (13)
Ad
Similar to ヒューマンリーダブルな CSS 記述法（異次元編）：2016年5月13日 CodeGrid 四周年記念パーティー (20)
Ad
More from Yoshiki Hayama (20)
ヒューマンリーダブルな CSS 記述法（異次元編）：2016年5月13日 CodeGrid 四周年記念パーティー
- 1. ヒューマンリーダブルな CSS記述法 （異異次元編） HCD-‐‑‒Net認定 ⼈人間中⼼心設計専⾨門家 ⽻羽⼭山 祥樹 @storywriter 1 2016年年 5⽉月13⽇日（⾦金金） CodeGrid四周年年記念念パーティー 本プレゼンのデモは https://github.com/storywriter/hrcss で公開しています αバージョン
- 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 はこんがらがる <p class=”header-‐‑‒link"> <a class=”header-‐‑‒link_̲_̲icon" href="#"> リンクテキスト</a> </p> このコードひとまとまりで 標準のコンポーネント。 絶対に変えるな！ と、あれほど⾔言ったのに
- 9. <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"> セレクタ 新設しちゃえ 抜き出して 使っちゃえ
- 11. 11 それでも CSS はこんがらがる そのなかでコントロールするには、 CSS の命名規則だけでなく、 HTML のコンポーネント単位で管理理しないと コードの安定した運⽤用はできない。
- 12. 12 セレクタの命名は誰のためにするのか BEM： セレクタは「⼈人間が読むため」に命名している。 ブラウザが読むだけなら、ランダム⽂文字列列で <a class=”header-‐‑‒link_̲_̲icon" href="#”> だって困らない。 <a class=”wfJBaVnFSzSCYb" href="#”>
- 15. <p class=”header-‐‑‒link_̲_̲you-‐‑‒can-‐‑‒use-‐‑‒this-‐‑‒ selector-‐‑‒just-‐‑‒only-‐‑‒in-‐‑‒header"> <a class=”header-‐‑‒link_̲_̲icon" href="#"> リンクテキスト</a> </p> 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. <p class=”header-‐‑‒link ( -‐‑‒ブロック )"> <a class=”header-‐‑‒link_̲_̲icon ( -‐‑‒テキスト編集の み可 )" href="#"> リンクテキスト</a> </p> 17 こう書いたらどうか？ 区切切りはいろいろ試したが「( )」の視認性がよかった。 しかも、既存の CSS と共存できる。
- 18. <p class=”header-‐‑‒link ( -‐‑‒block )"> <a class=”header-‐‑‒link_̲_̲icon ( -‐‑‒editable )" href="#"> リンクテキスト</a> </p> 18 もう少し、受け⼊入れやすくした（海外にも） くりかえすが（驚くべきことに！） これは HTML5 の仕様に準拠している。
- 19. <p class=”header-‐‑‒link ( -‐‑‒block )"> <a class=”header-‐‑‒link_̲_̲icon ( -‐‑‒editable )" href="#"> リンクテキスト</a> </p> 19 なんと、この書式は jQuery でもあつかえる $( ʻ‘.-‐‑‒editableʼ’ ) で参照できる。 なんと jQuery であつかえる。 もう驚きしかない。
- 20. <p class=”header-‐‑‒link ( -‐‑‒block )"> <a class=”header-‐‑‒link_̲_̲icon ( -‐‑‒editable )" href="#"> リンクテキスト</a> </p> 20 補⾜足：data 属性を使わず、CSS のみで書く data 属性を使わない。class 属性（CSS の世界）だけ に閉じることで、初⼼心者にも馴染みやすい。
- 21. 21 Human Readable CSS この記法を、⼈人間中⼼心のコーディングということで、 Human Readable CSS（HRCSS） と呼ぶことにしました。
- 23. 23 WYSIWYG HTML Editor の提供 HRCSS に対応した WYSIWYG HTML Editor を、 HRCSS の⽂文法とともに、オープンソースで提供。 https://github.com/storywriter/hrcss で公開。
- 24. 24 デモ： WYSIWYG HTML Editor for Human Readable CSS
- 25. 25 WYSIWYG HTML Editor の提供 スタイルガイドやコーディング規約だけでは、 解釈が、どうしても制作者により跛⾏行行する。 スタイルガイドとともに、 それをラクに、確実に実装できる「しくみ」 （WYSIWYG HTML Editor）も提供して、 品質を担保する。
- 27. 27 ⼤大規模でも保守しやすい CSS のために 1. セレクタ名は⼈人間への指⽰示のために書く。 2. セレクタのなかに、必要な情報を含める。 3. セレクタは読みやすく、そして理理解しやすく書く。 4. しくみ（WYSIWYG HTML Editor）も提供する。
- 29. ⽻羽⼭山のプレゼンのアレ が、 スタンプになりました！ スタンプ名：ハーミィ（CSS編） 作者名：⽻羽⼭山 祥樹 https://store.line.me/stickershop/product/1228201/ja Web・CSSネタ 全40種類