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

CSS design independent of Sass

takanorip
October 03, 2019
Technology
2
1k

CSS design independent of Sass

takanorip

October 03, 2019
Tweet

More Decks by takanorip

See All by takanorip
Eleventy3.0 で始める爆速個人ブログ開発！
takanorip
0
96
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
takanorip
5
760
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.8k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.7k
早わかり W3C Community Group
takanorip
0
450
Ubieとアクセシビリティのこれからを考える
takanorip
0
420
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.8k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
3.1k

Other Decks in Technology

See All in Technology
WAF に頼りすぎない AWS WAF 運用術 meguro sec #1
izzii
0
460
Ask! NIKKEI RAG検索技術の深層
hotchpotch
13
2.8k
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
11
2.7k
トラシューアニマルになろう ～開発者だからこそできる、安定したサービス作りの秘訣～
jacopen
2
1.5k
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
740
Platform Engineeringは自由のめまい
nwiizo
4
1.9k
All you need to know about InnoDB Primary Keys
lefred
0
120
君はPostScriptなウィンドウシステム 「NeWS」をご存知か?/sunnews
koyhoge
0
720
インフラをつくるとはどういうことなのか、 あるいはPlatform Engineeringについて
nwiizo
5
2.1k
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
1k
地方拠点で エンジニアリングマネージャーってできるの？ 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
130
プロセス改善による品質向上事例
tomasagi
1
1.6k

Featured

See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
KATA
mclloyd
29
14k
YesSQL, Process and Tooling at Scale
rocio
171
14k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Designing for Performance
lara
604
68k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Adopting Sorbet at Scale
ufuk
74
9.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
GraphQLとの向き合い方2022年版
quramy
44
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k

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. おわり！