https://jakearchibald.com/2016/link-in-body/ の「The future of loading CSS」についての簡単なメモ（抄訳ではない）。詳細はリンクを参照していただきたい。おすすめです。
CSSは普通headで最初の方に読み込ませるんだけど、Critical Rendering Path を最適化することを考えると、最初に表示される箇所など必要最小限のCSSだけをhead内で読み込んで、あとは遅延読み込みしたりしてレンダリングをブロックさせないようにした方がいい（そして量が少なければinline CSSにする）。でもscriptタグのasync属性のようにCSSを非同期的に読み込む手段がないから、Javascript使ってloadイベント後などに読み込ませるみたいな手間がかかる。そのうえ、閲覧する端末によって最初に表示される領域は違うので、どんな端末でも大丈夫な範囲のCSSを選ぶ必要があって、必要なCSSが過剰になりがち。
だから、スタイルが必要なコンテンツの直前とかに<link rel="stylesheet">でスタイルシートを入れて、コンテンツを表示する直前にスタイルシートを読み込んでコンテンツ表示させることができたら素敵。SDPY、HTTP/2においては、細切れのリソースを配信することによるoverheadはほとんどないし、それぞれのリソースを個別にキャッシュできるし。
現状ではブラウザによって対応がまちまちで、詳しくは https://jakearchibald.com/2016/link-in-body/?imm_mid=0e0e86&cmp=em-web-na-na-newsltr_20160224#changes-to-chrome あたり。Chrome & Safari の場合、<link rel="stylesheet"> がHTMLの途中にあったら、すべての見つかったstylesheetがロードされるまでレンダリングをストップする。一方 IE/Edgeはparserはstylesheetが読み込まれるまでブロックされるけど、<link rel="stylesheet"> より上のコンテンツはブロックしない。
それでChromeは今後IE/Edgeと同じような挙動にするつもりらしい。Firefoxの挙動は微妙なところがあるけど、workaroundがある。
つまり、（数ヶ月後？）ChromeがEdgeと同じ動作になってくれば、headには最初に必要なCSSとかUtility的なものだけを読み込んでおいて、それ以外はコンテンツ/コンポーネントの直前で読み込む、それが一番最適なCSSの読み込み方という未来が見えてくる。
あとコメント欄をざっと読みメモ
コンポーネント単位でスタイルシートを読み込むようになったら同じCSSファイルを（1画面内で）複数回参照することがあるかもね。
-> 将来的には <link rel="stylesheet" once>のような仕様ができる可能性があるね。
WebComponentsで複数ファイルを画面をブロックすることなくダウンロードしてCSSをsectionごとに閉じ込めることがすでにできるんじゃないの。
-> Web compomentsは個別にロードされるし、同じようなracingがあるよ（デモ）
linkタグをon demandで読み込んで、コンテンツがブロックされるとスクロールにjankが発生するんじゃ
（コメント長すぎて読み切れないけど、他の方法（web components）でもjankは発生する的な）
componentごとにCSSをロードすることによる複雑性（管理の面倒さとか？）と引き換えにして得られるスピードはどれほどのものか。e-commerce siteの場合ユーザーフローは予測可能だから、CSSのpre-fetchingの方が実用的。
古いIE
-> 古いIEもサポートしてると思う
コンポーネントごとにCSSを読み込ませるというやり方は、あまり使われない用途のCSSがどれだけあるかによってくるとは思いますが、大きなアプリケーションではわりと大量にありそうな気がする。あとは管理的な面とかでしょうか。
ちなみにこの話は http://radar.oreilly.com/web-platform のNewsLetterメール経由で知った（このNewsLetterはけっこう有用な情報が届くのでわりとおすすめ）。TwitterでFollowしててもわりと見逃すよね。