• モダンフロントエンドではスコープが切れる仕組みがある
  • react
  • vue : scoped
• 従来のフロントエンドではJSによるCSS(DOM)操作は手続き的だった

    <nav class='menu--closed'>MENU</nav>
    .menu--closed {
        display: none;
    }
    .menu--opened {
        display: block;
    }
    menu = document.queryselecter('.menu')
    menu.....

<nav style={{display: isOpened ? 'block' : 'none'}}>MENU</nav>

• Stateの値が分かればどのスタイルが適用されるかが分かる、つまり別にCSSに状態を明示しなくてもいつ使われるか分からなくならない
  • modifierが担う役割をJSが担える
• Reactならスタイルのためのクラス名を考えなくて良い(そうか？)
  • [JS】Vueと比較してReactが使いやすく感じる個人的理由(2020)](https://jsnotice.com/posts/2020-05-08/

<div style={{color: isRed ? 'red' : 'black'}}>
  hello world!
</div>

//Tailwindを取り入れやすい
<div className={isRed ? 'text-red-900' : 'text-gray-900'}>
  hello world!
</div>

<div class='txt' :class='{"txt--red" : isRed}'>
  hello world!
<div>

<style scoped>
    .txt {
        color: black;
    }
    .txt--red {
        color: red;
    }
</style>

• どうせ宣言的なら確かにJSでスタイル直接指定したほうが効率的かも