TSデザイン改修で得たCSS設計の学び

デザイン改修に併せて行ったCSS設計の見直しについてまとめました。

Transcript

1. STUDIO ARCANA CO.,LTD
   TS CSS
   

   View Slide

2. PSI
   JavaScript
   CSS
   View
   

   View Slide

3. FV
   ↪︎ gma
   PSI
   ↪︎JS
   ↪︎ CSS
   PC
   SP
   PC
   SP
   PC
   SP
   

   View Slide

4. CSS
   BEM( ) OOCSS( ) SMACCS( ):bootstrap( )
   ↪︎
   .header-top__main-title wine-red
   class
   Bootstrap
   CSS
   

   View Slide

5. MindBEMding
   .block__element--modi er
   Block:
   Element: Block
   Modi er: Block Element
   .header__button red
   .recommendCondition
   ぽ .headerTop__mainTitle wineRed
   × .header-top__main-title wine-red
   CSS
   BEM
   BEM CSS
   BEM block__element_modi er
   MindBEMding BEM
   BEM
   MindBEMding
   

   View Slide

6. CSS
   OOCSS
   Block e m
   class= btn btn large btn red
   SMACCS
   class= menu is-active
   BEM modi er JS
   bootstrap
   ㅟ ㅟ ㅟ ㅟ ㅟ ㅟ
   CSS
   

   View Slide

7. CSS
   CSS CSS
   BEM
   

   View Slide

8. View Slide

9. View Slide

10. Block
    ↪︎Block
    

    View Slide

11. .b__e e
    modi er
    .b__e block
    element
    .b__e e
    A .headerTop__logo image (.b__e e)
    B .headerTop__logoImage (.b__e)
    

    View Slide

12. block
    block .estateTable
    block
    block .estateTable
    

    View Slide

13. >
    Foreach
    

    View Slide

14. BEM
    block .e m
    " - Pattern Sass
    

    View Slide

15. CSS
    CSS CSS
    BEM
    

    View Slide

16. CSS
    Enduring CSS CSS CSS
    Ben Frain
    CSS
    CSS ( )
    ECSS
    

    View Slide

17. CSS
    CSS 策
    ECSS
    

    View Slide

18. 策
    策 CSS
    

    View Slide

19. CSS
    策 BEM CSS
    ↪︎
    BEM
    BEM
    BEM
    

    View Slide

20. CSS
    綻
    CSS
    策 Web
    web web CSS
    CSS
    nuxt.js
    

    View Slide

21. https://github.com/manabuyasuda/styleguide/blob/master/how-to-bem.md
    CSS / / 2021 /
    

    View Slide

22. STUDIO ARCANA CO.,LTD
    終
    

    View Slide

23. 補⾜
    

    View Slide

24. HTML
    ↪︎
    

    View Slide

25. .headerBottomMobile__li link
    __li link
    .headerBottomMobile
    __li > link
    Scss &
    & block
    CSS
    

    View Slide