CSS design independent of Sass

78f5efc1e98c71e473cc7827de1c5db4?s=47 takanorip
October 03, 2019

CSS design independent of Sass

78f5efc1e98c71e473cc7827de1c5db4?s=128

takanorip

October 03, 2019
Tweet

Transcript

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

  2. 自己紹介 • 大木尊紀 / takanorip • フロントエンドエンジニア • Figma、ウェブフォント、Web Components

    • 最近のマイブーム:
 良い写真撮れたらsuzuriでシャツ作ること
  3. Sass使ってますか?

  4. Sass is useful!

  5. But,

  6. Too FAT!!!

  7. Sassは機能が多すぎる • 便利だけど使いこなすのが難しいし、
 機能が多すぎて把握できない。 • 注意が必要な機能もある。
 (@mixin、@extend、ネスト、など) • Sassの機能を使うことが目的になってない?

  8. Sassに頼らずシンプルに CSS設計をするのが良さそう
 (あくまで個人の見解です)

  9. 1. 上書きをなくす

  10. 悪い例

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

  12. 良い例

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

  15. CSSのDRYは諦める

  16. Custom properties

  17. Custom properties • 別名CSS変数

  18. Custom properties • :root = <html> • 親要素で定義されたCustom propertiesは子 要素でも参照できる

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

    便利(ダークテーマ対応とか)
  20. 2. ScopedなCSSを書く

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

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

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

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

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

  26. おわり!