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
Design System Documentation Tooling 2025
Avatar for takanorip takanorip
3
2k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
0
860
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
610
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
4.6k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
230
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
5
1k
効果的な管理画面を デザインをするために 避けるべき5つの罠
Avatar for takanorip takanorip
15
7.6k
社内管理画面のデザインもプロダクトデザイン
Avatar for takanorip takanorip
5
2.1k
早わかり W3C Community Group
Avatar for takanorip takanorip
0
540

Other Decks in Technology

See All in Technology
歴史から学ぶ、Goのメモリ管理基礎
Avatar for Takuto Nagami logica0419
10
2.3k
「駆動」って言葉、なんかカッコイイ_Mitz
Avatar for comucal comucal
PRO
0
140
サラリーマンソフトウェアエンジニアのキャリア
Avatar for YuheiNakasaka yuheinakasaka
24
8.5k
コールドスタンバイ構成でCDは可能か
Avatar for 平目 hiramax
0
130
Master Dataグループ紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
4.2k
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
Avatar for Sansan, Inc. sansan33
PRO
0
2.9k
自己管理型チームと個人のセルフマネジメント 〜モチベーション編〜
Avatar for KAKEHASHI kakehashi
PRO
5
2.2k
ECS_EKS以外の選択肢_ROSA入門_.pdf
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
1
120
Introduction to Bill One Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
340
202512_AIoT.pdf
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
180
松尾研LLM講座2025 応用編Day3「軽量化」 講義資料
Avatar for Aratako aratako
15
4.9k
「違う現場で格闘する二人」——社内コミュニティがつないだトヨタ流アジャイルの実践とその先
Avatar for Shin shinichitakeuchi
0
150

Featured

See All Featured
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
130
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
160
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
330
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
274
41k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
115
100k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
42
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
0
110
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
590
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
21
Believing is Seeing
Avatar for Spiro Bolos oripsolob
0
19
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
6.8k

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