『保守性の高いcssを書く』という不可能に立ち向かう
by
やし
×
Copy
Open
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Slide 1
Slide 1 text
『保守性の⾼いcssを書く』という 不可能に⽴ち向かう גࣜձࣾΪϑςΟ 4BB4%JW !ZBTIJ
Slide 2
Slide 2 text
©2019 giftee Inc. all rights reserved 2 σβΠϯϦχϡʔΞϧ TQ
Slide 3
Slide 3 text
©2019 giftee Inc. all rights reserved 3 σβΠϯϦχϡʔΞϧ QD
Slide 4
Slide 4 text
©2019 giftee Inc. all rights reserved 4 σβΠϯϦχϡʔΞϧ QD
Slide 5
Slide 5 text
©2019 giftee Inc. all rights reserved ࠓ͢͜ͱ 5 • なぜ保守性の⾼いcssを書くのは難しい(不可能︖) なのか • ⽴ち向かうアプローチ • 保守性の⾼いcssを書けるかもしれない⽅法
Slide 6
Slide 6 text
©2019 giftee Inc. all rights reserved ࠓ͞ͳ͍͜ͱ 6 • ナウなヤングにバカウケのcssプロパティ – ex. flexbox, CSS Grid, ...etc • cssの実装⽅針(書き⽅) • 保守性の⾼いcssを書く⽅法
Slide 7
Slide 7 text
࣭ʂ ©2019 giftee Inc. all rights reserved 7
Slide 8
Slide 8 text
DTTΛॻ͘ͷ͕ಘҙͳਓʂ ©2019 giftee Inc. all rights reserved 8
Slide 9
Slide 9 text
͜͜Ͱख͕ڍ͕Βͳ͍༧ఆ ©2019 giftee Inc. all rights reserved 9
Slide 10
Slide 10 text
DTTΛॻ͘ͷ͕͖ͳਓʂ ©2019 giftee Inc. all rights reserved 10
Slide 11
Slide 11 text
͔ͨ͠͠Βएׯख͕ڍ͕Δ͔ ©2019 giftee Inc. all rights reserved 11
Slide 12
Slide 12 text
©2019 giftee Inc. all rights reserved 12 ͳͥಘҙͳਓډͳ͍ͷ͔ • (jsなどの)プログラミングと違う・・・︖ • 求められたページの⾒た⽬を作るだけならできる、けど・・・。
Slide 13
Slide 13 text
อकੑߴ͘ ߏԽͯ͠ DTTΛॻ͘ ˠ͍͠ ©2019 giftee Inc. all rights reserved 13
Slide 14
Slide 14 text
ͳ͍ͥ͠ͷ͔ ˠDTT͕$BTDBEJOH4UZMF 4IFFU͔ͩΒ ©2019 giftee Inc. all rights reserved 14
Slide 15
Slide 15 text
©2019 giftee Inc. all rights reserved 15 カスケーディングとは,ある要素のあるプロパティに対する宣⾔が複 数あるとき,宣⾔の“強さ”の関係を定めて,うち 1 つの宣⾔だけが有 効になるようにするしくみである。 出典: http://www.tg.rim.or.jp/~hexane/ach/lbcs/lbcs2-05.htm
Slide 16
Slide 16 text
©2019 giftee Inc. all rights reserved 16 DBTDBEJOH • 宣⾔の強さは仕様上決まっているものであって、コード上に明⽰さ れない • スタイル当てても適⽤されない/思ってないところにスタイルが当 たる
Slide 17
Slide 17 text
ʮอकੑͷߴ͍DTTΛॻ͘ʯͷ͕͍͠ཧ༝ ͦͷDTTͷ༷ DBTDBEJOH ©2019 giftee Inc. all rights reserved 17
Slide 18
Slide 18 text
©2019 giftee Inc. all rights reserved 18 • Rails Developers Meetup 2019 • CSSの技術的負債との向き合い⽅ / How to Deal with Technical Debt of CSS (ja) • https://speakerdeck.com/upinetree/how-to-deal-with- technical-debt-of-css-ja
Slide 19
Slide 19 text
©2019 giftee Inc. all rights reserved 19 DTTͷٕज़తෛ࠴ • cssを変更したら思っていたところと違うところに影響した • cssがどこにどう作⽤しているか分からないので⼿を加えたくない • 指定したスタイルがなぜか適⽤されない • 使われていないcssがあるけど怖くて消せない
Slide 20
Slide 20 text
©2019 giftee Inc. all rights reserved 20 引⽤: CSSの技術的負債との向き合い⽅ / How to Deal with Technical Debt of CSS (ja)
Slide 21
Slide 21 text
©2019 giftee Inc. all rights reserved 21 引⽤: CSSの技術的負債との向き合い⽅ / How to Deal with Technical Debt of CSS (ja)
Slide 22
Slide 22 text
©2019 giftee Inc. all rights reserved 22 DTTʮؔ৺ͷ୩ʯʹଘࡏ͢Δ エンジニア • cssは苦⼿意識があるので⼿を出しづらい デザイナー • デザインの表現⼿段の⼀つであり、構造を設計しようというモチ ベーションが湧きづらい
Slide 23
Slide 23 text
ʮอकੑͷߴ͍DTTΛॻ͘ʯͷ͕͍͠ཧ༝ ͦͷDTTͷཱͪҐஔ ؔ৺ͷ୩ ©2019 giftee Inc. all rights reserved 23
Slide 24
Slide 24 text
ʮอकੑͷߴ͍DTTΛॻ͘ʯͷ͕͍͠ཧ༝ ͦͷDTTͷ༷ DBTDBEJOH ͦͷDTTͷཱͪҐஔ ؔ৺ͷ୩ ©2019 giftee Inc. all rights reserved 24
Slide 25
Slide 25 text
©2019 giftee Inc. all rights reserved 25 DTTͷ༷ DBTDBEJOH ʹཱ͔ͪ͏ • cssの設計を考えていく • 様々な設計思想がある • 「ファイルの分け⽅」と「命名規則」 • OOCSS, FLOCSS, SMACSS, RSCSS, ...etc • BEMなどの命名規則
Slide 26
Slide 26 text
©2019 giftee Inc. all rights reserved 26 ࠓճ࠾༻ͨ͠ͷ SMACSS • base, layout, module, state, themeに分ける • (BEMは不採⽤) • 理由: SMACSSに命名規則が⼊っている
Slide 27
Slide 27 text
©2019 giftee Inc. all rights reserved 27 ʮอकੑͷߴ͍DTTΛॻ͘ʯͨΊͷΞϓϩʔν ͦͷ エンジニアがちゃんと検討する • 何かを構造的に組み⽴てることが得意 既存の設計⽅針に乗ると良さそう • cascadingをコントロールしやすい
Slide 28
Slide 28 text
©2019 giftee Inc. all rights reserved 28 DTTͷཱͪҐஔ ؔ৺ͷ୩ ʹཱ͔ͪ͏ 引⽤: CSSの技術的負債との向き合い⽅ / How to Deal with Technical Debt of CSS (ja)
Slide 29
Slide 29 text
©2019 giftee Inc. all rights reserved 29 ʮؔ৺ͷ୩ʯΛʮຒΊΔʯ • cssを、デザインを表現するための⼿段だと(雑に)捉えると・・・ • 表現対象となるデザインが(ある程度)決まりを持ったものになって いてほしい • デザインシステムの導⼊ – 決まりのあるデザイン→構造化したcssに落とし込みやすい
Slide 30
Slide 30 text
©2019 giftee Inc. all rights reserved 30 ʮؔ৺ͷ୩ʯΛʮຒΊΔʯ • デザインはデザイナーと⼀緒に作っていくぐらいがよいのでは – デザインはデザイナーだけのものではない • cssを書くのはエンジニアがやったほうが多分良い – 実装レベルで構造化するのはエンジニアのほうが得意
Slide 31
Slide 31 text
©2019 giftee Inc. all rights reserved 31 ʮอकੑͷߴ͍DTTΛॻ͘ʯͨΊͷΞϓϩʔν ͦͷ デザインをエンジニアとデザイナーが⼀緒になって作る お互いの得意分野を活かす
Slide 32
Slide 32 text
©2019 giftee Inc. all rights reserved 32 ·ͱΊ • cssは、その仕様や⽴ち位置的に保守性の⾼いものにし⾟い • 完璧に保守性を持ったcssにするのは不可能 • でも⽴ち向かわないと何も変わらない • やっていき
Slide 33
Slide 33 text
©2019 giftee Inc. all rights reserved 33 Φν • 実はCSS in JSしてしまえばこんな設計どうこうとか考えなくてい いんですけどね