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
940
CSS design independent of Sass
takanorip
October 03, 2019
Tweet
Share
More Decks by takanorip
See All by takanorip
社内管理画面のデザインもプロダクトデザイン
takanorip
3
720
早わかり W3C Community Group
takanorip
0
260
Ubieとアクセシビリティのこれからを考える
takanorip
0
230
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
2.9k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
2.8k
デザインシステム運用とOKRの良い関係
takanorip
0
1.7k
ユビーのペイシェントジャーニーを支えるデザインシステム構築
takanorip
0
170
メンタルヘルスチューニング
takanorip
0
250
Other Decks in Technology
See All in Technology
Why we expect the Microservices
shkitayama
2
320
プロダクト開発における ソフトウェアサプライチェーンセキュリティ: 実践的フレームワークとその活用 / Software Supply Chain Security in Product Development: Practical Framework and their applications
nttcom
1
310
Data and AI Governance: Existing Challenges and Emerging Trends
scotthsieh825
0
130
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
13
35k
シン・Kafka / shin-kafka
oracle4engineer
PRO
6
2.7k
MUGA - Bodyless Immersion
takuro_nakajima
PRO
0
1.5k
HEXA OSINT CTF V3 作戦会議
meow_noisy
0
100
Oracle Exadata Database Service on Cloud@Customer (ExaDB-C@C) - UI スクリーン・キャプチャ集
oracle4engineer
PRO
1
1.1k
20240416_devopsdaystokyo
kzkmaeda
1
150
疲弊しない!AWSセキュリティ統制の考え方 #devio_osakaday1
masahirokawahara
6
5.7k
Databricksを活用してDELISH KITCHENのレシピレコメンドを開発した話
furu8
0
240
メールセキュリティの DMARC周りの設定を少しずつ設定してみたお話
miu_crescent
1
260
Featured
See All Featured
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
29
6k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
Automating Front-end Workflow
addyosmani
1354
200k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
355
22k
Building Your Own Lightsaber
phodgson
97
5.7k
How STYLIGHT went responsive
nonsquared
92
4.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.5k
Become a Pro
speakerdeck
PRO
9
4.5k
Stop Working from a Prison Cell
hatefulcrawdad
265
19k
The Pragmatic Product Professional
lauravandoore
24
5.8k
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の闇 • 検索しにくいので開発効率が落ちる • 詳細度との戦いがつらい • 可読性が落ちる、見にくい
ネストを深くするのは 最終手段
おわり!