CSSのトレンドをみんなで見よう -2021年-

PIZZA_JP#47

Transcript

1. CSSのトレンドをみんなで見よう -2021年-
2. CSSのトレンド - 知らない人も多いと思いますがCSSのトレンドは移り変わりが早い - 2021年のCSSのトレンドを振り返る - 海外のCSSのサーベイサイトを参考 - 社内のプロジェクトも覗き見 - レイアウトに使われているプロパティやプリプロセッサ、フレームワークな ど - 来年の技術選定の参考にどうぞ
3. 参考にしたサイト https://2021.stateofcss.com/ja-JP/
4. レイアウトに使われているプロパティ https://2021.stateofcss.com/ja-JP/features/layout
5. レイアウトに使われているプロパティ - CSS Gridを83.1%が利用 - 毎年、利用率が上がっている - 対応してないモダンブラウザがほとんどない - Flexboxは98.7％が利用 - 便利すぎて利用しないはずがない - Subgrid（Grid layout level2）やCSS Multi Column Layoutは対応している ブラウザがまだ現役なので、まだ早いか - 論理プロパティはほとんど対応されているのに利用されていないのは認知 度が低いから？
6. プリプロセッサ：利用度 https://2021.stateofcss.com/ja-JP/technologies/pre-post-processors
7. プリプロセッサ：利用度 - Sassの利用度は相変わらず高い - とうとうPostCSSがLessを抜いた - 学習コストが低い分、新規参入が多い？ - 今年の注目株はAssembler CSS - 他のフレームワークと合わせて利用できる - x-styleという属性で書くことで新しいプロパティが使える - 例）width:100%　→　w:100%
8. CSS-in-JS：利用度 https://2021.stateofcss.com/ja-JP/technologies/css-in-js
9. CSS-in-JS：利用度 - あいかわらずStyled Componentsが首位（52%） - スタイルが関連付けられたコンポーネントを利用する - 徐々にCSS Modulesの利用も増えている（41%） - CSSに名前空間をもたせることができる - 既存のCSSのまま利用もできる - Emotionも増えてきてる？ - JSXにインラインでスタイルを書ける - Styled Componentsに似てるけど他のフレームワークと連携できる
10. - 最近の更新があったリポジトリを10個くらい確認しました - Stylus：6個 - Emotion：2個 - MUI：2個 - Sass：4個 - SassよりもStylusが利用されている - CSS-in-JSを利用しているプロジェクトはMUIとEmotionが多い ※フレームワークを確認するの忘れてました 社内の利用度
11. まとめ - 利用度の首位は2020年とあまり変動しなかった - ただユーティリティファーストのフレームワークが台頭してきた - CSS-in-JSにはまだデファクトスタンダードが生まれていない - 社内でもトレンドがあってStylusが根強かった - 類似のプロジェクトが多いからかも？ - 来年も楽しみ！