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

CSS design independent of Sass

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for takanorip takanorip
October 03, 2019
Technology
2
1.1k

CSS design independent of Sass

Avatar for takanorip

takanorip

October 03, 2019
Tweet

More Decks by takanorip

See All by takanorip
Design System Documentation Tooling 2025
Avatar for takanorip takanorip
3
2.3k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
1
900
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
650
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
4.7k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
250
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
5
1k
効果的な管理画面を デザインをするために 避けるべき5つの罠
Avatar for takanorip takanorip
15
7.7k
社内管理画面のデザインもプロダクトデザイン
Avatar for takanorip takanorip
5
2.2k
早わかり W3C Community Group
Avatar for takanorip takanorip
0
550

Other Decks in Technology

See All in Technology
Amazon Bedrock Knowledge Basesチャンキング解説！
Avatar for 野口碧生 aoinoguchi
0
160
SREチームをどう作り、どう育てるか ― Findy横断SREのマネジメント
Avatar for adachi.ryo rvirus0817
0
350
AIが実装する時代、人間は仕様と検証を設計する
Avatar for Gota gotalab555
1
330
ファインディの横断SREがTakumi byGMOと取り組む、セキュリティと開発スピードの両立
Avatar for adachi.ryo rvirus0817
1
1.6k
制約が導く迷わない設計 〜 信頼性と運用性を両立するマイナンバー管理システムの実践 〜
Avatar for ないとー bwkw
3
1k
AWS Network Firewall Proxyを触ってみた
Avatar for nagisa_53 nagisa53
1
240
22nd ACRi Webinar - NTT Kawahara-san's slide
Avatar for Nao Sumikawa nao_sumikawa
0
100
OWASP Top 10:2025 リリースと 少しの日本語化にまつわる裏話
Avatar for Riotaro OKADA okdt
PRO
3
850
1,000 にも届く AWS Organizations 組織のポリシー運用をちゃんとしたい、という話
Avatar for kazzpapa3 kazzpapa3
0
170
プロダクト成長を支える開発基盤とスケールに伴う課題
Avatar for yuu26 yuu26
4
1.4k
Cloud Runでコロプラが挑む 生成AI×ゲーム『神魔狩りのツクヨミ』の裏側
Avatar for COLOPL Inc. colopl
0
140
旅先で iPad + Neovim で iOS 開発・執筆した話
Avatar for ZOZO Developers zozotech
PRO
0
100

Featured

See All Featured
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
650
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
910
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
196
71k
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
2
2.4k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.3k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.1k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
120
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.2k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k

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