Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

CSS design independent of Sass

Avatar for takanorip takanorip
October 03, 2019
Technology
1.1k
2

CSS design independent of Sass

Avatar for takanorip

takanorip

October 03, 2019

More Decks by takanorip

See All by takanorip
AI-Slopなデザインを生まないためのデザインプロセス戦略
Avatar for takanorip takanorip
10
5.9k
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
7
1.6k
Design System Documentation Tooling 2025
Avatar for takanorip takanorip
3
3k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
1
1.3k
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
880
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
5.4k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
320
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
6
1.2k
効果的な管理画面を デザインをするために 避けるべき5つの罠
Avatar for takanorip takanorip
15
8k

Other Decks in Technology

See All in Technology
AI に書かせたその API、 “信頼” できますか？
Avatar for 草薙昭彦 nagix
0
110
事業課題から技術的負債に向き合う
Avatar for SansanTech sansantech
PRO
2
1.8k
Issue 駆動でスペシャリストの意図を届ける、AI 実装のアクセシビリティ向上
Avatar for thkt thkt
0
110
DEFCON_CHV_CTF_Write-up.pdf
Avatar for bata_24 bata_24
0
150
Deploying a Full-Stack Bun-Native Framework on Cloudflare Workers
Avatar for daiki7nohe 7nohe
0
170
アクセスキーこわい やめかたと漏らさない工夫
Avatar for Yuichi Sato sassssan68
1
230
SQL文一行も書けない人事がCortexもろもろを使って人事業務を楽にしてみる
Avatar for ponponmikan ponponmikankan
1
240
Slack上でインフラをトラブルシュートする！ Agentic Platform Engineeringの第一歩
Avatar for teru0x1 teru0x1
4
1.7k
iOSDC Japan 2026 day1 TrackC 10:50
Avatar for feedtailor feedtailor
1
160
AI 時代のスタートアップエコシステ厶から考究する技術的負債との向き合い方
Avatar for memory m3m0r7
PRO
2
2.1k
目の前の楽しいが人生を変える - コミュニティの螺旋の歩き方と楽しむコツ / change your life
Avatar for soudai sone soudai
PRO
4
600
20260912_スクフェス三河
Avatar for hikari kgnkhkr
0
380

Featured

See All Featured
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Claude Code のすすめ
Avatar for schroneko schroneko
67
230k
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4.2k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
76
5.4k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.7k
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
2
3.9k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
560
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
28
3.6k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
41k
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
480
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
18k

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