CSS Architecture - モバイルウェブアプリのためのCSS設計と開発アプローチ

Slide 1

Slide 1 text

2013.02.20 $44ઃܭͱ։ൃΞϓϩʔν ϞόΠϧ΢ΣϒΞϓϦͷͨΊͷ Yuya Saito Architecture CSS Architecture CSS

Slide 2

Slide 2 text

 @CSSRadar

Slide 3

Slide 3 text

En.ja OSS https://github.com/enja-oss

Slide 4

Slide 4 text

@Cyberagent

Slide 5

Slide 5 text

Agenda CSS๊͕͑Δෛ࠴  CSS։ൃΞϓϩʔνϫʔΫϑϩʔ  CSSΞʔΩςΫνϟ 

Slide 6

Slide 6 text

CSS๊͕͑Δ໋॓తͳෛ࠴ Debt on CSS

Slide 7

Slide 7 text

(Another) Father of JavaScript Douglas Crockford

Slide 8

Slide 8 text

The Web is the most hostile software engineering environment imaginable. “ ” - Douglas Crockford

Slide 9

Slide 9 text

CSS is: એݴܕϓϩάϥϛϯάݴޠ

Slide 10

Slide 10 text

CSS is: σβΠϯΛදݱ͢ΔͨΊͷݴޠ

Slide 11

Slide 11 text

CSS is: ϩδΧϧʹσβΠϯ͢Δͷ͕೉͍͠

Slide 12

Slide 12 text

CSS is: ޿ൣғͷ੹೚Λෛ͏ݴޠ

Slide 13

Slide 13 text

# CSS HTML JS

Slide 14

Slide 14 text

Planning ઃܭ࣮ͦ͜૷͢Δ্Ͱ΋ͬͱ΋େ੾ͳϑΣʔζ

Slide 15

Slide 15 text

paradigm Shift ΢ΣϒΞϓϦέʔγϣϯͱ͍͏৽͍͠ύϥμΠϜʹ ͓͍ͯHTMLɺ CSSɺ JavaScriptͷ໾ׂ͕ ৵৯͠͸͡Ί͍ͯΔɻ

Slide 16

Slide 16 text

JavaScript: HTMLςϯϓϨʔτ HTML: DOMૢ࡞ɺ ΠϕϯτͷϑοΫ CSS: ϨΠΞ΢τ + ϓϨθϯςʔγϣϯ + Ξχϝʔγϣϯ

Slide 17

Slide 17 text

Designing a system, not a page “ ” - Andy Clarke

Slide 18

Slide 18 text

OOCSSʹΑΔෛ࠴ͷฦࡁ OOCSS by Nicole Sullivan

Slide 19

Slide 19 text

OOCSS?

Slide 20

Slide 20 text

Object Oriented? ΦϒδΣΫτࢦ޲ϓϩάϥϛϯάͱ͸ ૬ޓʹϝοηʔδΛૹΓ͋͏ΦϒδΣΫτͷू·Γͱ͠ ͯϓϩάϥϜΛߏ੒͢Δٕ๏Ͱ͋Δɻ <ʜ>ΦϒδΣΫτࢦ޲ϓϩάϥϛϯάݴޠͷඋ͑Δ ΫϥεͱͦͷܧঝͳͲͷ࢓૊ΈΛར༻͢Δ΄͏͕ ֨ஈʹ։ൃޮ཰͸޲্͢Δɻ - Wikipedia

Slide 21

Slide 21 text

CSSʹ͓͚ΔΦϒδΣΫτ TextText tsts TextText tsts TextText TextText TextText tsts TextText tsts TextText TextText

Slide 22

Slide 22 text

Architect Christopher Alexander

Slide 23

Slide 23 text

Each pattern describes a problem that occurs over and over again in our environment, and then describes the core of the solution to that problem, in such way that you can use this solution a million times over, without ever doing it the same way twice. “ ” - Christopher Alexandar

Slide 24

Slide 24 text

