Submit Search
Upload
Enduring CSS
•
8 likes
•
3,862 views
Takazudo
Follow
Frontend Conference 2017@大阪 新梅田研修センターにて。
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 71
Download now
Download to read offline
Recommended
エンジニアとデザイナーとの距離
エンジニアとデザイナーとの距離
Manabu Yasuda
グローバルなCSSコンポーネントを避ける
グローバルなCSSコンポーネントを避ける
Manabu Yasuda
コンポーネント指向と余白の設計
コンポーネント指向と余白の設計
Manabu Yasuda
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
Yoshiki Hayama
Dreamweaver コードヒントHowTo
Dreamweaver コードヒントHowTo
Akira Maruyama
HTML5時代のWebデザイン
HTML5時代のWebデザイン
masaaki komori
CSS Nite in SAPPORO x a-blog cms
CSS Nite in SAPPORO x a-blog cms
Seiko Kuchida
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
知己 久保
Recommended
エンジニアとデザイナーとの距離
エンジニアとデザイナーとの距離
Manabu Yasuda
グローバルなCSSコンポーネントを避ける
グローバルなCSSコンポーネントを避ける
Manabu Yasuda
コンポーネント指向と余白の設計
コンポーネント指向と余白の設計
Manabu Yasuda
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
Yoshiki Hayama
Dreamweaver コードヒントHowTo
Dreamweaver コードヒントHowTo
Akira Maruyama
HTML5時代のWebデザイン
HTML5時代のWebデザイン
masaaki komori
CSS Nite in SAPPORO x a-blog cms
CSS Nite in SAPPORO x a-blog cms
Seiko Kuchida
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
知己 久保
インフラ知識ゼロの「デザイナー」でもOK!Microsoft Azureの便利機能をWeb制作的に活かしてみた話
インフラ知識ゼロの「デザイナー」でもOK!Microsoft Azureの便利機能をWeb制作的に活かしてみた話
典子 松本
SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!
SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!
Atsushi Handa
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
Nozomi Sawada
Sassの基本機能のみで効率的なWordPressのcssコーディングtipsをご紹介
Sassの基本機能のみで効率的なWordPressのcssコーディングtipsをご紹介
優也 田島
ドメイン駆動設計の正しい歩き方
ドメイン駆動設計の正しい歩き方
増田 亨
a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう
a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう
Seiko Kuchida
Web design
Web design
kazuko kaneuchi
Web制作的SendGridのススメ SendGridで色々やってみた話
Web制作的SendGridのススメ SendGridで色々やってみた話
典子 松本
CSS Framework
CSS Framework
Joe_noh
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
Webプロフェッショナルだからできるコンテンツの検査
Webプロフェッショナルだからできるコンテンツの検査
Yasuhisa Hasegawa
Vivliostyle Theme 開発ガイドラインの公開
Vivliostyle Theme 開発ガイドラインの公開
Sanae Yamashita
Webデザイナーの私がMicrosoft Azureを使うようになったワケ
Webデザイナーの私がMicrosoft Azureを使うようになったワケ
典子 松本
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
Yasuhito Yabe
20120826 ec cube-handson
20120826 ec cube-handson
Masaki Takeda
非ウェブデザイナーも知っておきたいデベロッパーツールの使い方(応用編 知っておきたい機能と応用) 先生:池田 祐太郎
非ウェブデザイナーも知っておきたいデベロッパーツールの使い方(応用編 知っておきたい機能と応用) 先生:池田 祐太郎
schoowebcampus
Webと出版と、CSSの未来の話
Webと出版と、CSSの未来の話
Shinyu Murakami
第10回勉強会 CSS設計について
第10回勉強会 CSS設計について
takumaro web
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Horiguchi Seito
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
CSSシークレットはどのような書籍か【映像あり】
CSSシークレットはどのような書籍か【映像あり】
Japan Electronic Publishing Association
cssについて
cssについて
rootage-inc
More Related Content
What's hot
インフラ知識ゼロの「デザイナー」でもOK!Microsoft Azureの便利機能をWeb制作的に活かしてみた話
インフラ知識ゼロの「デザイナー」でもOK!Microsoft Azureの便利機能をWeb制作的に活かしてみた話
典子 松本
SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!
SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!
Atsushi Handa
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
Nozomi Sawada
Sassの基本機能のみで効率的なWordPressのcssコーディングtipsをご紹介
Sassの基本機能のみで効率的なWordPressのcssコーディングtipsをご紹介
優也 田島
ドメイン駆動設計の正しい歩き方
ドメイン駆動設計の正しい歩き方
増田 亨
a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう
a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう
Seiko Kuchida
Web design
Web design
kazuko kaneuchi
Web制作的SendGridのススメ SendGridで色々やってみた話
Web制作的SendGridのススメ SendGridで色々やってみた話
典子 松本
CSS Framework
CSS Framework
Joe_noh
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
Webプロフェッショナルだからできるコンテンツの検査
Webプロフェッショナルだからできるコンテンツの検査
Yasuhisa Hasegawa
Vivliostyle Theme 開発ガイドラインの公開
Vivliostyle Theme 開発ガイドラインの公開
Sanae Yamashita
Webデザイナーの私がMicrosoft Azureを使うようになったワケ
Webデザイナーの私がMicrosoft Azureを使うようになったワケ
典子 松本
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
Yasuhito Yabe
20120826 ec cube-handson
20120826 ec cube-handson
Masaki Takeda
非ウェブデザイナーも知っておきたいデベロッパーツールの使い方(応用編 知っておきたい機能と応用) 先生:池田 祐太郎
非ウェブデザイナーも知っておきたいデベロッパーツールの使い方(応用編 知っておきたい機能と応用) 先生:池田 祐太郎
schoowebcampus
Webと出版と、CSSの未来の話
Webと出版と、CSSの未来の話
Shinyu Murakami
What's hot
(17)
インフラ知識ゼロの「デザイナー」でもOK!Microsoft Azureの便利機能をWeb制作的に活かしてみた話
インフラ知識ゼロの「デザイナー」でもOK!Microsoft Azureの便利機能をWeb制作的に活かしてみた話
SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!
SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
Sassの基本機能のみで効率的なWordPressのcssコーディングtipsをご紹介
Sassの基本機能のみで効率的なWordPressのcssコーディングtipsをご紹介
ドメイン駆動設計の正しい歩き方
ドメイン駆動設計の正しい歩き方
a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう
a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう
Web design
Web design
Web制作的SendGridのススメ SendGridで色々やってみた話
Web制作的SendGridのススメ SendGridで色々やってみた話
CSS Framework
CSS Framework
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Webプロフェッショナルだからできるコンテンツの検査
Webプロフェッショナルだからできるコンテンツの検査
Vivliostyle Theme 開発ガイドラインの公開
Vivliostyle Theme 開発ガイドラインの公開
Webデザイナーの私がMicrosoft Azureを使うようになったワケ
Webデザイナーの私がMicrosoft Azureを使うようになったワケ
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
20120826 ec cube-handson
20120826 ec cube-handson
非ウェブデザイナーも知っておきたいデベロッパーツールの使い方(応用編 知っておきたい機能と応用) 先生:池田 祐太郎
非ウェブデザイナーも知っておきたいデベロッパーツールの使い方(応用編 知っておきたい機能と応用) 先生:池田 祐太郎
Webと出版と、CSSの未来の話
Webと出版と、CSSの未来の話
Similar to Enduring CSS
第10回勉強会 CSS設計について
第10回勉強会 CSS設計について
takumaro web
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Horiguchi Seito
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
CSSシークレットはどのような書籍か【映像あり】
CSSシークレットはどのような書籍か【映像あり】
Japan Electronic Publishing Association
cssについて
cssについて
rootage-inc
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
まだやれる Css preprocesser
まだやれる Css preprocesser
Shinya Sugo
第2回ExtJSユーザー事例紹介
第2回ExtJSユーザー事例紹介
Akiyuki Nomura
CSS設計のお勉強
CSS設計のお勉強
MarlboroLand
モダンCSS設計と BEMという開発手法
モダンCSS設計と BEMという開発手法
Kenji Karahashi
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
Yasuhito Yabe
Css benkyou
Css benkyou
大樹 小倉
CSS設計
CSS設計
GIG inc.
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
Sou Lab
第9回HTML5ビギナーズ CSSとCSS設計について学ぼう!「reset.cssとnormalize.cssについて考えていたら…」
第9回HTML5ビギナーズ CSSとCSS設計について学ぼう!「reset.cssとnormalize.cssについて考えていたら…」
Mitsuo Kawashima
Webの勉強会#8
Webの勉強会#8
MarlboroLand
シラサギ勉強会1201
シラサギ勉強会1201
okusakazuya
Css
Css
Jun Chiba
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
lyca chigyo
マスメディアサイトのテキスト部分CSS設定を調べてみました
マスメディアサイトのテキスト部分CSS設定を調べてみました
Kawaji Masaki
Similar to Enduring CSS
(20)
第10回勉強会 CSS設計について
第10回勉強会 CSS設計について
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSシークレットはどのような書籍か【映像あり】
CSSシークレットはどのような書籍か【映像あり】
cssについて
cssについて
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
まだやれる Css preprocesser
まだやれる Css preprocesser
第2回ExtJSユーザー事例紹介
第2回ExtJSユーザー事例紹介
CSS設計のお勉強
CSS設計のお勉強
モダンCSS設計と BEMという開発手法
モダンCSS設計と BEMという開発手法
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
Css benkyou
Css benkyou
CSS設計
CSS設計
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
第9回HTML5ビギナーズ CSSとCSS設計について学ぼう!「reset.cssとnormalize.cssについて考えていたら…」
第9回HTML5ビギナーズ CSSとCSS設計について学ぼう!「reset.cssとnormalize.cssについて考えていたら…」
Webの勉強会#8
Webの勉強会#8
シラサギ勉強会1201
シラサギ勉強会1201
Css
Css
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
マスメディアサイトのテキスト部分CSS設定を調べてみました
マスメディアサイトのテキスト部分CSS設定を調べてみました
Enduring CSS
1.
2.
Enduring CSS 高津戸壮 @Takazudo
3.
自己紹介 高津戸壮 (たかつど たけし) フロントエンドエンジニア 株式会社ピクセルグリッド @Takazudo
4.
5.
Enduring CSSって何?略してECSS CSS設計思想の一つ を著した本 Ben Frain著 サイトで全部読める そんなに有名でもない ecss.io
6.
ECSSの特徴Enduring: 長続きする、永続的な、 不朽の、我慢強い、辛抱強い デカくてスケールするサイト向け 色々試したけど違うなーって思って考えたらしい 設計ルール + ヒント集
7.
ECSSを紹介したいワケ私とCSS いかにCSSを設計するか エンドレスな悩み 自分的にそのブレイクスルーだった ECSSの考えはCSS設計における ベースの考え方となりうるなぁと
8.
その前に… 著名なCSS設計思想 ざっくり紹介
9.
OOCSS BEM SMACSS
10.
OOCSS
11.
12.
<button class="button button_caution">...</button> <button
class="button button_pdf">...</button> <button class="button button_play">...</button>
13.
BEM
14.
15.
16.
17.
18.
block__element--modifier Block .tab Element .tab__item Modifier
.tab__item--active
19.
SMACSSBase ‒ ベースルール Layout ‒ レイアウトルール Module ‒ モジュールルール State ‒ 状態(ステート)ルール Theme ‒ テーマ
20.
21.
だいたいこんな感じモジュール化して考えよう クラス名の命名規則で衝突を防ごう CSSルールを分類して管理しよう
22.
解決できない悩み モジュールの汎用性 モジュールの粒度 モジュールの名前 どう考えれば?
23.
抽象化による解決 分離による解決 Atomic Design Enduring CSS
24.
25.
Enduring CSSの考え基本はモジュール化 ただし、抽象化しない その先には複雑化が待っている 結果としてメンテナンスのコストが増えすぎる 分離することによって解決する 時間とともに変化する状況で 完全な抽象化など不可能である
26.
27.
1. モジュール化 2. 名前空間 3. アセットの分離 4. クラス名の命名規則
28.
1.モジュール化そんな細かくはしない ネストしたりもなるべくしない 共通の細かいUIを抜き出してモジュールにしない モジュールは機能のまとまり単位で考える モジュールには名前をつける
29.
ecss.io
30.
31.
32.
33.
同じようなものも別物 なぜか?そっちのほうが分かりやすいから 複雑化を防ぐことができるから 同じようなCSSを何度も 書かないといけないのでは? それでもいい。gzipとかすればいい
34.
モジュールの粒度たくさんのモジュールを集めて ひとかたまりのUIを作ってもよいよ? ECSSでは分離できることを重要と考える ECSSにおけるモジュールの定義 「視覚的に認識できる 個別の機能領域のもっとも大きな区分」
35.
2.名前空間モジュールを名前空間でグルーピングする
36.
37.
38.
39.
TopPage, ProductDetail, ShoppingCart
40.
/* topPage modules
*/ .tp-MainVisual { ... } .tp-Carousel { ... } .tp-NewsList { ... } /* 商品詳細 productDetail modules */ .pd-ItemDescription { ... } .pd-ItemMainPhoto { ... } .pd-Carousel { ... } /* shoppingCart modules */ .sc-ItemList { ... } .sc-UserInfo { ... }
41.
common
42.
/* 共通 common
modules */ .cmn-Header { ... } .cmn-Footer { ... } .cmn-SideAd { ... }
43.
名前空間の分け方例これまあくまで例 CMSで出しているテンプレートが違う ここだけWordPressで出している サイト全体で共通 管理する部署が違う 大きくても小さくてもご自由にどうぞ
44.
3.アセットの分離名前空間ごとに読み込むCSS、JS、画像類を完全に分離
45.
例えばこう
46.
.namespaces ├── common │ ├──
common.css │ └── common.js ├── productDetail │ ├── productDetail.css │ └── productDetail.js └── topPage ├── topPage.css └── topPage.js
47.
48.
.namespaces ├── common │ ├──
common.css │ └── common.js ├── productDetail │ ├── productDetail.css │ └── productDetail.js └── topPage2 ├── topPage2.css └── topPage2.js
49.
分離しなかったら?旧topPageリソース消せないですよね? このCSS消していいんだろうか… この画像どこに置けばいいんだろう… このモジュール変更するのが怖い いや、そもそも変更出来ないし消せない
50.
4.クラス名の命名規則BEM的命名規則に名前空間の考えを足したもの
51.
52.
BEMでは…… Block .tab Element .tab__item Modifier
.tab__item--active
53.
<div class="tab"> <button class="tab__item">One</button> <button
class="tab__item tab__item--active">Two</button> <button class="tab__item">Three</button> <button class="tab__item">Four</button> </div>
54.
ECSSでは…… .ns-Module_ChildNode-variant Module .tp-Tab Child node .tp-Tab_Item Variant
[aria-current="true"] variantにはwai‒ariaとかも使うと良いぞと
55.
<div class="tp-Tab"> <button class="tp-Tab_Item">One</button> <button
class="tp-Tab_Item" aria-current="true">Two</button> <button class="tp-Tab_Item">Three</button> <button class="tp-Tab_Item">Four</button> </div>
56.
モジュールの 汎用性について汎用的にしたら複雑になる 一度作ったモジュールは二度と消せない 無限に増えるモディファイア 運用の負荷も上がる 最初の想定が貫き通せるとは限らない 汎用的にしても管理しきれないのでは? 汎用的なものをつくってもいい しかしそれは消せなくなる
57.
モジュールの名前についてこれも汎用さを考えるからややこしくなる そのモジュールのになう機能名称をつければいい 名前空間で重複は避けられる
58.
59.
本当に完全に分けるのか?必ずしもそう強制するわけではない 汎用的に使える名前空間 sw(SiteWide)の例 PostCSSやSassの変数の利用は推奨 (色、マジックナンバー、z‒index) mixinの使用も許可。ただし最小限 そこで抽象化はしない 基盤となるレイヤーは極力薄く
60.
ECSS以前のワタシ抽象化による整理 それこそがクールなCSS設計 CSSが複雑?まぁ仕方ない デザインも統一、整理してこそ良い設計 変更されるデザイン 増え続けるモジュール なかなかうまくいかないナァ
61.
ECSS以後のワタシすべてを一緒にして考える そのスタートラインが間違ってた まずは分けて考える その上で共通化できるところを考える CSS設計のミニマルさだけが美しさではない あとで編集することを考えたらどう設計すべきか デザインが統一されていること コードとして同一であること 常に一緒ではないかも
62.
ECSSに習うべきか?ガチガチにECSSに従う必要は別にない 分けて管理したらどうか?という視点 Webアプリケーション向けと著にはある 汎用コンポーネントを組み合わせて デザインしたい場合にはそこまで向かなそう 部分的に考えを採用しても意味があるかも
63.
汎用モジュールで貫くかスタイルガイドや運用体制を確立できる環境か? 設計~運用までタッチできるか? Atomic Designを参照
64.
どうECSSの考えを 適用するか
65.
汎用的なモジュールで構成する場合 基本は汎用的な名前空間に属させる キャンペーンやランディングページだけ分ける
66.
デザインが似ているが別管理の場合 例えばコーポレートサイト&ECサイト デザインのトーン同一、別部署や会社が管理とか 一緒にして運用することが難しそうなら分けても
67.
テンプレートが断片化する場合 そういう状況でさらに細かいモジュールが 組み合わさっているとだいぶツライ このviewのコードは全部ここにあるよ そういう状態のほうが楽かもしれない
68.
Enduring CSSまとめ管理できることが大事 スケールできることが大事 そのために抽象化を諦める ミニマムなCSSを目指すものではない 最高のパフォーマンスは求めていない 運用や設計指針に応じて採用してみてはいかが?
69.
ありがとう ございました
70.
71.
Enduring CSS CodeGrid ‒ Enduring CSSの設計思想 CodeGrid ‒ 知っておきたいHTMLテンプレート設計法 HTML5 Experts.jp ‒ Enduring CSS
Download now