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

CSS design independent of Sass

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

CSS design independent of Sass

Avatar for takanorip

takanorip

October 03, 2019
Tweet

More Decks by takanorip

See All by takanorip
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
0
580
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
530
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
4.2k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
170
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
5
950
効果的な管理画面を デザインをするために 避けるべき5つの罠
Avatar for takanorip takanorip
15
7.5k
社内管理画面のデザインもプロダクトデザイン
Avatar for takanorip takanorip
5
2.1k
早わかり W3C Community Group
Avatar for takanorip takanorip
0
510
Ubieとアクセシビリティのこれからを考える
Avatar for takanorip takanorip
0
480

Other Decks in Technology

See All in Technology
物体検出モデルでシイタケの収穫時期を自動判定してみた。 #devio2025
Avatar for Lamaglama39 lamaglama39
0
240
dbtとBigQuery MLで実現する リクルートの営業支援基盤のモデル開発と保守運用
Avatar for Recruit recruitengineers
PRO
3
130
Codexとも仲良く。CodeRabbit CLIの紹介
Avatar for Atsushi Nakatsugawa moongift
PRO
1
260
ビズリーチ求職者検索におけるPLMとLLMの活用 / Search Engineering MEET UP_2-1
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
1
170
事業開発におけるDify活用事例
Avatar for KentaroFujii kentarofujii
3
790
LLMアプリの地上戦開発計画と運用実践 / 2025.10.15 GPU UNITE 2025
Avatar for Shumpei Miyawaki smiyawaki0820
1
670
AI時代におけるデータの重要性 ~データマネジメントの第一歩~
Avatar for 太田 涼一 ryoichi_ota
0
700
Liquid AI Hackathon Tokyo プレゼン資料
Avatar for Aratako aratako
0
110
それでも私が品質保証プロセスを作り続ける理由 #テストラジオ / Why I still continue to create QA process
Avatar for ぱいん pineapplecandy
0
140
Azureコストと向き合った、4年半のリアル / Four and a half years of dealing with Azure costs
Avatar for AEON aeonpeople
1
220
OAuthからOIDCへ ― 認可の仕組みが認証に拡張されるまで
Avatar for yamatai12 yamatai1212
0
140
速習AGENTS.md：5分で精度を上げる "３ブロック" テンプレ
Avatar for Izumu KUSUNOKI ismk
6
1.8k

Featured

See All Featured
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
66k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
232
18k
Writing Fast Ruby
Avatar for Erik Berlin sferik
629
62k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.5k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
75
5.1k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.2k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.4k

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