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

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

Transcript

1. STUDIO ARCANA CO.,LTD TS CSS
2. PSI JavaScript CSS View
3. FV ↪︎ gma PSI ↪︎JS ↪︎ CSS PC SP PC SP PC SP
4. CSS BEM( ) OOCSS( ) SMACCS( ):bootstrap( ) ↪︎ .header-top__main-title wine-red class Bootstrap CSS
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
6. CSS OOCSS Block e m class= btn btn large btn red SMACCS class= menu is-active BEM modi er JS bootstrap ㅟ ㅟ ㅟ ㅟ ㅟ ㅟ CSS
7. CSS CSS CSS BEM
10. Block ↪︎Block
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)
12. block block .estateTable block block .estateTable
13. > Foreach
14. BEM block .e m " - Pattern Sass
15. CSS CSS CSS BEM
16. CSS Enduring CSS CSS CSS Ben Frain CSS CSS ( ) ECSS
17. CSS CSS 策 ECSS
18. 策 策 CSS
19. CSS 策 BEM CSS ↪︎ BEM BEM BEM
20. CSS 綻 CSS 策 Web web web CSS CSS nuxt.js
21. https://github.com/manabuyasuda/styleguide/blob/master/how-to-bem.md CSS / / 2021 /
22. STUDIO ARCANA CO.,LTD 終
23. 補⾜
24. HTML ↪︎
25. .headerBottomMobile__li link __li link .headerBottomMobile __li > link Scss & & block CSS