『保守性の高いcssを書く』という不可能に立ち向かう

2019/06/18
giftee tech bash #1
で発表した資料です。

Transcript

1. 『保守性の⾼いcssを書く』という
   不可能に⽴ち向かう
   גࣜձࣾΪϑςΟ 4BB4%JW
   !ZBTIJ
   

   View Slide

2. ©2019 giftee Inc. all rights
   reserved
   2
   σβΠϯϦχϡʔΞϧ TQ
   
   

   View Slide

3. ©2019 giftee Inc. all rights
   reserved
   3
   σβΠϯϦχϡʔΞϧ QD
   
   

   View Slide

4. ©2019 giftee Inc. all rights
   reserved
   4
   σβΠϯϦχϡʔΞϧ QD
   
   

   View Slide

5. ©2019 giftee Inc. all rights reserved
   ࠓ೔࿩͢͜ͱ
   5
   • なぜ保守性の⾼いcssを書くのは難しい(不可能︖)
   なのか
   • ⽴ち向かうアプローチ
   • 保守性の⾼いcssを書けるかもしれない⽅法
   

   View Slide

6. ©2019 giftee Inc. all rights reserved
   ࠓ೔࿩͞ͳ͍͜ͱ
   6
   • ナウなヤングにバカウケのcssプロパティ
   – ex. flexbox, CSS Grid, ...etc
   • cssの実装⽅針(書き⽅)
   • 保守性の⾼いcssを書く⽅法
   

   View Slide

7. ࣭໰ʂ
   ©2019 giftee Inc. all rights reserved 7
   

   View Slide

8. DTTΛॻ͘ͷ͕ಘҙͳਓʂ
   ©2019 giftee Inc. all rights reserved 8
   

   View Slide

9. ͜͜Ͱख͕ڍ͕Βͳ͍༧ఆ
   
   ©2019 giftee Inc. all rights reserved 9
   

   View Slide

10. DTTΛॻ͘ͷ͕޷͖ͳਓʂ
    ©2019 giftee Inc. all rights reserved 10
    

    View Slide

11. ΋͔ͨ͠͠Βएׯख͕ڍ͕Δ͔΋
    
    ©2019 giftee Inc. all rights reserved 11
    

    View Slide

12. ©2019 giftee Inc. all rights
    reserved
    12
    ͳͥಘҙͳਓ͸ډͳ͍ͷ͔
    • (jsなどの)プログラミングと違う・・・︖
    • 求められたページの⾒た⽬を作るだけならできる、けど・・・。
    

    View Slide

13. อकੑߴ͘ ߏ଄Խͯ͠
    DTTΛॻ͘
    ˠ೉͍͠
    ©2019 giftee Inc. all rights reserved 13
    

    View Slide

14. ͳͥ೉͍͠ͷ͔
    ˠDTT͕$BTDBEJOH4UZMF 4IFFU͔ͩΒ
    ©2019 giftee Inc. all rights reserved 14
    

    View Slide

15. ©2019 giftee Inc. all rights
    reserved
    15
    カスケーディングとは，ある要素のあるプロパティに対する宣⾔が複
    数あるとき，宣⾔の“強さ”の関係を定めて，うち 1 つの宣⾔だけが有
    効になるようにするしくみである。
    出典: http://www.tg.rim.or.jp/~hexane/ach/lbcs/lbcs2-05.htm
    

    View Slide

16. ©2019 giftee Inc. all rights
    reserved
    16
    DBTDBEJOH
    • 宣⾔の強さは仕様上決まっているものであって、コード上に明⽰さ
    れない
    • スタイル当てても適⽤されない/思ってないところにスタイルが当
    たる
    

    View Slide

17. ʮอकੑͷߴ͍DTTΛॻ͘ʯͷ͕೉͍͠ཧ༝
    ͦͷDTTͷ࢓༷ DBTDBEJOH
    
    ©2019 giftee Inc. all rights reserved 17
    

    View Slide

18. ©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
    

    View Slide

19. ©2019 giftee Inc. all rights
    reserved
    19
    DTTͷٕज़తෛ࠴
    • cssを変更したら思っていたところと違うところに影響した
    • cssがどこにどう作⽤しているか分からないので⼿を加えたくない
    • 指定したスタイルがなぜか適⽤されない
    • 使われていないcssがあるけど怖くて消せない
    

    View Slide

20. ©2019 giftee Inc. all rights
    reserved
    20
    引⽤: CSSの技術的負債との向き合い⽅ / How to Deal with Technical Debt
    of CSS (ja)
    

    View Slide

