1万人に聞いた、2019年の最新CSS使用状況

正直CSSは根本的に作り直してほしいと思うのですが、それはそれとして毎年大規模にJavaScriptの使用状況を調査している[The State of JS](https://stateofjs.com/)([2018年日本語訳](https://qiita.com/rana_kualu/items/b4a7e01cb54b08a171b6))という組織が、今年は[CSSにも手を出しました](https://stateofcss.com/)。

以下は[The State of CSS 2019](https://2019.stateofcss.com/)の日本語訳です。

# The State of CSS 2019

![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/b7f56618-9cab-53a0-3d7b-509f1b3327ce.png)
※↑元ネタは全部CSSで書かれてる

## Introduction

Web開発ファミリーの中でも、JavaScriptは気が短く、毎年流行に流される10代の若者のように反抗的で、それを理解するには年を取り過ぎたと皆が感じています。
いっぽうCSSは勤勉で、礼儀正しく、決して妄断を下すことのない優等生です。

しかし、気を許さないでください。
CSSは既に20歳を超えているにも関わらず、今さらJavaScriptような激動の10代を迎えつつあるのではないかという兆候があります。
Flexbox! Grid! CSS-in-JS!
2019年、CSSは密かに憧れていた欲望を表に出し、髪をピンクに染め、タトゥーを入れました。

我々は今年初めて、CSSについて1万人を超える開発者を調査しました。
それでは、CSSのどのような機能が最もよく使用されているか、どんなツールが使われているか、見てみましょう。

### Team

The State of CSS Surveyは、以下によって作成されました。

・[Sacha Greif](https://twitter.com/sachagreif) ：デザイン、執筆、コーディング。私だ！
・[Raphaël Benitte](https://twitter.com/benitteraphael) ：データ分析、可視化。

私の作ったReact/GraphQLライブラリ[Vulcan.js](http://vulcanjs.org/)、Raphaëlの作った可視化ライブラリ[nivo](https://nivo.rocks/)もチェックしてみてね。

### Download Our Data

データは[こちらからダウンロードできます](https://www.kaggle.com/sachag/state-of-css-2019)。
素敵なビジュアライズを作成したら教えてください。

### Completion Percentages

設問は全てスキップ可能であったため、一部の質問は他の質問より回答数が少なくなります。
そのため、各質問には回答率を知らせるインジケータを追加しています。

### Other Links

・[State of CSS ホームページ](https://stateofcss.com/)
・[State of JS ホームページ](https://stateofjs.com/)

### Thanks

設問に多大な助けをくれた[Florian Rivoal](https://twitter.com/frivoal)、アクセシビリティを助けてくれた[David Luhr](https://luhr.co/)、およびGitHubでプロセスに参加してくれた全員に感謝します。

### Credits & Stuff

フォントはIBM Plex Monoを使用しています。
質問、フィードバックは`hello@stateofcss.com`までどうぞ。

それでは、今年のCSSの動向を見てみましょう。


## T-shirt

その前にちょっとしたアナウンス。
調査に要する資金を捻出するために、我々は『State of CSS』Tシャツをリリースしました。

このTシャツは、CSSのテクニックを教えてくれる唯一の服です。
会議でも、就職面接でも、あるいは仕事でも、このシャツがあなたのCSSテクニックの修得を証明してくれるに違いありません！
![02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/0f1bd2d3-6a59-b7d1-a8c6-0ddda7ca9f10.jpeg)


[24ドル+送料でTシャツをゲット](https://gum.co/NjNjH)！


## Demographics

この初めてのCSS調査の回答者は、135カ国で11307人に達しました。
これは明らかに、CSS開発者全体のごく一部に過ぎませんが、初めての調査にしてはかなり有望ではないかと思われます。

この調査の回答対象者の母集団が、CSSコミュニティ全体のうち最先端に近い部分に少し偏っていると考えるのは自然です。
なぜならば、調査の存在に最もよく気付くのがそのような人たちだからです。
逆に言うと、この調査結果は、エコシステムの主流が今後数年で向かう方向を示していると考えることもできるでしょう。

相当数の回答者が以前に[State of JS](https://stateofjs.com/)に回答したことがあるため、この回答のデータは"フロントエンドのバック側"、すなわちフロントエンドの中でもよりJavaScript志向に傾いているかもしれません。

上記注意点を抜きにしても、この回答には非常に貴重な洞察があることでしょう。
これらをあなたと共有することができて嬉しく思います。

### Participation by Country

回答者の国別割合。
アメリカが21.7%でダントツ、以下はイギリス9.1%、ドイツ6.0%、フランス4.5%、カナダ4.4%。
日本は0.4%、46人。
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/be24adc2-e3e6-e7d7-a37a-e0f62b0a9512.png)


### Salary

給与。
`$50k`から`$100k`が30.26%で最頻値。
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/ea2b24c6-be58-019d-b92c-300c088e75ba.png)

### Years of Experience

CSSの開発経験年数。
2から5年、5から10年、10から20年がそれぞれ1/4強で分かれているかんじ。
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/abcfc134-5375-b281-e289-5bec55746a91.png)

### Company Size

会社の規模。
一人から千人以上まで、満遍なく分布しているようです。
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/ea1a72d8-5e60-ab59-22d7-51be98acfcac.png)


### Source

このアンケートにどこからやってきたかを、自己申告とリファラから調査。
"State of JS"は、以前行ったJavaScriptアンケートの回答への紹介メールから。
Announcementは[FreeCodeCamp](https://www.freecodecamp.org/)の公式アナウンスから、"Word of Mouth"はSlack、友人、同僚などでの紹介をまとめたもの。
![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/e12fde34-185b-a7f3-3054-7ce5d2241af9.png)


### Gender

圧倒的男社会。
![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/a3000509-9b8b-f5fb-f6b2-2258dfa51f12.png)


### Job Title

パーティのときに自分をなんと紹介するか。
フロントエンドエンジニア46.82%、フルスタックエンジニア31.25%となっています。
パーティに出られない人は1割程度のようです。
![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/3bfb34c2-e5c2-7e5b-246b-0c7c2fc9c981.png)


### JavaScript Proficiency

JavaScriptの習熟度。
全く書けない1.4%、ちょっとしたjQueryくらいなら書ける17.02%、ReactやVueが使える24.6%、状態管理やデータローディングばりばり37.49%、フロントエンドいちから全部できるわー18.45%。
![18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/ca9c111b-e8e2-d108-d48c-2e1a8750214f.png)


### Back-end Proficiency

バックエンド開発の習熟度。
全く書けない9.49%、WordPressとかJekyllくらいなら26.81%、RailsやLaravelで開発できる20.77%、バックエンドいちから全部できるわー41.72%。
![19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/1922afd5-c8af-ee76-fd86-8f9e3fc1265a.png)


## Features

直近2年間のCSSは、フレキシビリティとアダプタビリティでした。
CSSは完璧ではないかもしれませんが、それでも新しいデバイス、コンテキスト、アクセシビリティへのスムーズな移行に成功しています。

ハックや回避策を使わずに複雑なレイアウトを指定する方法が、Gridによってようやく可能になりました。
またblend modeやmask、shapeなどを使って、これまで以上にリッチでクリエイティブなデザインを実現することができます。

### Usage Overview

以下のグラフは、様々な機能の採用率を、カテゴリ毎に表しています。
外側の水色円はその機能を知っているユーザ数で、内側の青円は実際に使用したことのあるユーザ数です。

各ノードにカーソルを合わせると、調査回答の詳細なデータがオーバーレイ表示されます。
![21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/e0e0cb12-089e-30ff-534b-2d521ebac356.png)


### Layout

レイアウトツールは、近年最も変化の激しい分野のひとつです。
最初にFlexboxが、次いでCSS Gridが登場しました。
CSS Gridは、CSSレイアウトを最も表現良く豊かに表示する方法です。

これを習得するには少々時間がかかるかもしれません。
多くのユーザがGridを使用していない理由がここにあるかもしれません。
しかし、これは努力して覚えるだけの価値があります。

![31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/4b8b0685-02e6-de70-b94f-cd0c0e99af61.png)


#### Grid

[GSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)は、ページを格子状に分割し、サイズやレイヤに従ってHTMLパーツの配置を決めていく、優れた方法です。

![32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/8d003937-3597-9df1-c827-6346cd253e46.png)

※棒グラフは、青が使用したことがある割合、水色は知っているけど使ったことはない、紺はよく知らないか聞いたことがない。以下同じ。


#### Flexbox

[CSS Flexible Box Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout)は、1次元のユーザインターフェイスデザインに最適化されたCSSボックスモデルを定義するCSSモジュールです。
Flexboxモデルのレイアウトでは、未使用スペースを埋めるために幅を広げたり、はみ出ないように縮小したりと、コンテナサイズを任意の方向にフレックスすることができます。
水平方向と垂直方向の子要素を簡単に整理することができます。
![33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/d3b61092-9e1c-66f6-27ab-78029d881697.png)


#### Multi-Column Layout

[CSS Multi-Column Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns)は、マルチカラムレイアウトをサポートするCSSモジュールです。
レイアウト内の列数、列から次の列へのコンテンツの流れ、列間のギャップサイズ、列分割線(column-rule)といった要素をサポートします。
![34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/8c1e53d3-4d37-0a2a-e160-89c4df44b9da.png)


#### Writing Modes

[CSS Writing Modes](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Writing_Modes)は、様々な国際的記法に対応するCSSモジュールです。
左から右(ラテン文字やインド)、右から左(ヘブライ語やアラビア語)、双方向、縦書き(日本語)などがあります。
![35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/8c37d0f0-6118-ad3c-8559-55f5469c2568.png)


#### Exclusions

[Exclusions要素](https://www.w3.org/TR/css3-exclusions/)は、インラインコンテンツが要素をどのように回り込むかを定義します。
float要素がブロック要素を回り込む機能の拡張です。
![36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/5a25ac4c-87e7-b15e-e67f-ff51d374b99e.png)


### Recommended Resources

[Learn CSS Layout and Animations](https://designcode.io/css-layout-and-animations?csssurvey?utm_source=stateofjs&utm_medium=sponsor&utm_campaign=resources-sponsors&utm_content=textlink)で、CSS Grid、Flexbox、CSSアニメーションを使用したビデオコースを学びましょう。


### Shapes & Graphics

長い間、Web上で高度なグラフィックを描くには、グラフィックアプリを使って多くの事前作業を行わなければならないか、あるいは単に不可能でした。

現在ではmasking、blend modes、filtersなどのサポートが広がったことで、これまで不可能だった効果が、ほんの数行のコードで実現可能になっています。
特に、純粋にCSSだけで実現可能になったことが素晴らしく、アクセシビリティのためにアダプタビリティを諦める必要はもうありません。
![41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/f2605970-9eeb-d9f8-bcff-36da63f15b1d.png)

#### Shapes

[CSS Shapes](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes)は、CSSで幾何学形状を扱えるようにします。
[レベル1の仕様](https://drafts.csswg.org/css-shapes/)では、CSS Shapesはfloationg要素に使用できます。
![42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/65b6090c-ac4d-b224-343d-e628f6f12200.png)


#### object-fit

[object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)は、imgやvideoなどの[Replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element)要素について、そのサイズをコンテナに合わせて調整する方法を提供します。
![43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/c7105c12-61e6-6093-b3b2-16b620610b44.png)


#### clip-path

[clip-path](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path)は、要素のどの部分を表示するかクリッピングする方法を提供します。
領域の内側が描画され、その外側は非表示になります。
![44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/dd0723c8-7930-b0b4-5f8a-8c722943d716.png)

#### Masking

[Masking](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Masking)は、視覚要素の一部もしくは全体を非表示にする、マスキングやクリッピングなどの手段を提供します。
![45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/12e81dfa-e45b-1018-d34c-97fa956fb635.png)

#### blend-mode

[blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/blend-mode)は、要素が重なったときの表示方法を決めます。
[background-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode)や[mix-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode)プロパティが存在します。
![46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/b9658a14-3619-4864-5e04-6cd66c854e32.png)


#### Filters & Effects

[filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter)は、ぼかしや色相などのグラフィック効果を要素に適用します。
一般的には画像や背景、境界線のレンダリング調整に使用されます。
![47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/0aa1e6bc-5f79-969f-470c-60d31aee357b.png)

#### Recommended Resources

[Learn SVG Essentials & SVG Animation, v2](https://frontendmasters.com/courses/svg-essentials-animation/?utm_source=stateofjs&utm_medium=sponsor&utm_campaign=resources-sponsors&utm_content=textlink)で、SVGを作って最適化しましょう。
SVGはWeb用のスケーラブルで、ファイルサイズが小さく、ロードが高速なグラフィック形式です。

### Interactions

JavaScriptは便利ですが、ブラウザが処理すべきことをエミュレートするだけのために何百行ものコードを書いていると、時折蠅をハンマーで叩こうとしているような感覚に陥ります。

幸いCSSの実装も追いついてきていて、ブラウザの振る舞いをJavaScriptなしに制御できるCSS Scroll Snapのようなプロパティが登場しています。
![51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/567592ca-8022-3cf8-e8a1-ccd462ed757d.png)

#### Scroll Snap

[CSS Scroll Snap](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap)は、スクロール操作の終了時に表示位置を調整してくれるCSSモジュールです。
![52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/f5456905-9820-74fa-f456-5a46a42fd74c.png)

#### overscroll-behavior

[overscroll-behavior](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior)は、領域の端までスクロールしたときのブラウザの動作を設定します。
overscroll-behaviorは[overscroll-behavior-x](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-x)と[overscroll-behavior-y](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-y)をまとめたものです。
![53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/ef9f7a57-8add-8cee-c452-e54f604070e9.png)

#### overflow-anchor

[overflow-anchor](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor)は、ブラウザのscroll anchoring動作を無効にする方法を提供します。
overflow-anchorは、画面外のDOM要素挿入によるコンテンツの移動を抑えます。
![54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/161a9015-05ca-df7f-a066-89f331e2b718.png)

### Typography

タイポグラフィは、おそらくWebの最も重要な構成要素です。
CSSがタイポグラフィに対する優れたサポートをさらに改善しつつあるのは素晴らしいことです。

この中ではVariable fontsが最も新しい要素で、真のレスポンシブが誕生するまでは、フロントの絶え間ない進化は注目する価値があるでしょう。
![61.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/447567ff-572b-658f-72eb-bbbfbe31ea0b.png)


#### @<wbr>font-face

[@font-face](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face)は、テキストを表示するためのカスタムフォントを指定する[@規則](https://developer.mozilla.org/en-US/docs/CSS/At-rule)です。
リモートサーバにあるフォント、あるいはユーザのローカルにインストールされたフォントのいずれも読み込むことができます。
![62.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/9677fe9d-3dad-0988-b49a-a67930254e76.png)

#### Variable Fonts

[Variable Fonts](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide)は、幅、太さ、スタイル毎に別々のフォントファイルを使用するのではなく、多くの異なるバリエーションをひとつのフォントファイルにまとめることを可能にするOpenTypeフォントの拡張です。
`@font-face`で読み込まれるただひとつのフォントファイルに対して、CSSからあらゆるバリエーションにアクセスすることが可能になります。
![63.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/506d8fbf-c4e2-8961-4ab8-0cb1ce952453.png)


#### Line Breaking Properties

[line-break](https://developer.mozilla.org/en-US/docs/Web/CSS/line-break)は、中国語、日本語、韓国語(CJK)の句読点での改行の取り扱いを設定します。
![64.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/842aaa84-eae1-1592-7fb1-0cd1c62d5405.png)


#### font-variant

[font-variant](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant)は、[font-variant-caps](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps)、[font-variant-numeric](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric)、[font-variant-alternates](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates)、[font-variant-ligatures](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures)、[font-variant-east-asian](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian)をまとめたものです。
また、CSS Level 2のfont-variantも[font](https://developer.mozilla.org/en-US/docs/Web/CSS/font)から指定可能になります。
![65.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/99577b8f-f70a-b4b1-3ae5-2b52acf89dd0.png)


#### initial-letter

[initial-letter](https://developer.mozilla.org/en-US/docs/Web/CSS/initial-letter)は、頭文字のスタイルを設定します。
![66.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/18b0b741-fca4-a237-1f9d-515bd24fc59d.png)

※`initial-letter`って[Safariしか対応してない](https://caniuse.com/#search=initial-letter)んだけど、この使用率は本当なんかね？
[first-letter](https://caniuse.com/#search=first-letter)と間違ってない？

#### Recommended Resources

[Learn Responsive Web Typography](https://frontendmasters.com/courses/responsive-typography-v2/?utm_source=stateofjs&utm_medium=sponsor&utm_campaign=resources-sponsors&utm_content=textlink)で、Webフォントの実装方法、デスクトップやモバイルデバイスで最高のリーディング環境を提供するためのタイポグラフィを学ぼう。


### Animations & Transforms

回答者のほぼ全員がanimations、transitions、transformsを使用しています。
最近のWebサイトを10分見て回るだけで、静的で動きのないサイトの時代は終わったことがわかるので、これは驚くべきことではありません。
単純なホバー効果から複雑なアニメーションまで、あなたがやりたいと思ったことはなんでもCSSで扱うことができます。
![71.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/eb972409-6348-18dd-c4a7-2fb9a28f82f5.png)

#### Transitions

[Transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions)は、特定のCSSプロパティ間に段階的な変化を作成するCSSモジュールです。
動作タイミング、動作期間、その他の属性を使って動きを制御することができます。
![72.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/aeba679d-df4d-2ac9-acd7-30c5e3278ead.png)


#### Transforms

[Transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms)は、要素を2次元もしくは3次元に変形する方法を提供します。
![73.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/10f7672d-7d17-6333-82ee-c0588a75ea19.png)


#### Animations

[Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations)は、キーフレームを指定し、時間経過と共にアニメーションする方法を提供します。
動作タイミング、動作期間、繰り返し数、その他の属性を使って動きを制御することができます。
![74.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/d0f16a10-6953-d8cb-7766-74a863c97055.png)

#### Recommended Resources

[Learn CSS Features In-Depth with Estelle Weyl](https://frontendmasters.com/courses/css-in-depth-v2/?utm_source=stateofjs&utm_medium=sponsor&utm_campaign=resources-sponsors&utm_content=textlink)を受講して、存在していることすら知らないであろうCSSの機能を探っていきましょう。


### Other Features

実のところ、CSSの大部分は、Gridやアニメーションなどの派手でセクシーな機能でありません。
それは役に立たない、取るに足りない機能であるように見えるかもしれません。
しかしそれらはあなたの仕事を、何十時間も節約してくれます。

CSS variablesやsupport queriesはこのカテゴリです。
使いこなすまでは少々時間がかかりますが、しかし一度その潜在能力を把握すれば、もはやそれら無しでCSSを書くことはできなくなるでしょう。
![81.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/a442660f-1869-d404-0765-459d95410965.png)

#### Variables

[CSS Custom Properties for Cascading Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Variables)は、何度も使用できるカスタムプロパティを作成するCSSモジュールです。
![82.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/1de49915-1888-a1e9-852e-17e02d049164.png)

#### @<wbr>supports

[@supports](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports)は、特定のCSSをブラウザがサポートしている場合にのみ指定することができる`@規則`です。
これは機能クエリとも呼ばれます。
コードの最上位にも、他の`@規則`内にネストして書くこともできます。
![83.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/a3eca0a7-c35d-cf1e-f928-e587174fa800.png)


#### Contain

[Contain](https://developer.mozilla.org/en-US/docs/Web/CSS/contain)は、その要素がドキュメントツリーの他の部分から独立していることを表します。
これによりブラウザは、レイアウト、スタイル、サイズなどのプロパティの変更によるレンダリングの再計算を、ページ全体ではなく、DOMの限られた領域だけに留めることができるようになります。
![84.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/ed4fd546-5da6-2524-7369-3fb5bb10711c.png)


#### will-change

[will-change](https://developer.mozilla.org/en-US/docs/Web/CSS/will-change)は、要素がどのように変更されるかの予想を予めブラウザに通知します。
ブラウザは実際に要素が変更される前に最適化を実行するかもしれません。
![85.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/52d969d7-3956-791e-764a-fb3caadec47e.png)


#### calc()

[calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc)関数で、CSSプロパティの指定時に計算を行うことができます。
[<length>](https://developer.mozilla.org/en-US/docs/Web/CSS/length)、[<frequency>](https://developer.mozilla.org/en-US/docs/Web/CSS/frequency)、[<angle>](https://developer.mozilla.org/en-US/docs/Web/CSS/angle)、[<time>](https://developer.mozilla.org/en-US/docs/Web/CSS/time)、[<percentage>](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage)、[<number>](https://developer.mozilla.org/en-US/docs/Web/CSS/number)、[<integer>](https://developer.mozilla.org/en-US/docs/Web/CSS/integer)の要素に対して使用可能です。
![86.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/38313b7d-9d2a-867b-fe45-f4a5f5f2720f.png)

#### Recommended Resources

[70 hours of content for CSS, Javascript](https://designcode.io/?csssurvey?utm_source=stateofjs&utm_medium=sponsor&utm_campaign=resources-sponsors&utm_content=textlink)を受講して、UIデザイン、CSS、SwiftUI、React、ReactNative、Vueについて学びましょう。


## Units & Selectors

CSSの学習が非常に難しい理由のひとつが、ほんのちょっとした変更が大きな影響をもたらすことがあるからです。
フォントのサイズはemsですか、pxですか？
どのセレクタを使うべきですか？
目的を達成するためにJavaScriptの使用を避ける必要はありますか？
`Units`と`Selectors`を十分に把握しておけば、それらの解決がとても容易になることはないにしても、少なくとも多少は容易になります。

### Units

どの単位を使っていますか？
![91.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/c067baa8-bfcd-18ae-bd9f-3ae0a437ad08.png)


### Pseudo-Elements

どの疑似要素を使っていますか？
![92.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/495c5683-4a93-a2fe-da7c-c2ca4472550c.png)


### Combinators

どのCSSセレクタ結合子を使いますか？
![93.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/917fe1e3-5f31-85f3-558f-9385e9b4d3ad.png)


### Tree & Document Structure

どのCSS構造セレクタを使いますか？
![94.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/8e1ba04b-deb6-f243-1e8f-ffce3ee76065.png)


### Attributes

どの属性セレクタを使いますか？
![95.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/1fbe9477-1ecb-34a1-1d66-dad4d527a2b3.png)


### Link & URLs

どのリンク要素セレクタを使いますか？
![96.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/549affae-e808-5118-9c55-6eafc5ded9c7.png)


### Interaction

どのユーザアクションセレクタを使いますか？
![97.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/1a5aebdf-03a9-c956-984c-1e3189380e37.png)


### Form Controls

どのフォームセレクタを使いますか？
![98.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/35e015b8-6734-3348-670b-918810443701.png)


### Recommended Resources

[The Complete Design to Code Learning Path](https://frontendmasters.com/learn/designers-code/?utm_source=stateofjs&utm_medium=sponsor&utm_campaign=resources-sponsors&utm_content=textlink)を受講して、CSSの本質的機能を深く掘り下げよう。


## Technologies

長きにわたり、CSSを書き始めることは簡単でした。
`.css`ファイルを作成し、テキストエディタを開き、そしてタイプするのです。

しかし徐々に、SassやLessのようなプリプロセッサ、BEMやAtomic CSSのような方法論、そして最近のCSS-in-JSといった独自のエコシステムが入り込んできました。
いまや、フロントエンドの習得には、優れたCSSの制作方法だけではなく、どのテクノロジをいつ使用するかについても知っておかなければなりません。
![100.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/a6f989c5-7fe5-c804-b992-3c6e5fc05ca3.png)

### Satisfaction vs Usage

以下のチャートは、各技術について使用者数と満足度を表したものです。
4象限に分けることができます。
・左上：ACCESS：評価。使用率が低いが満足度が高い。注目に値するテクノロジ。
・右上：ADOPT：採用。使用率も満足度も高い。採用しても安全。
・左下：AVOID：忌避。使用率も満足度も低い。現時点で採用すべきではない。
・右下：ANALYZE：分析。使用率は高いが満足度が低い。現在使用している場合は再考の余地がある。
![101.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/4d7c602a-2036-a31d-6bb9-587b3306c461.png)


### Pre & Post Processors

SassやLessといったプリプロセッサは、"CSS2.0"の序章でした。
言語自体が停滞していたころに、これらはコンパイルというステップを導入することによって、変数やネストといった新機能をもたらしました。

それから10年以上が経ち、CSSもキャッチアップしてはいますが、プリプロセッサはいまだ堅調に推移しています。

またポストプロセッサとしては、CSSワークフローをさらに良くする補完的なツールとして`PostCSS`が独自のニッチを築いています。

以下は左から順に知っているか、興味があるか、および満足度のランキング。
この比率は時系列ではなく同一時点のものです。
![110.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/ae90834e-5896-327e-49f9-e70d2d21bc3a.png)


※ここ以降のグラフは5値。
緑：使ったことがあり、今後も使用したい。
赤：使ったことがあるが、今後は使いたくない。
薄緑：聞いたことはあり、使ってみたい。
薄赤：聞いたことはあるが、使ってみたくない。
紺：聞いたこともない。

#### Sass

[Sass](https://github.com/sass/sass)はCSSを楽しくします！
![111.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/edcbcfe4-72d2-c288-dc1a-f3777428b006.png)


#### Less

[Less](https://github.com/less/less.js)、それは動的スタイルシート言語。
![112.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/dbcfcbf7-36c3-015e-e895-98fb54e4a65c.png)

#### PostCSS

[PostCSS](https://github.com/postcss/postcss)はJavaScriptプラグインを使ってスタイルを変換します。
![113.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/6c71ca23-72f0-d69b-371d-6b4586d5ae3d.png)


#### Stylus

Nodejs用に作成された、エクスプレッシヴでロバストでフィーチャーリッチなCSS言語、[Stylus](https://github.com/stylus/stylus)。
![114.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/83163767-3ef4-e68c-eaac-708989340c70.png)


#### Recommended Resources

[Learn Sass Fundamentals](https://frontendmasters.com/courses/sass/?utm_source=stateofjs&utm_medium=sponsor&utm_campaign=resources-sponsors&utm_content=textlink)では、Sassプリプロセッサを活用し、複雑なアプリケーションのスタイルを読みやすく維持しやすいものにします。


### CSS Frameworks

幾星霜もの戦いがありました。
BootstrapのようなUIツールキットは使うべきものですか？
それとも不正ですか？
全てのWebサイトが同じになりますか？
デザイナーは無職になりますか？

2019年には議論は決着しており、CSSフレームワークが勝利しました。
Bootstrapは時代を先取る様々なテーマとプラグインの巨大なエコシステムを生み出しました。
またGoogleはマテリアルデザインを普及させました。

そしてTailwind CSSのようなユーティリティクラス重視の新しいアプローチが、あなたが知っている全ての正しいCSSセマンティクスに疑問を投げかけます。
その81%の満足度は、我々の先入観を再考する時が来たかことを表しているのかもしれません。

![121.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/e2a35c50-4528-d546-e46a-85d1b920f302.png)

#### Bootstrap

[Bootstrap](https://github.com/twbs/bootstrap)は、レスポンシブでモバイルファーストなWebサイトを作成するための、最も有名はHTML/CSS/JavaScriptフレームワーク。
![122.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/1b212efb-711b-04a9-f027-4c75b62880df.png)


#### Materialize CSS

[Materialize](https://github.com/Dogfalo/materialize)は、マテリアルデザインに基づくCSSフレームワーク。
![123.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/e9cf664f-b405-1777-77e0-111c28e97390.png)

#### Ant Design

UIデザイン言語、[Ant Design](https://github.com/ant-design/ant-design)。
![124.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/be7d2ca2-430d-d45b-be38-50bd26368579.png)

#### Semantic UI

[Semantic UI](https://github.com/Semantic-Org/Semantic-UI)は、自然言語の原則に基づいたUIコンポーネントフレームワークです。
![125.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/459de8fe-8954-f4e8-965d-f3f613ce8300.png)

#### Bulma

[Bulma](https://github.com/jgthms/bulma)は、Flexboxベースの最新CSSフレームワーク。
![126.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/b161ca2a-c428-7e3c-b237-b3fdc8c62f5e.png)

#### Foundation

[Foundation](https://github.com/zurb/foundation-sites)は、最も先進的なレスポンシブフロントエンドフレームワーク。
あらゆる種類のデバイスで動作するサイトのプロトタイプと製品を素早く生成します。
![127.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/8b38d625-d403-f9d6-7311-eb1b805a214c.png)

#### UIKit

[UIKit](https://github.com/uikit/uikit)は、高速で強力なWebを開発するための、軽量なモジュラー式フロントエンドフレームワーク。
![128.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/19e054b1-1306-530e-f769-8374051da7db.png)

#### Tachyons

人間のための関数型CSS、[Tachyons](https://github.com/tachyons-css/tachyons)。
![129.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/6b7e1aaf-6344-be35-9358-b983a5930306.png)

#### Primer

[Primer](https://github.com/primer/css)はGitHubが提供するCSSデザインシステム。
![130.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/8a92d49f-5236-de18-4ccb-13c1574adf59.png)


#### Tailwind

[Tailwind](https://github.com/tailwindcss/tailwindcss)は、迅速なUI開発のためのユーティリティファーストCSSフレームワーク。
![131.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/7f9bc545-1a71-d232-abdf-4a863ad3b9d9.png)

#### PureCSS

[PureCSS](https://github.com/pure-css/pure)は、あらゆるWebプロジェクトで使用可能な、レスポンシブCSSモジュールの小さなセット。
![132.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/1f9416f1-7ca0-16c3-2f61-5de661d72f2d.png)


### Methodologies

CSSは、それを記述するための『正しい』書き方を体系化する方法論を産み出した数少ない言語のひとつです。

認知度はBEMが圧倒していますが、全く新しい考え方のAtomic CSSも広がりつつあります。

我々はCSSを書くための正しい唯一の方法を手に入れることはできないかもしれませんが、しかしそれを追い求めることを止めることはできません。
![133.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/9827a7b7-5d49-8cad-e221-9ec4362f876d.png)


#### BEM

[BEM](http://getbem.com/)は方法論の重要な要素、Block/Element/Modifierの略語です。
![134.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/efedfc38-cc81-c26d-2709-3bd02cccd84b.png)


#### Atomic CSS

[Atomic CSS](https://acss.io/)はCSSアーキテクチャです。
それは意味を語らず、単一のスタイリング規則を表すクラスを定義するだけです。
![135.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/e841a2db-fb6f-e896-74d3-5a3977774083.png)

#### OOCSS

OOCSS、オブジェクト指向CSSは、簡潔で保守が容易なCSSの作成に役立つ方法論です。
![136.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/8b5c03d4-d439-181c-f864-a46d60e8bff1.png)


#### SMACSS

SMACSSはフレームワークというよりもスタイルガイドです。
ダウンロードしたりインストールしたりするライブラリはここにはありません。
cloneするGithubリポジトリもありません。
SMACSSは設計プロセスを検証する方法であり、融通の利かないフレームワークを柔軟な思考プロセスに合わせる方法です。
![137.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/423f6f10-4108-5301-8e11-fc51b2ec0b68.png)


#### ITCSS

[ITCSS](https://itcss.io/)はCSSウィザードの手による、健全でスケーラブルなマネージドCSSアーキテクチャです。
![138.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/c30fd28b-e1ae-a513-f9d0-7bca134f2202.png)


### CSS-in-JS

CSS-in-JSは、CSSの過去数年間で最大の発明のひとつです。
10年以上前にCSSプリプロセッサが独自の新機能を導入したように、CSS-in-JSライブラリは、CSSが追いつくのを待たずに独自の道を切り開くためにJavaScriptの力を利用します。

しかし、Styled ComponentsやEmotionのようないくつかのライブラリはある程度の立場を確立しましたが、全体としては依然混沌と細分化されており、常に変化しています。
従って、長期的なCSSエコシステムの中でCSS-in-JSがどのような地位を占めるのかはまだわかりません。

ひとつだけ確かなことがあります。
競争は常に良いことであり、もしCSSがJavaScriptのいいアイデアの幾つかを盗んでくるようであれば、それは我々にとって良いことでしょう。
![141.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/de119345-0412-8bbf-a7db-f70ec9bc708c.png)


#### Styled Components

[Styled Components](https://github.com/styled-components/styled-components)は、コンポーネント時代のビジュアルプリミティブ。
ES6とCSSのベストマッチであなたのアプリをストレスレスにスタイルしましょう。
![142.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/b8ff0639-f014-6396-7496-772c9174318e.png)

#### Glamor

[Glamor](https://github.com/threepointone/glamor)はreactその他のインラインCSS。
![143.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/6c30a063-a7e0-fc5d-4860-7e63109948e1.png)

#### Aphrodite

[Aphrodite](https://github.com/Khan/aphrodite)はフレームワークに依存せず、サーバサイドレンダリング、ブラウザプレフィックスをサポートし、最小限のCSSを生成するCSS-in-JS。
![144.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/bace68d1-c808-65e5-ccfa-751a758e5844.png)

#### JSS

[JSS](https://github.com/cssinjs/jss)は、JavaScriptを主言語として使用するCSSオーサリングツール。
![145.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/128c45ea-4694-8959-e461-7e0daaf71c13.png)


#### Styled JSX

[Styled JSX](https://github.com/zeit/styled-jsx)は、一切の妥協をせずJSXのCSSをフルサポートする。
![146.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/08ba17bb-a530-db7f-b007-90dca7cf626c.png)

#### Radium

[Radium](https://github.com/FormidableLabs/radium)は、Reactコンポーネントのスタイリングツール。
![147.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/522bded0-a7a3-1112-a9ff-39be8b460fc1.png)

#### Emotion

[Emotion](https://github.com/emotion-js/emotion)は、高性能のCSS-in-JSライブラリ。
![148.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/c8a75aca-2c51-565d-a02e-a43bfef31683.png)

#### CSS Modules

[CSS Modules](https://github.com/css-modules/css-modules)。
![149.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/c0ea34da-0c4c-f4d4-2eb8-32a01fcdc7f0.png)


#### Recommended Resources

[Learn to Build Scalable React Applications (Includes Using Emotion with React)](https://frontendmasters.com/courses/intermediate-react-v2/?utm_source=stateofjs&utm_medium=sponsor&utm_campaign=resources-sponsors&utm_content=textlink)で、Reactでスケーラブルなアプリケーションを構築し、EmotionによるCSS-in-JSのフック、パフォーマンスの向上、TypeScript対応、そしてテストする方法を学びましょう。


## Other Tools

コードを書くためには必ずテキストエディタが必要です。
CSSの開発は、おそらく他のどの言語よりもブラウザと開発ツールに大きく依存しているでしょう。

### Text Editors

どのテキストエディタを使っていますか？
![151.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/34645d4a-bfd7-105a-5e21-fa5829661d57.png)

### Other Text Editors

テキストエディタの任意入力欄。
![152.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/122f7eae-f573-8015-001b-1f9f846e07fe.png)

### Browsers

開発時に最初に使用するブラウザ。
![153.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/4799674f-3467-8913-332f-400ee09f4f63.png)

### Other Browsers

ブラウザの任意入力欄。
![154.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/7f091354-f1fc-dfc3-62b3-5ae7130c93f5.png)

## Environments

CSSの際だった特徴の一つが、適用される環境がとても広いということです。
複数のブラウザ、様々なデバイス、異なるフォームファクタ、そしてさらに印刷するページがどのように見えるかを制御することさえ可能です。

おそらく将来、EメールクライアントはJavaScriptコードを実行するようになることでしょう。
しかし現時点では、CSSはマルチタスクの王者です。

### Browsers

どのブラウザでテストしていますか？
![155.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/b23eaf85-5307-8153-81f5-e55f5af285ce.png)


### Form Factors

どの環境でテストしていますか？
![156.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/503c4359-6c33-c221-a66e-0e0a1689c98f.png)

### CSS for Print

印刷用のCSSを書いていますか？
![157.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/348be496-598e-b5d5-de31-0874d680446f.png)

### CSS for Email Clients

Eメールクライアント用のCSSを書いてますか？
![158.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/35b5a4a6-fc83-4175-147e-3282e248250d.png)


## Resources

独力だけで理解できることはそんなに多くありません。
時には手を止め、長老たちの話に耳をかたむける必要があるでしょう。
あるいはGoogleに聞いてください。

ここでは何であれ、あなたが参考にしているものを調べました。

### Blogs & Magazines

CSS関連のブログ、マガジンなどを読んでいますか？
![161.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/b6c9b9d5-ff2d-47bd-4210-36b2b96afb4f.png)


### Other Blogs & Magazines

上記設問の任意入力欄。
![162.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/ab5e3265-1a4e-c7b2-9d61-5949beb40e0e.png)


### Sites & Courses

CSS関連のWebサイトやコースを見ていますか？
![163.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/46fac434-6d06-afd1-6f42-214081a6f1db.png)


### Other Sites & Courses

上記設問の任意入力欄。
![164.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/ec5ec069-eb3b-2aa9-441e-f0a96e3247e8.png)


### Podcasts

CSS関連のPodcastを聞いていますか？
![165.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/5d49d005-8b0c-b553-9610-3ba5dbfd8664.png)


### Other Podcasts

上記設問の任意入力欄。
![166.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/14f9b8a7-a0f7-fe55-db27-f3dde8cab443.png)


### Recommended Resources

Storybookは、コンポーネントとCSSを構築する最速の方法です。
[Learn Storybook Tutorial](https://www.learnstorybook.com/?utm_source=stateofcss2019&utm_campaign=stateofcss2019&utm_content=textlink)のコースを受けて、UIをスクラッチするベストプラクティスを学びましょう。

## Opinions

コミュニティの動向を把握する最善の方法は、とにかく先に進むことです。
CSSの変化についての質問から、CSSをプログラミング言語と見做すべきかという難しい質問まで、あなたが心に留めてあることを吐き出す機会を作りました。
ここでは以下の設問について、5段階でどの程度同意するかを尋ねました。

### Learning Curve

CSSを学ぶことは簡単だ。
![171.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/06b53c1d-62f2-4d67-4a39-9b12ea1a1f15.png)


### Rate of Change

CSSの進化は遅すぎる。
![172.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/1739eb14-34c6-1200-0073-4de2322a0170.png)


### Non-Semantic Classes

`.center`、`.large-text`といったセマンティックでないクラスは避けるべき。
![173.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/296fd6d0-3790-7bb8-2820-f3f3803b0f4a.png)


### Selector Nesting

`.foo .bar ul li {...}`のようなセレクタのネストは避けるべき。
![174.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/01013657-2964-0736-917b-6fa53a0a1622.png)


### Programming Language

CSSはプログラミング言語である。
![175.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/41d52ff0-a950-4705-0dd9-ff0179e44e28.png)


### Enjoyment

CSSを書くことは楽しい。
![176.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/367f0e00-b529-a90d-a421-8eff6cd9ce14.png)


### Missing Features

今のCSSに欠けているものはなに？
![177.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/b1e00afb-83db-56b0-67e0-418568c8eefb.png)


## Awards

ごめん:(

データを分析してアワードのセクションをまとめる時間がなかった。
そのうちまとめるから、それまで[State of JavaScript 2018](https://qiita.com/rana_kualu/items/b4a7e01cb54b08a171b6)のアワードでも見てて。


## Conclusions

今回の調査のテーマを一つ選ぶとしたら、それは『新たな挑戦』です。
我々にとって真新しい分野での新しい調査、CSSの新たな機能、そして進化し続けるCSS機能へのコミュニティからの新たなリスペクト。

この数年でJavaScriptの重要性が急激に増しつつあることで、HTMLやCSSは二番手以降に格下げになり、これらのスキルはもはや高く評価されていないと感じることがあるかもしれません。

しかし、データは全く異なる答えを出しています。
JavaScriptがあまねく行き渡ったとしても、CSSが近いうちに置き換えられることがないのは間違いありません。
そしてCSSがより強力な文法を手に入れるほど、それを習得することはより価値あることになるでしょう。

そして間違いなく、CSSは確実に進化しています。
調査の対象となっている機能の多くはまだ主流になっておらず、そしてSubgridやAspect Ratioといったさらなる新機能により、これからもてんやわんやは続くでしょう。
以上のことから、我々はState of CSSの開催を、2020年になるまで我慢できませんでした。

– Sacha and Raphaël


# 感想

彼らは2016年から毎年[The State of JavaScript](https://stateofjs.com/)というアンケート調査を行っているのですが、今年はCSSもやることにしたようです。
たしかにJavaScriptの調査ってのはよく見ますが、CSSの調査ってあんまり見ないので興味深いところですね。

結果についてですが、ContainやScroll Snapといった新しめのCSS要素は知名度がとても低いです。
新しすぎる要素は結局トランスパイルが必須で、実質的にJavaScriptをやってるのと変わらないので、フロントエンド専業が避けるのもわからないでもないです。
とはいえ、ほとんどのブラウザが対応しているGridすら半数しか使ったことがないというのは驚きですね。

フロントエンド開発者は新しいCSS機能を意外と使っていないし、そもそも新機能の存在を知りません。

まあ、私も最近はBulma持ってきておしまい！困ったらdivに`class=xx`でおしまい！で、能動的にCSS組んだりしなくなったので、一般的にはそんなところなのかもしれませんが。[^1]


なお、元記事は非常にビジュアルに凝っていて、概ねマウスオーバーで詳細が出るようになっていたりするので、直接閲覧することをお勧めします。
逆にビジュアル重視過ぎて一覧性がないのが問題です。
選択肢のテキストが長めの場合、ブラウザをどれだけ横に長くしても選択肢のテキストが全表示されません。
国別シェアなんて、一々それぞれの国にマウスオーバーしなければ数値を確認できません。
デザインに凝るのはいいけど、それよりデータをコピペできるようにしてくれ。



[^1]: 私はフロントエンドエンジニアではないので、本当のところはわかりません。