Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

tatsumiakahori

June 27, 2022
Tweet

More Decks by tatsumiakahori

Other Decks in Programming

Transcript

  1. 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
  2. CSS OOCSS Block e m class= btn btn large btn

    red SMACCS class= menu is-active BEM modi er JS bootstrap ㅟ ㅟ ㅟ ㅟ ㅟ ㅟ CSS
  3. .b__e e modi er .b__e block element .b__e e A

    .headerTop__logo image (.b__e e) B .headerTop__logoImage (.b__e)