Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS design independent of Sass

takanorip
October 03, 2019
Technology
2
1k

CSS design independent of Sass

takanorip

October 03, 2019
Tweet

More Decks by takanorip

See All by takanorip
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
takanorip
5
670
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.1k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.5k
早わかり W3C Community Group
takanorip
0
410
Ubieとアクセシビリティのこれからを考える
takanorip
0
390
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.7k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
3.1k
デザインシステム運用とOKRの良い関係
takanorip
0
1.9k

Other Decks in Technology

See All in Technology
【令和最新版】AWS Direct Connectと愉快なGWたちのおさらい
minorun365
PRO
5
800
SREが投資するAIOps ~ペアーズにおけるLLM for Developerへの取り組み~
takumiogawa
4
1k
SkiaとImpellerについて
moriya0130
0
130
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.9k
組織成長を加速させるオンボーディングの取り組み
sudoakiy
3
300
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
300k
100 名超が参加した日経グループ横断の競技型 AWS 学習イベント「Nikkei Group AWS GameDay」の紹介/mediajaws202411
nikkei_engineer_recruiting
1
180
プロダクト活用度で見えた真実 ホリゾンタルSaaSでの顧客解像度の高め方
tadaken3
0
260
TypeScriptの次なる大進化なるか！？　条件型を返り値とする関数の型推論
uhyo
2
1.8k
DynamoDB でスロットリングが発生したとき_大盛りver/when_throttling_occurs_in_dynamodb_long
emiki
1
480
オープンソースAIとは何か？ --「オープンソースAIの定義 v1.0」詳細解説
shujisado
10
1.5k
【LT】ソフトウェア産業は進化しているのか？ #Agilejapan
takabow
0
110

Featured

See All Featured
Building Your Own Lightsaber
phodgson
103
6.1k
GraphQLとの向き合い方2022年版
quramy
43
13k
RailsConf 2023
tenderlove
29
910
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
Agile that works and the tools we love
rasmusluckow
327
21k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
430

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