Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
CSS design independent of Sass
takanorip
October 03, 2019
Technology
2
710
CSS design independent of Sass
takanorip
October 03, 2019
Tweet
Share
More Decks by takanorip
See All by takanorip
ソフトウェアエンジニアの教養を養う本
takanorip
1
14k
共創するためのデザイン批評
takanorip
7
3.2k
Figmaプラグイン 開発のすゝめ
takanorip
0
180
Headless Components Design
takanorip
0
43
10分で理解する HTML Modules
takanorip
1
420
Polymer Project 2020
takanorip
1
130
技術とデザインの間
takanorip
0
1.4k
Color in Interface Experience
takanorip
1
92
ウェブフォント今昔物語
takanorip
5
3.6k
Other Decks in Technology
See All in Technology
Retca Cloud
bau
0
470
SI企業が「アジャイル推し」になったら 幸せになれますか?/Can SI company be happy if it becomes “Agile stan” ?
chinmo
1
1.1k
ソフトウェアテスト自動化、一歩前へ
yoshikiito
1
110
Scrum Fest Osaka 2022 フルリモート下でのチームビルディング
moritamasami
2
1.1k
QiitaConference2022
fuwasegu
0
170
モブに早く慣れたい人のためのガイド / A Guide to Getting Started Quickly with Mob Programming
cybozuinsideout
PRO
2
1.8k
WACATE 2022 夏 ワークショップの目的
imtnd
0
120
Implementing Kubernetes operators in Java with Micronaut - TechWeek Java Summit 2022
alvarosanchez
0
120
セキュリティ 開運研修2022 / security 2022
cybozuinsideout
PRO
3
3.7k
GeoLocationAnchor and MKTileOverlay
toyship
0
110
Persistence in Serverless Applications - ServerlessDays NYC
marcduiker
0
230
インフラのCI/CDはGitHub Actionsに任せた
mihyon
0
110
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
19
3k
The Mythical Team-Month
searls
209
39k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
920
Web Components: a chance to create the future
zenorocha
303
40k
Producing Creativity
orderedlist
PRO
334
37k
Code Review Best Practice
trishagee
43
9.2k
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
105
16k
The Invisible Side of Design
smashingmag
290
48k
Web development in the modern age
philhawksworth
197
9.3k
Embracing the Ebb and Flow
colly
73
3.4k
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の闇 • 検索しにくいので開発効率が落ちる • 詳細度との戦いがつらい • 可読性が落ちる、見にくい
ネストを深くするのは 最終手段
おわり!