Download to read offline
Uploaded byHiroshi Urabe
819 views
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
WP-D Week Day 2 「CSSについてLevel Up!」での発表資料です。
Recommended
More Related Content
What's hot
Viewers also liked
Similar to まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
- 1.まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。2016.4.12 @WP-D WeekDay 22016.4.12 @WP-D Week Day 2 1
- 2.
- 3.Toro_Unit占部 紘 (うらべひろし)Frontend Engineer / Web DesignerGithub: @torounitTwitter: @Toro_UnitFacebook: fb.me/torounitWEB Site: https://torounit.com2016.4.12 @WP-D Week Day 2 3
- 4.
- 5.Profile• WordPress な人です。パーマリンクのプラグイン作ったり、コアコントリビューターになったり、いろいろやってます。•CSS絡みでは、使いやすいWordPressのためのCSSのつくりかた とかで登壇したり、Basis というCSSフレームワークにプルリクを送りつけたりしてました。2016.4.12 @WP-D Week Day 2 5
- 6.では本題。2016.4.12 @WP-D WeekDay 2 6
- 7.
- 8.• 1年以上前に納品した案件の修正依頼。• 誰が書いたのかも良く解らない引き継ぎ案件。•1万行を余裕で超えてるCSS。• ほとんどは、コピペコードの狂喜乱舞。• しかも細かいところが少しずつ違ってる。2016.4.12 @WP-D Week Day 2 8
- 9.
- 10.結果2016.4.12 @WP-D WeekDay 2 10
- 11.増殖する の、「fix.css」, 「append.css」,「custom.css」,etc...2016.4.12 @WP-D Week Day 2 11
- 12.そして生まれる important! の腐海。もはや誰も触れないCSS の誕生。2016.4.12 @WP-D Week Day 2 12
- 13.2016.4.12 @WP-D WeekDay 2 13
- 14.別にこれって、ここ最近の話じゃ無いよね ...2016.4.12 @WP-DWeek Day 2 14
- 15.
- 16.
- 17.• IEの闇からいい加減抜け出したと思ったのに…• だれだよ!!!HTML/CSSは簡単だとか言った奴は!!!2016.4.12 @WP-D Week Day 2 17
- 18.はい。2016.4.12 @WP-D WeekDay 2 18
- 19.Q. では、人類はどうやってCSSと立ち向かえば良いのか？2016.4.12 @WP-DWeek Day 2 19
- 20.A. カオス化しないようにCSSを書く!2016.4.12 @WP-DWeek Day 2 20
- 21.カオス化しないようなCSS• ページ・要素の追加が簡単にできること。ある程度 CSS書かなくても出来るようにすること。そもそもCSSを追記しなければ腐海化しない。• 保守・デザイン変更が簡単にできること。どこをいじれば良いのかが、わかりやすいこと。不要な CSS が残りづらい、影響し辛いようにすれば、CSSの上書き地獄、important 地獄は防げる。2016.4.12 @WP-D Week Day 2 21
- 22.• 人間にとって読みやすいこと。そもそも、人間が読む気にならない or読めない CSS が腐海化しないわけがない。というか既に腐海。2016.4.12 @WP-D Week Day 2 22
- 23.どうやって？2016.4.12 @WP-D WeekDay 2 23
- 24.CSS で開発する上での戦略を立てる。2016.4.12 @WP-DWeek Day 2 24
- 25.この戦略 = 「CSS設計」2016.4.12@WP-D Week Day 2 25
- 26.Google のエンジニアの PhilipWalton 氏がこの件について書いた記事がこちら。CSS Architecture — Philip Walton• 日本語版：CSS Architecture2016.4.12 @WP-D Week Day 2 26
- 27.Philip Walton 氏の言う良いCSS の条件とは。• 予測しやすい (PIEの原則)• 再利用しやすい (DRY原則)• 保守しやすい / 拡張しやすい (オープン・クローズドの原則)2016.4.12 @WP-D Week Day 2 27
- 28.
- 29.1. ちゃんと OOCSSやる2016.4.12 @WP-D Week Day 2 29
- 30.OOCSSの２大原則1. 構造と見た目を分離。2. コンテナとコンテンツの分離。2016.4.12@WP-D Week Day 2 30
- 31.構造と見た目の分離2016.4.12 @WP-D WeekDay 2 31
- 32..submit-btn {display: inline-block;padding:10px;color: #FFF;background: #66C;}.link-btn {display: inline-block;padding: 10px;color: #333;background: #C90;}2016.4.12 @WP-D Week Day 2 32
- 33.こうしよう2016.4.12 @WP-D WeekDay 2 33
- 34./*ボタンの構造*/.btn {display: inline-block;padding:10px;}/*ボタンの見た目*/.btn-submit {color: #FFF;background: #66C;}.btn-link {color: #333;background: #C90;}2016.4.12 @WP-D Week Day 2 34
- 35.構造と見た目の分離するメリット1.コードの重複が避けられる。保守性が上がる。2.拡張がとても用意になる。例• Bootstrap のButton2016.4.12 @WP-D Week Day 2 35
- 36.コンテナとコンテンツの分離<aside class="sidebar"><div><img class="avatar"/></div></aside>.sidebar .avatar {width: 200px;border: 5px solid #FFF;box-shadow: 0 2px 3px #000;}2016.4.12 @WP-D Week Day 2 36
- 37.こうしよう2016.4.12 @WP-D WeekDay 2 37
- 38.<aside class="sidebar"><div class="sidebar-widget"><imgclass="avatar" /></div></aside>.sidebar-widget { /** コンテナ **/width: 200px;}.avatar { /** コンテンツ **/width: 100%;border: 5px solid #FFF;box-shadow: 0 2px 3px #000;}2016.4.12 @WP-D Week Day 2 38
- 39.コンテナとコンテンツの分離のメリット1. 場所、コンテキストに依存しないコードが増える。2. 再利用しやすい！3.サイドバーのウィジェットに、.widget { width: 200px }みたいな CSS とかやりがちですけど、フッターでも使いたい...けど横幅していが邪魔…なんてのは良くある話。2016.4.12 @WP-D Week Day 2 39
- 40.OOCSSの例• Bootstrap• Foundation2016.4.12@WP-D Week Day 2 40
- 41.
- 42.詳しくは緑本を読もう2016.4.12 @WP-D WeekDay 2 42
- 43.2.仕事のやり方等2016.4.12 @WP-D WeekDay 2 43
- 44.ページ、デザインカンプごとに CSS を作らない。コンポーネント指向なCSS を。• これをやるとだいたい、新規ページ追加のたびに CSS を追記する事態が起こる。• .page-privacy みたいなクラスをbodyを書かないとだめなCSSとか、他のページで使いたいとき、どうするの？• 汎用性のあるパーツを組み合わせて、HTML を組んでいけるものを目指すべし。2016.4.12 @WP-D Week Day 2 44
- 45.CSSは整理する。1. リセット・normalize2. ベースのHTML要素へのCSS3.レイアウト、パーツなどのコンポーネントへのCSSという順に詳細度の低い順で書いていく。2016.4.12 @WP-D Week Day 2 45
- 46.
- 47.一つのコンポーネントでいろいろやり過ぎない。• サイドバーのウィジェットに、.widget {width: 200px }みたいな CSS とかやりがちですけど、フッターでも使いたい...けど横幅していが邪魔…なんてのは良くある話。• 要素と、レイアウトのための CSS はしっかり分割。絶対値でサイズや場所を指定しているものは要注意。• コンテナーとコンテンツの分離はしっかり。2016.4.12 @WP-D Week Day 2 47
- 48.セレクターの強さは可能な限り弱く。• ID セレクタは使わない！セレクターが無駄に強くなって!important 地獄を引き起こす。また、IDセレクタには、ページ内リンクなどの役割もあるのでコンテンツに依存しがち。• .entry-body h1 みたいなこともやりがちですが、こういったCSSがあったりすると、h1にクラスを当てて...みたいなときに CSS が適用されない等のトラブルが。。。2016.4.12 @WP-D Week Day 2 48
- 49.親要素に依存したセレクターは使わない。• .comment .title,.entry .title 等のセレクターは一見良さそうだけど、.title に CSS があたらないなんて保証はないし、.entryの中に .comment が存在した場合とか。。。.comment-title, .entry-title 等、親要素に依存しない命名は大事。• SMACSSとか、BEM等を導入すると楽かも。2016.4.12 @WP-D Week Day 2 49
- 50.機能、コンポーネントごとにファイル分割する• 一枚の CSSファイルにゴリゴリ書いていくと、どうしても一つの機能を実現するための CSSが分散したりしがち。なので、機能ごとに CSS ファイルを分割すべし。• 一つのコンポーネントでいろいろやり過ぎてないか？分割すべきか？等の指針にもなる。• 使わないCSSを発見しやすい。2016.4.12 @WP-D Week Day 2 50
- 51.本文などの要素からCSSを書いていく。• リセットのあとに書く、HTML要素への CSSはそのサイトの基本のデザイン。これをまずはしっかり実装する。本文欄用に、.main-contents h2 等の CSS を書くのは確実に CSS を複雑にする。2016.4.12 @WP-D Week Day 2 51
- 52.
- 53.3. 心構え編2016.4.12 @WP-DWeek Day 2 53
- 54.強い心を持とう。• CSSは超ゆるふわ言語。簡単に壊れる。一度設計が破綻すると、その CSSの設計が信用できなくなる。• クソコードへの憎しみ、技術者としてのプライドは超重要。• 割れた窓の法則、ボーイスカウトの規則2016.4.12 @WP-D Week Day 2 54
- 55.安易なコピペコードは麻薬。• CSS が無駄に長くなって、腐海化する一番の元凶。•既存のコンポーネントの拡張で出来ないものかを考えよう。• コピペしたくなったときは、設計を見直すチャンス。2016.4.12 @WP-D Week Day 2 55
- 56.Refactoring！Refactoring！Refactoring！• CSS を書くときは、デザインがブラウザで再現できた！で終わりにしない。絶対リファクタリングする！•既存のコンポーネントの拡張で出来ること、一つのコンポーネントの役割が大きすぎるケースは多分に存在する。• CSS は放っておくとすぐに複雑怪奇になってしまうので、常にシンプルな構造になるようにリファクタリングしながら開発していくこと。2016.4.12 @WP-D Week Day 2 56
- 57.
- 58.
- 59.まとめ2016.4.12 @WP-D WeekDay 2 59
- 60.CSS が生まれて20年ちょっと、テーブルレイアウトからの転換が起こって10年くらい。まだまだ、これから変わっていくんだと思います。やはり、プログラミングにおける設計のノウハウはかなり入ってきているので、勉強してみると、いろいろ役立つ知識・考えた方が手に入ります。プログラミングが解らなくても使えることは多いです。プログラミング原則一覧 -Strategic Choiceオブジェクト指向設計原則 - Strategic Choice2016.4.12 @WP-D Week Day 2 60
- 61.
- 62.おわり。Follow Me!Github: @torounitTwitter:@Toro_UnitFacebook: fb.me/torounitWEB Site: https://torounit.com2016.4.12 @WP-D Week Day 2 62