ύλʔϯͱ͸ͦΕͧΕզʑ͕ੜ͖͍ͯΔ؀ڥͷ தͰԿ౓΋܁Γฦ͠ൃੜ͢Δ໰୊Λઆ໌͢Δ ΋ͷͰ͋Γɺ ͦΕΒͷ໰୊ʹର͢ΔίΞͱͳΔ ղܾΛઆ໌͢Δ΋ͷͰ΋͋Γ·͢ɻ ίΞͱͳΔղܾͱ͸ͦͷղܾํ๏Λಉ͜͡ͱΛ ܁Γฦͣ͞ɺ ਺ඦສճͰ΋ར༻Ͱ͖Δ΋ͷͰ͢ɻ “ ” - Christopher Alexandar

Slide 25

Slide 25 text

OOCSSͷݪଇ ߏ଄ͱݟͨ໨ͷ෼཭ ίϯςΠφͱίϯςϯτͷ෼཭

Slide 26

Slide 26 text

ηϚϯςΟοΫ΢Σϒ΁ͷٙ໰ ༨ܭͳཁૉΛ࢖Θͳ͍ ͦͯ͠Ϋϥε΋ηϚϯςΟοΫͰ͋Δ΂͖

Slide 27

Slide 27 text

Front-end Developer, Twitter Nicolas Gallagher

Slide 28

Slide 28 text

[…][N]ot all semantics need to be content-derived. Class names cannot be “unsemantic”. Whatever names are being used: they have meaning, they have purpose. Class name semantics can be different to those of HTML elements. “ ” - Nicolas Gallagher

Slide 29

Slide 29 text

ηϚϯςΟοΫ͕͢΂ͯίϯςϯπ೿ੜͰ͋Δ ඞཁ͸ͳ͍ɻ Ϋϥε໊ʹ ʮηϚϯςΟοΫͰ͸ ͳ͍ʯ ঢ়ଶ͸ͳ͍ɻ ͲΜͳ໊લ͕࢖ΘΕΑ͏ͱɺ ͦΕΒʹ͸ҙຯ͕͋Γɺ ໨త͕͋Δɻ Ϋϥε໊ͷ ηϚϯςΟοΫੑ͸HTMLཁૉͷͦΕͱҟͳΔ͜ ͱ΋͋Γ͑Δɻ “ ” - Nicolas Gallagher

Slide 30

Slide 30 text

Slide 31

Slide 31 text

blog.millermedeiros.com/solid-css/

Slide 32

Slide 32 text

enja.studiomohawk.com/2012/09/17/solidcss/

Slide 33

Slide 33 text

inuitcss.com

Slide 34

Slide 34 text

smacss.com

Slide 35

Slide 35 text

CSS Preprocessor CSSϓϦϓϩηοαʹΑΔฦࡁ

Slide 36

Slide 36 text

CSS Preprocessor? ม਺ ϛοΫεΠϯ ΤΫεςϯυ

Slide 37

Slide 37 text

CSS Preprocessor ڧྗͰ͋Δ͕Ώ͑ɺ ઃܭ΍ϩδοΫʹ͍ͭͯ ৻ॏ͕͞ٻΊΒΕΔΑ͏ʹɻ

Slide 38

Slide 38 text

OOCSS and Preprocessors in a Tree, K-I-S-S-I-N-G - Nicole Sullivan @ Smashing Magazine Conference

Slide 39

Slide 39 text

xanthir.com/b4N80

Slide 40

Slide 40 text

With great power, comes great responsibility “ ” - Uncle Ben from Spider Man

Slide 41

Slide 41 text

$44։ൃΞϓϩʔνϫʔΫϑϩʔ Building CSS

Slide 42

Slide 42 text

blueprintcss.org

Slide 43

Slide 43 text

960.gs

Slide 44

Slide 44 text

yaml.de

Slide 45

Slide 45 text

Ϟμϯϒϥ΢βͷར༻཰ͷ޲্ HTML5ɺCSS3ͷొ৔ εϚʔτϑΥϯͷ୆಄ Ϩεϙϯγϒ΢Σϒ΁ͷؔ৺

Slide 46

