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
720
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.4k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.6k
早わかり W3C Community Group
takanorip
0
430
Ubieとアクセシビリティのこれからを考える
takanorip
0
400
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.7k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
3.1k
デザインシステム運用とOKRの良い関係
takanorip
0
2k

Other Decks in Technology

See All in Technology
DUSt3R, MASt3R, MASt3R-SfM にみる3D基盤モデル
spatial_ai_network
2
270
Google Cloud で始める Cloud Run 〜AWSとの比較と実例デモで解説〜
risatube
PRO
0
120
Working as a Server-side Engineer at LY Corporation
lycorp_recruit_jp
0
380
10個のフィルタをAXI4-Streamでつなげてみた
marsee101
0
180
株式会社ログラス − エンジニア向け会社説明資料 / Loglass Comapany Deck for Engineer
loglass2019
3
32k
型情報を用いたLintでコード品質を向上させる
sansantech
PRO
2
140
能動的ドメイン名ライフサイクル管理のすゝめ / Practice on Active Domain Name Lifecycle Management
nttcom
0
250
pg_bigmをRustで実装する（第50回PostgreSQLアンカンファレンス@オンライン 発表資料）
shinyakato_
0
110
サービスでLLMを採用したばっかりに振り回され続けたこの一年のあれやこれや
segavvy
2
550
1等無人航空機操縦士一発試験 合格までの道のり ドローンミートアップ@大阪 2024/12/18
excdinc
0
180
社内イベント管理システムを1週間でAKSからACAに移行した話し
shingo_kawahara
0
200
日本版とグローバル版のモバイルアプリ統合の開発の裏側と今後の展望
miichan
1
140

Featured

See All Featured
Building a Modern Day 
E-commerce SEO Strategy
aleyda
38
7k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Rails Girls Zürich Keynote
gr2m
94
13k
Site-Speed That Sticks
csswizardry
2
190
Speed Design
sergeychernyshev
25
680
The Cost Of JavaScript in 2023
addyosmani
46
7k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
29
2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
180
Fashionably flexible responsive web design (full day workshop)
malarkey
405
66k

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