『保守性の高いcssを書く』という不可能に立ち向かう
by
やし
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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してしまえばこんな設計どうこうとか考えなくてい いんですけどね