$30 off During Our Annual Pro Sale. View Details »

CSS design independent of Sass

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
1.1k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
0
830
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
600
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
4.5k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
220
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
5
990
効果的な管理画面を デザインをするために 避けるべき5つの罠
Avatar for takanorip takanorip
15
7.6k
社内管理画面のデザインもプロダクトデザイン
Avatar for takanorip takanorip
5
2.1k
早わかり W3C Community Group
Avatar for takanorip takanorip
0
540

Other Decks in Technology

See All in Technology
寫​了​幾年​ Code，​然後​呢？​軟體​工程師​必須重新​認識​的​ DevOps
Avatar for Cheng-Wei Chen cheng_wei_chen
1
1.5k
コンテキスト情報を活用し個社最適化されたAI Agentを実現する4つのポイント
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
1
1.7k
re:Invent2025 3つの Frontier Agents を紹介 / introducing-3-frontier-agents
Avatar for tomoki10 tomoki10
0
300
Amazon Bedrock Knowledge Bases × メタデータ活用で実現する検証可能な RAG 設計
Avatar for Tomoaki tomoaki25
6
1.4k
生成AI時代におけるグローバル戦略思考
Avatar for Takaaki Yayoi taka_aki
0
210
【ServiceNow SNUG Meetup LT deck】WorkFlow Editorの廃止と Flow Designerへの移行戦略
Avatar for NIWATO niwato
0
110
SREには開発組織全体で向き合う
Avatar for k-nagase koh_naga
0
390
「図面」から「法則」へ 〜メタ視点で読み解く現代のソフトウェアアーキテクチャ〜
Avatar for Satoshi Kobayashi scova0731
0
400
Microsoft Agent 365 についてゆっくりじっくり理解する！
Avatar for skmkzyk skmkzyk
0
410
Agent Skillsがハーネスの垣根を超える日
Avatar for Gota gotalab555
3
1.2k
AI駆動開発における設計思想 認知負荷を下げるフロントエンドアーキテクチャ/ 20251211 Teppei Hanai
Avatar for SHIFT EVOLVE shift_evolve
PRO
2
440
Lookerで実現するセキュアな外部データ提供
Avatar for ZOZO Developers zozotech
PRO
0
180

Featured

See All Featured
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
7k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
0
3.3k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
39
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
273
21k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
110
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
64
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
310
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.3k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon szymonslowik
1
160

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