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
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
820
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
130
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
770
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
10k
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
320
ふつうの技術スタックでアート作品を作ってみる
akira888
1
840
Goで作る、開発・CI環境
sin392
0
230
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
650
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
100
Featured
See All Featured
For a Future-Friendly Web
brad_frost
179
9.8k
How GitHub (no longer) Works
holman
314
140k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Making Projects Easy
brettharned
116
6.3k
The Invisible Side of Design
smashingmag
301
51k
It's Worth the Effort
3n
185
28k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Designing for Performance
lara
610
69k
Side Projects
sachag
455
42k
KATA
mclloyd
30
14k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
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が根強かった -
類似のプロジェクトが多いからかも? - 来年も楽しみ!