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

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

ヒューマンリーダブルな CSS記述法
（異異次元編）
HCD-‐‑‒Net認定⼈人間中⼼心設計専⾨門家
⽻羽⼭山祥樹 @storywriter
1
2016年年 5⽉月13⽇日（⾦金金） CodeGrid四周年年記念念パー...

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

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

⽻羽⼭山祥樹 HAYAMA Yoshiki
v インフォメーションアーキテクト
•  使いやすいWebサイトをつくる専⾨門家
•  HCD-‐‑‒Net認定⼈人間中⼼心設計専⾨門家
v Web業界に20年年くらい
v 担当した...

5
じつは20年年来のフロントエンドエンジニア
HTML・CSS・JavaScript
1998 2002 2006 20161996 2010 20122004
情報デザイン IA ⼈人間中⼼心設計、UX
サーバーサイド
アクセシビリティ
...

6
CSS は、⼤大規模な環境ほど、保守が難しい
•  数千ページ、数万ページの規模。
•  1つの CSS ファイルが、数千ページから参照される。
•  CSS ファイルが散乱している。
•  何⼗十⼈人もが、つねに HTML ...

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

8
それでも CSS はこんがらがる
<p class=”header-‐‑‒link">
<a class=”header-‐‑‒link_̲_̲icon" href="#">
リンクテキスト</a>
</...

<p class=”header-‐‑‒link">
<a class=”header-‐‑‒link_̲_̲icon" href="#">
リンクテキスト</a>
</p>
9
それでも CSS はこんがら...

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

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

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

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

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

<p class=”header-‐‑‒link_̲_̲you-‐‑‒can-‐‑‒use-‐‑‒this-‐‑‒
selector-‐‑‒just-‐‑‒only-‐‑‒in-‐‑‒header">
<a class=”heade...

16
ここで仕様書に注⽬目
HTML5：
CSS3:
class 属性のなかは、じつはどんな値を⼊入れてもよい。
CSS として成⽴立立しない⽂文字列列でもよい。
例例：class=“( -‐‑‒⽇日本語 )” も HTML5 ...

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

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

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

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

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

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

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

24
デモ：
WYSIWYG HTML Editor for
Human Readable CSS

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

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

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

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

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

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

メンテナブルでありつづけるためのCSS設計 by 拓樹谷 37354 views
CSS の歩き方 by Seiichiro Mishiba 12535 views
2016年版フロントエンド開発フォーマット by Kenya Kodaira 38960 views
ブラウザにやさしいHTML/CSS by Takeharu Igari 71682 views
なんでCSSすぐ死んでしまうん by Hayato Mizuno 80156 views
悩まないコーディングをしよう！ OOCSS,SMACSSを用いた、読み... by Horiguchi Seito 61530 views

View on Slideshare

1 of 29 Ad

View on Slideshare

1 of 29 Ad