Slide 46 text

twitter.github.com/bootstrap/

Slide 47

Slide 47 text

foundation.zurb.com

Slide 48

Slide 48 text

Contents First ίϯςϯπ ɾ ϑΝʔετ

Slide 49

Slide 49 text

Module Approach ϞδϡʔϧΞϓϩʔν

Slide 50

Slide 50 text

FrameWork Approach λΠϙάϥϑΟʔ Ϧηοτ άϦου ϑϨʔϜϫʔΫΞϓϩʔν

Slide 51

Slide 51 text

Module Approach X X X TextTextTextText TextText TextText TextText TextText TextText tsts TextText TextText TextTextTextext tsts ૊Έ߹Θͤ ίϯϙʔωϯτ Ϟδϡʔϧ TextText tsts TextText tsts TextText TextText ϞδϡʔϧΞϓϩʔν

Slide 52

Slide 52 text

necolas.github.com/normalize.css/

Slide 53

Slide 53 text

framelessgrid.com

Slide 54

Slide 54 text

twitter.github.com/bootstrap/

Slide 55

Slide 55 text

JavaScript s jQuery CSS s Bootstrap

Slide 56

Slide 56 text

I think we’re seeing the emphasis shift from valuing trivia to valuing tools. “ ” - Rebecca Murphey at A Baseline for Front-End Developers

Slide 57

Slide 57 text

What is Tool? ։ൃऀͦΕͧΕ͕ࣗ༝ʹѻ͑ΔදݱͷετοΫ

Slide 58

Slide 58 text

ϘλϯςΩετϘλϯ ݟग़͠Ϙλϯ ը૾ࠨ খݟग़͠ɺ ςΩετ ஋ஈϘλϯ ΞΠίϯɺ ςΩετ ΞΠίϯ Ϙλϯ

Slide 59

Slide 59 text

৔ॴϕʔεͷΫϥε໊ ΧεέʔυΛ্ॻ͖͢ΔͨΊͷID HTML/CSSʹҰ؏ੑ͕ͳ͘࠶ར༻͕೉͍͠ CSS͸۩ମੑ͕ߴ͗͢Δ

Slide 60

Slide 60 text

Start designing from the content out, rather than the canvas in. “ ” - A Richer Canvas by Mark Boulton

Slide 61

Slide 61 text

σβΠϯ͕ίϯςϯπϑΝʔετͰ͋Ε͹ɺ ίʔσΟϯάΞϓϩʔν΋ಉ͡Α͏ʹ౰ͯ͸·Δɻ

Slide 62

Slide 62 text

Ϙλϯ ΞΠίϯ λΠϙάϥϑΟʔ

Slide 63

Slide 63 text

ϔομʔϞδϡʔϧ ϝσΟΞϞδϡʔϧ ΞΠίϯϞδϡʔϧ

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

inkdesign.jp/notes/2012/12/07/css-preprocessor-styleguide.html

Slide 66

Slide 66 text

Codify the Pattern ελΠϧΨΠυΛίʔσΟϯά͞Εͨ ύλʔϯϥΠϒϥϦʹ͢Δ

Slide 67

Slide 67 text

Component Bank ίϯϙʔωϯτόϯΫ

Slide 68

Slide 68 text

When you are aware of the [your own common patterns] that motivate your decisions, you can be conscious of whether you are designing by habit (“this is what I always do here…”) or whether you are actually applying the most fitting solution to the problem at hand. “ ” - Ryan Singer

Slide 69

Slide 69 text

Կ͔ΛܾΊΔಈػͱͳΔࣗ෼ࣗ਎ͷҰൠతͳ ύλʔϯʹؾ͕ͭ͘͜ͱ͕Ͱ͖Ε͹ɺ श׳΍׳ΕͰσβΠϯΛ͍ͯ͠Δͷ͔ɺ खݩʹ͋Δ໰୊ʹରͯ͠࠷΋దͨ͠ղܾΛ ͠Α͏ͱ͍ͯ͠Δͷ͔ʹ͍ͭͯ΋ ؾ͕ͭ͘͜ͱ͕Ͱ͖Δɻ “ ” - Ryan Singer

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

