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