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

CSS design independent of Sass

takanorip
October 03, 2019

CSS design independent of Sass

takanorip

October 03, 2019
Tweet

More Decks by takanorip

Other Decks in Technology

Transcript

  1. Sassに頼らない
    CSS設計
    Takanori Oki
    @Meguro.css 2019/10/03

    View Slide

  2. 自己紹介
    • 大木尊紀 / takanorip
    • フロントエンドエンジニア
    • Figma、ウェブフォント、Web Components
    • 最近のマイブーム:

    良い写真撮れたらsuzuriでシャツ作ること

    View Slide

  3. Sass使ってますか?

    View Slide

  4. Sass is useful!

    View Slide

  5. But,

    View Slide

  6. Too FAT!!!

    View Slide

  7. Sassは機能が多すぎる
    • 便利だけど使いこなすのが難しいし、

    機能が多すぎて把握できない。
    • 注意が必要な機能もある。

    (@mixin、@extend、ネスト、など)
    • Sassの機能を使うことが目的になってない?

    View Slide

  8. Sassに頼らずシンプルに
    CSS設計をするのが良さそう

    (あくまで個人の見解です)

    View Slide

  9. 1. 上書きをなくす

    View Slide

  10. 悪い例

    View Slide

  11. CSSの上書きが発生してる!

    View Slide

  12. 良い例

    View Slide

  13. View Slide

  14. こういう悪い例は
    過度な共通化をしている
    場合に発生しがち

    View Slide

  15. CSSのDRYは諦める

    View Slide

  16. Custom properties

    View Slide

  17. Custom properties
    • 別名CSS変数

    View Slide

  18. Custom properties
    • :root =
    • 親要素で定義されたCustom propertiesは子
    要素でも参照できる
    • var()で変数を参照する
    • var(variable, default)

    View Slide

  19. Theming
    • 色やフォントの大きさなど、パーツの装飾要
    素をCustom propertiesで定義し、それを利
    用することでstyleを統一する。
    • 過度な共通化を防げる
    • 全体のテーマなどを一気に変更したいときに
    便利(ダークテーマ対応とか)

    View Slide

  20. 2. ScopedなCSSを書く

    View Slide

  21. ScopedなCSSを書く方法
    • BEM、FLOCSSなどの命名規則を取り入れる
    • CSS Modules、CSS in JS

    (styled-components、emotionなど)
    • Shadow DOMを使う

    View Slide

  22. ScopedなCSSを書くために
    Sassは必要ない

    View Slide

  23. 3. フラットなCSSを書く

    View Slide

  24. ネストの深いCSSの闇
    • 検索しにくいので開発効率が落ちる
    • 詳細度との戦いがつらい
    • 可読性が落ちる、見にくい

    View Slide

  25. ネストを深くするのは
    最終手段

    View Slide

  26. おわり!

    View Slide