$44ΞʔΩςΫνϟ CSS Architecture

Slide 72

Slide 72 text

smacss.com/book/categorizing

Slide 73

Slide 73 text

Category ΧςΰϥΠζ͸ύλʔϯΛ ໌֬ʹ͢Δ ᶅ εςʔτ ᶃϕʔε ᶄϨΠΞ΢τ ᶆ Ϟδϡʔϧ

Slide 74

Slide 74 text

Base ϕʔε ϒϥ΢βʹද͍ࣔͤͨ͞σϑΥϧτ ύλʔϯԽ͕͠΍͍͢ΧςΰϦ Normalize.cssΛ௨ͨ͡ཁૉͷඪ४Խ λΠϙάϥϑΟʔ ϦϯΫͷදݱ ϑΥʔϜͷཁૉ em΍iɺ strong͕ͲΜͳݟͨ໨ʹͳΔ͔

Slide 75

Slide 75 text

Layout ϨΠΞ΢τ άϦουܥίϯϙʔωϯτ λϒϨοτ୺຤΁ͷରԠ΋ࢹ໺ʹ͍ΕΔͱ׆༻͕ ֦େ͢ΔΧςΰϦ άϦουπʔϧ͸ࠓͰ΋ଟ͘ެ։͞Ε͍ͯΔ

Slide 76

Slide 76 text

εςʔτঢ়ଶ State ཁૉͷঢ়ଶΛදͨ͢ΊͷΧςΰϦ εϚʔτϑΥϯͷΞϓϦέʔγϣϯʹ͓͍ͯ ๨Ε͕ͪͳ͕Βॏཁͳ෦෼ Τϥʔ࣌ / ඪ४࣌ දࣔ / ඇදࣔ ΞΫςΟϒ / ඇΞΫςΟϒ

Slide 77

Slide 77 text

Ϟδϡʔϧ Module ΞϓϦέʔγϣϯʹ͓͚Δ࠷΋ॏཁͰ͔ͭɺ छྨ΋਺΋ଟ͘ͳΔΧςΰϦ දݱͷύλʔϯͷதͰ΋࠷ॏཁ Ϧετ ςʔϒϧ ΞΠίϯ

Slide 78

Slide 78 text

Naming Rules ໋໊نଇ

Slide 79

Slide 79 text

Naming Rules ໋໊نଇ ϕʔε ཁૉηϨΫλɺ :hoverͳͲͷٙࣅΫϥεʹదԠ ϨΠΞ΢τ l-ɺg-Λલஔޠྫ: l-left-colɺ l-right-col εςʔτ is-Λલஔޠྫ: is-hiddenɺ is-error Ϟδϡʔϧ લஔޠͳ͠

Slide 80

Slide 80 text

Directory / File σΟϨΫτϦϑΝΠϧߏ੒

Slide 81

Slide 81 text

Simple Restriction ࣗ༝͕ଟ͍ݴޠͰ͋Δ΄Ͳɺ ։ൃऀΈ͔ͣΒ੍໿Λ࡞Δ΄͏͕͍͍ɻ

Slide 82

Slide 82 text

ߟ͑ํ൑அͷϑϨʔϜϫʔΫ

Slide 83

Slide 83 text

learnboost.github.com/stylus/

Slide 84

Slide 84 text

├── _base/ │ ├── _default.styl │ ├── _font-family.styl │ ├── _link.styl │ ├── _normalize.styl │ ├── _typography.styl │ └── index.styl ├── _layout/ │ ├── _grid.styl │ └── index.styl ├── _module/ │ ├── _button/ │ │ ├── _button.styl │ │ └── index.styl │ ├── _icon/ │ │ ├── _font-awesome.styl │ │ └── index.styl │ ├── _island/ │ │ ├── _island.styl │ │ └── index.styl │ ├── _list/ │ │ ├── _block.styl │ │ ├── _linear.styl │ │ └── index.styl │ ├── _media/ │ │ ├── _media.styl │ │ └── index.styl │ ├── _nav/ │ │ ├── _nav.styl │ │ └── index.styl │ ├── _pagination/ │ │ ├── _pagination.styl │ │ └── index.styl │ ├── _table/ │ │ ├── _table.styl │ │ └── index.styl │ ├── _texture/ │ │ ├── _texture.styl │ │ └── index.styl │ └── index.styl ├── _state/ │ ├── _state.styl │ └── index.styl ├── _helper.styl ├── _main.styl ├── _mixin.styl ├── _site-setting.styl └── master.styl