21. ©2019 giftee Inc. all rights
    reserved
    21
    引⽤: CSSの技術的負債との向き合い⽅ / How to Deal with Technical Debt
    of CSS (ja)
    

    View Slide

22. ©2019 giftee Inc. all rights
    reserved
    22
    DTT͸ʮؔ৺ͷ୩ʯʹଘࡏ͢Δ
    エンジニア
    • cssは苦⼿意識があるので⼿を出しづらい
    デザイナー
    • デザインの表現⼿段の⼀つであり、構造を設計しようというモチ
    ベーションが湧きづらい
    

    View Slide

23. ʮอकੑͷߴ͍DTTΛॻ͘ʯͷ͕೉͍͠ཧ༝
    ͦͷDTTͷཱͪҐஔ ؔ৺ͷ୩
    
    ©2019 giftee Inc. all rights reserved 23
    

    View Slide

24. ʮอकੑͷߴ͍DTTΛॻ͘ʯͷ͕೉͍͠ཧ༝
    ͦͷDTTͷ࢓༷ DBTDBEJOH
    
    ͦͷDTTͷཱͪҐஔ ؔ৺ͷ୩
    
    ©2019 giftee Inc. all rights reserved 24
    

    View Slide

25. ©2019 giftee Inc. all rights
    reserved
    25
    DTTͷ࢓༷ DBTDBEJOH
    ʹཱͪ޲͔͏
    • cssの設計を考えていく
    • 様々な設計思想がある
    • 「ファイルの分け⽅」と「命名規則」
    • OOCSS, FLOCSS, SMACSS, RSCSS, ...etc
    • BEMなどの命名規則
    

    View Slide

26. ©2019 giftee Inc. all rights
    reserved
    26
    ࠓճ࠾༻ͨ͠΋ͷ
    SMACSS
    • base, layout, module, state, themeに分ける
    • (BEMは不採⽤)
    • 理由: SMACSSに命名規則が⼊っている
    

    View Slide

27. ©2019 giftee Inc. all rights
    reserved
    27
    ʮอकੑͷߴ͍DTTΛॻ͘ʯͨΊͷΞϓϩʔν ͦͷ
    エンジニアがちゃんと検討する
    • 何かを構造的に組み⽴てることが得意
    既存の設計⽅針に乗ると良さそう
    • cascadingをコントロールしやすい
    

    View Slide

28. ©2019 giftee Inc. all rights
    reserved
    28
    DTTͷཱͪҐஔ ؔ৺ͷ୩
    ʹཱͪ޲͔͏
    引⽤: CSSの技術的負債との向き合い⽅ / How to Deal with Technical Debt
    of CSS (ja)
    

    View Slide

29. ©2019 giftee Inc. all rights
    reserved
    29
    ʮؔ৺ͷ୩ʯΛʮຒΊΔʯ
    • cssを、デザインを表現するための⼿段だと(雑に)捉えると・・・
    • 表現対象となるデザインが(ある程度)決まりを持ったものになって
    いてほしい
    • デザインシステムの導⼊
    – 決まりのあるデザイン→構造化したcssに落とし込みやすい
    

    View Slide

30. ©2019 giftee Inc. all rights
    reserved
    30
    ʮؔ৺ͷ୩ʯΛʮຒΊΔʯ
    • デザインはデザイナーと⼀緒に作っていくぐらいがよいのでは
    – デザインはデザイナーだけのものではない
    • cssを書くのはエンジニアがやったほうが多分良い
    – 実装レベルで構造化するのはエンジニアのほうが得意
    

    View Slide

31. ©2019 giftee Inc. all rights
    reserved
    31
    ʮอकੑͷߴ͍DTTΛॻ͘ʯͨΊͷΞϓϩʔν ͦͷ
    デザインをエンジニアとデザイナーが⼀緒になって作る
    お互いの得意分野を活かす
    

    View Slide

32. ©2019 giftee Inc. all rights
    reserved
    32
    ·ͱΊ
    • cssは、その仕様や⽴ち位置的に保守性の⾼いものにし⾟い
    • 完璧に保守性を持ったcssにするのは不可能
    • でも⽴ち向かわないと何も変わらない
    • やっていき
    

    View Slide

33. ©2019 giftee Inc. all rights
    reserved
    33
    Φν
    • 実はCSS in JSしてしまえばこんな設計どうこうとか考えなくてい
    いんですけどね
    

    View Slide