Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS design independent of Sass
Search
takanorip
October 03, 2019
Technology
2
1.1k
CSS design independent of Sass
takanorip
October 03, 2019
Tweet
Share
More Decks by takanorip
See All by takanorip
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
250
Bulletproof Design System with TypeScript
takanorip
6
3.5k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
140
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
900
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
7.3k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
2k
早わかり W3C Community Group
takanorip
0
490
Ubieとアクセシビリティのこれからを考える
takanorip
0
460
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.9k
Other Decks in Technology
See All in Technology
OpenHands🤲にContributeしてみた
kotauchisunsun
1
500
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
160
asken AI勉強会(Android)
tadashi_sato
0
150
CursorによるPMO業務の代替 / Automating PMO Tasks with Cursor
motoyoshi_kakaku
2
830
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
1
170
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
140
作曲家がボカロを使うようにPdMはAIを使え
itotaxi
0
400
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
190
OPENLOGI Company Profile
hr01
0
67k
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.4k
モバイル界のMCPを考える
naoto33
0
370
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
130
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
How to Ace a Technical Interview
jacobian
277
23k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Site-Speed That Sticks
csswizardry
10
680
KATA
mclloyd
30
14k
Being A Developer After 40
akosma
90
590k
Transcript
Sassに頼らない CSS設計 Takanori Oki @Meguro.css 2019/10/03
自己紹介 • 大木尊紀 / takanorip • フロントエンドエンジニア • Figma、ウェブフォント、Web Components
• 最近のマイブーム: 良い写真撮れたらsuzuriでシャツ作ること
Sass使ってますか?
Sass is useful!
But,
Too FAT!!!
Sassは機能が多すぎる • 便利だけど使いこなすのが難しいし、 機能が多すぎて把握できない。 • 注意が必要な機能もある。 (@mixin、@extend、ネスト、など) • Sassの機能を使うことが目的になってない?
Sassに頼らずシンプルに CSS設計をするのが良さそう (あくまで個人の見解です)
1. 上書きをなくす
悪い例
CSSの上書きが発生してる!
良い例
None
こういう悪い例は 過度な共通化をしている 場合に発生しがち
CSSのDRYは諦める
Custom properties
Custom properties • 別名CSS変数
Custom properties • :root = <html> • 親要素で定義された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の闇 • 検索しにくいので開発効率が落ちる • 詳細度との戦いがつらい • 可読性が落ちる、見にくい
ネストを深くするのは 最終手段
おわり!