Slide 85

Slide 85 text

├── _base/ ├── _layout/ ├── _module/ └── _state/

Slide 86

Slide 86 text

├── _helper.styl ├── _main.styl ├── _mixin.styl ├── _site-setting.styl └── master.styl

Slide 87

Slide 87 text

_base/ ├── _default.styl ├── _font-family.styl ├── _link.styl ├── _normalize.styl ├── _typography.styl └── index.styl

Slide 88

Slide 88 text

@import "_normalize" @import "_default" @import "_link" @import "_font-family" @import "_typography"

Slide 89

Slide 89 text

_module ├── _button/ ├── _icon/ ├── _island/ ├── _list/ ├── _media/ ├── _nav/ ├── _pagination/ ├── _table/ ├── _texture/ └── index.styl

Slide 90

Slide 90 text

Component Bank

Slide 91

Slide 91 text

Scaffolding ࠎ૊Έɺ ଍৔

Slide 92

Slide 92 text

Scaffolding Α͘ར༻͢ΔύλʔϯΛूத؅ཧ͢ΔҙຯͰ΋ ඇৗʹڧྗͳπʔϧɻ ίϯϙʔωϯτόϯΫͱ૬ੑ΋͍͍ɻ

Slide 93

Slide 93 text

·ͱΊ Why?

Slide 94

Slide 94 text

q Smart Phone  Desktop 

Slide 95

Slide 95 text

Smart Phone  ϏδϡΞϧύλʔϯ͸ PCͱൺ΂ͯগͳ͘ͳΔ

Slide 96

Slide 96 text

Smart Phone  εΫϦʔϯεϖʔε͕খ͍͞ εϚʔτϑΥϯΞϓϦ͸ 1$ͱൺ΂Ε͹ݶΒΕͨ දݱ͔͠Ͱ͖ͳ͍

Slide 97

Slide 97 text

# Iteration ։ൃͷεϐʔυΑΓ΋ɺ վળͷεϐʔυʹϑΥʔΧεɻ $44͸ͦͷվળͷϓϩηεͰ ϘτϧωοΫʹͳΓ΍͍͢ɻ

Slide 98

Slide 98 text

Do Not Re-invent the Wheel ίϯϙʔωϯτόϯΫ+ sca!oldingʹ ϘΠϥʔϓϨʔτ 

Slide 99

Slide 99 text

Innovative ֵ৽తͳΠϯλʔϑΣΠε͸ ౰ͨΓલͷΠϯλʔϑΣΠεʹ Αͬͯࢧ͑ΒΕ͍ͯΔɻ 

Slide 100

Slide 100 text

ܕͷ͋Δਓ͕ܕΛഁΔ͜ͱΛܕഁΓͱ͍͍ɺ ܕͷͳ͍ਓ͕ܕΛഁΔ͜ͱΛܕແ͠ͱ͍͏ɻ “ ” - ແண੒ګBUࢠڙ૬ஊࣨ

Slide 101

Slide 101 text

$44ΞʔΩςΫνϟ͸ ίϯϙʔωϯτόϯΫͱͷ ͭͳ͗ͱͳΔΞϓϩʔν Architecture 

Slide 102

Slide 102 text

Best Practice ϕετϓϥΫςΟε

Slide 103

Slide 103 text



Slide 104

Slide 104 text

Our greatest weakness lies in giving up. The most certain way to succeed is always to try just one more time. “ ” - Tomas A. Edison

Slide 105

Slide 105 text

Thank you!