Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

14,674 views

Published on

2016年5月13日 CodeGrid 四周年記念パーティーでの「ヒューマンリーダブルな CSS 記述法(異次元編、α版)」の資料です。大規模な運用でも、CSSをヒューマンリーダブルに保つ方法について、その試みを提案しました。スライド中のデモは https://github.com/storywriter/HRCSS で公開しています。

Published in: Internet

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

  1. 1. ヒューマンリーダブルな  CSS記述法 (異異次元編) HCD-‐‑‒Net認定  ⼈人間中⼼心設計専⾨門家 ⽻羽⼭山  祥樹  @storywriter 1 2016年年  5⽉月13⽇日(⾦金金)    CodeGrid四周年年記念念パーティー 本プレゼンのデモは  https://github.com/storywriter/hrcss  で公開しています αバージョン
  2. 2. 2 CodeGrid4周年年、おめでとうございます! CodeGrid  のファンなので、 この場でお話させていただけるのが、 とても嬉しいです。
  3. 3. 3 CSS  の管理理で困っているなら 試み: CSSのセレクタ命名は 「⼈人間に指⽰示する」ようにつける
  4. 4. ⽻羽⼭山  祥樹  HAYAMA  Yoshiki v インフォメーションアーキテクト •  使いやすいWebサイトをつくる専⾨門家 •  HCD-‐‑‒Net認定  ⼈人間中⼼心設計専⾨門家 v Web業界に20年年くらい v 担当したWebサイトが、雑誌のWebユーザビリティランキン グで国内トップクラスの評価を受ける  ほか実積多数 v 主な専⾨門分野 •  ユーザーエクスペリエンス、情報アーキテクチャ、 ⼈人間中⼼心設計、アクセシビリティ、⼤大規模CMS、ライター Twi$er:@storywriter     WebSite:  storywriter.jp 4 ユーザー⼼心理理を つかむプロです
  5. 5. 5 じつは20年年来のフロントエンドエンジニア HTML・CSS・JavaScript 1998 2002 2006 20161996 2010 20122004 情報デザイン IA ⼈人間中⼼心設計、UX サーバーサイド アクセシビリティ Web担当者 ⼤大規模CMS 品質管理理 ライター20年年来の フロントエンド エンジニア 10年年間 ⼤大規模サイトの HTML・CSS 7年年間 ⼤大規模CMS
  6. 6. 6 CSS  は、⼤大規模な環境ほど、保守が難しい •  数千ページ、数万ページの規模。 •  1つの  CSS  ファイルが、数千ページから参照される。 •  CSS  ファイルが散乱している。 •  何⼗十⼈人もが、つねに  HTML  をさわっている。 •  スキルレベルや状況はさまざま。 •  初学者、コードに美学のない制作者、納期優先の実装。 •  制作会社が複数いることが常時。 •  何年年間のうちに、⼈人が⼊入れ替わっていく。 •  それでも安定して運⽤用できる  CSS  の記法とは?
  7. 7. 7 CSS  は、⼤大規模な環境ほど、保守が難しい スコープがないから?  簡易易な⾔言語だから? 先⼈人たちの知恵: •  OOCSS •  BEM •  SMACSS 「領領域」を分けるように命名規則をつくることで、 わかりやすく管理理できるようにする記述法。
  8. 8. 8 それでも  CSS  はこんがらがる <p  class=”header-‐‑‒link">    <a  class=”header-‐‑‒link_̲_̲icon"  href="#">        リンクテキスト</a> </p> このコードひとまとまりで 標準のコンポーネント。 絶対に変えるな! と、あれほど⾔言ったのに
  9. 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"> セレクタ 新設しちゃえ 抜き出して 使っちゃえ
  10. 10. 10 それでも  CSS  はこんがらがる 結局、コードの品質とは、 制作者のモラルとプライドである。
  11. 11. 11 それでも  CSS  はこんがらがる そのなかでコントロールするには、 CSS  の命名規則だけでなく、 HTML  のコンポーネント単位で管理理しないと コードの安定した運⽤用はできない。
  12. 12. 12 セレクタの命名は誰のためにするのか BEM: セレクタは「⼈人間が読むため」に命名している。 ブラウザが読むだけなら、ランダム⽂文字列列で <a  class=”header-‐‑‒link_̲_̲icon"  href="#”> だって困らない。 <a  class=”wfJBaVnFSzSCYb"  href="#”>
  13. 13. 13 セレクタの命名は誰のためにするのか つまり というのは <a  class=”header-‐‑‒link_̲_̲icon"  href="#”> という「⼈人間への指⽰示」である。 「これはヘッダ⽤用のリンクアイコンだ」
  14. 14. 14 セレクタの命名は誰のためにするのか ならば、もっと直接に、 「⼈人間への指⽰示」を セレクタ名にすればいいのでは?
  15. 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. 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. 17. <p  class=”header-‐‑‒link  (  -‐‑‒ブロック  )">    <a  class=”header-‐‑‒link_̲_̲icon  (  -‐‑‒テキスト編集の み可  )"  href="#">        リンクテキスト</a> </p> 17 こう書いたらどうか? 区切切りはいろいろ試したが「(  )」の視認性がよかった。 しかも、既存の  CSS  と共存できる。
  18. 18. <p  class=”header-‐‑‒link  (  -‐‑‒block  )">    <a  class=”header-‐‑‒link_̲_̲icon  (  -‐‑‒editable  )"   href="#">        リンクテキスト</a> </p> 18 もう少し、受け⼊入れやすくした(海外にも) くりかえすが(驚くべきことに!) これは  HTML5  の仕様に準拠している。
  19. 19. <p  class=”header-‐‑‒link  (  -‐‑‒block  )">    <a  class=”header-‐‑‒link_̲_̲icon  (  -‐‑‒editable  )"   href="#">        リンクテキスト</a> </p> 19 なんと、この書式は  jQuery  でもあつかえる $(  ʻ‘.-‐‑‒editableʼ’  )  で参照できる。 なんと  jQuery  であつかえる。 もう驚きしかない。
  20. 20. <p  class=”header-‐‑‒link  (  -‐‑‒block  )">    <a  class=”header-‐‑‒link_̲_̲icon  (  -‐‑‒editable  )"   href="#">        リンクテキスト</a> </p> 20 補⾜足:data  属性を使わず、CSS  のみで書く data  属性を使わない。class  属性(CSS  の世界)だけ に閉じることで、初⼼心者にも馴染みやすい。
  21. 21. 21 Human  Readable  CSS この記法を、⼈人間中⼼心のコーディングということで、 Human  Readable  CSS(HRCSS) と呼ぶことにしました。
  22. 22. 22 それでも、それでも  CSS  はこんがらがる ここまでやっても、⼤大規模な運⽤用では、 すべてを無視する、 コードにこだわりのない制作者もいる。 そもそも、コードを書かずに、 ⾃自然とスタイルガイドをまもった実装ができる 「しくみ(システム、ツール)」があればよい。
  23. 23. 23 WYSIWYG  HTML  Editor  の提供 HRCSS  に対応した  WYSIWYG  HTML  Editor  を、 HRCSS  の⽂文法とともに、オープンソースで提供。 https://github.com/storywriter/hrcss  で公開。
  24. 24. 24 デモ: WYSIWYG  HTML  Editor  for Human  Readable  CSS
  25. 25. 25 WYSIWYG  HTML  Editor  の提供 スタイルガイドやコーディング規約だけでは、 解釈が、どうしても制作者により跛⾏行行する。 スタイルガイドとともに、 それをラクに、確実に実装できる「しくみ」 (WYSIWYG  HTML  Editor)も提供して、 品質を担保する。
  26. 26. 26 試み: CSSのセレクタ命名は 「⼈人間に指⽰示する」ようにつける
  27. 27. 27 ⼤大規模でも保守しやすい  CSS  のために 1.  セレクタ名は⼈人間への指⽰示のために書く。 2.  セレクタのなかに、必要な情報を含める。 3.  セレクタは読みやすく、そして理理解しやすく書く。 4.  しくみ(WYSIWYG  HTML  Editor)も提供する。
  28. 28. 28 ありがとうございました。 ⽻羽⼭山  祥樹  @storywriter
  29. 29. ⽻羽⼭山のプレゼンのアレ          が、     スタンプになりました! スタンプ名:ハーミィ(CSS編)  作者名:⽻羽⼭山  祥樹 https://store.line.me/stickershop/product/1228201/ja Web・CSSネタ 全40種類

×