Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSSのトレンドをみんなで見よう -2021年-
Search
Kaneko Takeshi
December 24, 2021
Programming
0
92
CSSのトレンドをみんなで見よう -2021年-
PIZZA_JP#47
Kaneko Takeshi
December 24, 2021
Tweet
Share
More Decks by Kaneko Takeshi
See All by Kaneko Takeshi
オープンソースライセンスについて勉強する定期
tkckaneko
0
26
Eye Tracking on the Browser
tkckaneko
0
83
IEEE754を完全に理解した
tkckaneko
1
75
多分これが一番早いと思います
tkckaneko
0
25
暗黒面の話
tkckaneko
0
23
CSR / SSR / SSG / JAMstack
tkckaneko
0
67
BOLT
tkckaneko
0
25
CSS Logical Properties and Values
tkckaneko
0
32
Visual Effect Graphをさわってみた
tkckaneko
0
30
Other Decks in Programming
See All in Programming
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
570
生成AI時代のコンポーネントライブラリの作り方
touyou
1
210
XP, Testing and ninja testing
m_seki
3
240
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
320
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
5つのアンチパターンから学ぶLT設計
narihara
1
170
Porting a visionOS App to Android XR
akkeylab
0
460
PicoRuby on Rails
makicamel
2
130
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
7.3k
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
170
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
Featured
See All Featured
Music & Morning Musume
bryan
46
6.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
KATA
mclloyd
30
14k
Navigating Team Friction
lara
187
15k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Building Applications with DynamoDB
mza
95
6.5k
GitHub's CSS Performance
jonrohan
1031
460k
Producing Creativity
orderedlist
PRO
346
40k
Transcript
CSSのトレンドをみんなで見よう -2021年-
CSSのトレンド - 知らない人も多いと思いますがCSSのトレンドは移り変わりが早い - 2021年のCSSのトレンドを振り返る - 海外のCSSのサーベイサイトを参考 - 社内のプロジェクトも覗き見 -
レイアウトに使われているプロパティやプリプロセッサ、フレームワークな ど - 来年の技術選定の参考にどうぞ
参考にしたサイト https://2021.stateofcss.com/ja-JP/
レイアウトに使われているプロパティ https://2021.stateofcss.com/ja-JP/features/layout
レイアウトに使われているプロパティ - CSS Gridを83.1%が利用 - 毎年、利用率が上がっている - 対応してないモダンブラウザがほとんどない - Flexboxは98.7%が利用
- 便利すぎて利用しないはずがない - Subgrid(Grid layout level2)やCSS Multi Column Layoutは対応している ブラウザがまだ現役なので、まだ早いか - 論理プロパティはほとんど対応されているのに利用されていないのは認知 度が低いから?
プリプロセッサ:利用度 https://2021.stateofcss.com/ja-JP/technologies/pre-post-processors
プリプロセッサ:利用度 - Sassの利用度は相変わらず高い - とうとうPostCSSがLessを抜いた - 学習コストが低い分、新規参入が多い? - 今年の注目株はAssembler CSS
- 他のフレームワークと合わせて利用できる - x-styleという属性で書くことで新しいプロパティが使える - 例)width:100% → w:100%
CSS-in-JS:利用度 https://2021.stateofcss.com/ja-JP/technologies/css-in-js
CSS-in-JS:利用度 - あいかわらずStyled Componentsが首位(52%) - スタイルが関連付けられたコンポーネントを利用する - 徐々にCSS Modulesの利用も増えている(41%) -
CSSに名前空間をもたせることができる - 既存のCSSのまま利用もできる - Emotionも増えてきてる? - JSXにインラインでスタイルを書ける - Styled Componentsに似てるけど他のフレームワークと連携できる
- 最近の更新があったリポジトリを10個くらい確認しました - Stylus:6個 - Emotion:2個 - MUI:2個 - Sass:4個
- SassよりもStylusが利用されている - CSS-in-JSを利用しているプロジェクトはMUIとEmotionが多い ※フレームワークを確認するの忘れてました 社内の利用度
まとめ - 利用度の首位は2020年とあまり変動しなかった - ただユーティリティファーストのフレームワークが台頭してきた - CSS-in-JSにはまだデファクトスタンダードが生まれていない - 社内でもトレンドがあってStylusが根強かった -
類似のプロジェクトが多いからかも? - 来年も楽しみ!