O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

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

14.758 visualizações

Publicada em

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

Publicada em: Internet
  • Seja o primeiro a comentar

ヒューマンリーダブルな 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種類

×