Sassに頼らないCSS設計Takanori Oki@Meguro.css 2019/10/03
View Slide
自己紹介• 大木尊紀 / takanorip• フロントエンドエンジニア• Figma、ウェブフォント、Web Components• 最近のマイブーム: 良い写真撮れたらsuzuriでシャツ作ること
Sass使ってますか?
Sass is useful!
But,
Too FAT!!!
Sassは機能が多すぎる• 便利だけど使いこなすのが難しいし、 機能が多すぎて把握できない。• 注意が必要な機能もある。 (@mixin、@extend、ネスト、など)• Sassの機能を使うことが目的になってない?
Sassに頼らずシンプルにCSS設計をするのが良さそう (あくまで個人の見解です)
1. 上書きをなくす
悪い例
CSSの上書きが発生してる!
良い例
こういう悪い例は過度な共通化をしている場合に発生しがち
CSSのDRYは諦める
Custom properties
Custom properties• 別名CSS変数
Custom properties• :root = • 親要素で定義されたCustom propertiesは子要素でも参照できる• var()で変数を参照する• var(variable, default)
Theming• 色やフォントの大きさなど、パーツの装飾要素をCustom propertiesで定義し、それを利用することでstyleを統一する。• 過度な共通化を防げる• 全体のテーマなどを一気に変更したいときに便利(ダークテーマ対応とか)
2. ScopedなCSSを書く
ScopedなCSSを書く方法• BEM、FLOCSSなどの命名規則を取り入れる• CSS Modules、CSS in JS (styled-components、emotionなど)• Shadow DOMを使う
ScopedなCSSを書くためにSassは必要ない
3. フラットなCSSを書く
ネストの深いCSSの闇• 検索しにくいので開発効率が落ちる• 詳細度との戦いがつらい• 可読性が落ちる、見にくい
ネストを深くするのは最終手段
おわり!