CSSとHTMLというのがあるんですよね．
HTMLはWeb文書の階層構造を記述し，CSSは文書の見た目を記述します．
HTMLにCSSを適用する方法はいくつかあって，主に
外部CSSを読み込む
HTMLのhead要素にstyleを記述する
各HTML要素に対して
style属性をつけてそこにCSSを記述する
という３つの方法があります．
でも，基本的に「外部CSSを読み込む」手法が推奨なんですよね．
ドキュメントにはこう書かれています．
この方法での CSS の使用は、可能な限り避けてください。まず、 CSS の実装の中では最も保守の効率が悪いものです。一つのスタイルを変更するために、一つのウェブページ内で複数の編集が必要になるかもしれません。第二に、インライン CSS はプレゼンテーション用のコードを HTML やコンテンツに混ぜてしまうため、すべてが読んだり理解したりしにくいものになってしまいます。コードとコンテンツを分離すれば、ウェブサイトで働くすべての人にとって保守が容易になります。
ここで挙げられている理由は「HTMLとCSSは分離しないと，コードの重複が多くなって保守するときに困るし，可読性も下がる」ということです．
これを読んで当時の私は「なるほど！！確かにそうやな！！」と思ってたんですよ．
ところが，最近ではそうでもないみたいですね．CSSとHTMLを分離すべきというのは変わってないんですが，スタイル情報とHTMLによる構造の情報を別のところにおくべきというのはだいぶ揺らいでる気がする．
最初に「あれ？」と思ったのは Bootstrap を学んだとき．
Bootstrap では，HTMLの class 属性を書き換えることによって，既存の部品を引っ張ってくることができます．
これは，class 属性にスタイルの情報を書いてることになります．
私が習った「CSSとHTMLを分けろ」という話はどうなったんだろう？と思いました．
しかし，Bootstrapは基本的に「よく使う部品は既製品を引っ張ってくればいいよね」という発想で作られているツールなので，用意されていない部品を作ろうとすると自前のCSSを書くことになります．
だからこの疑問については，特に深入りすることはなかったのですが……．
TailwindCSS を知ったことでとどめが入りました．
TailwindCSS は，スタイル情報とHTMLを分離すべきという思想を真っ向から否定するんです．
次の文章は，TailwindCSS の公式ページからの引用です．
“Best practices” don’t actually work.
これだけでは何のことかわかりませんので，少し説明します．
CSSというのは，長くなってくるとどのCSSがどのHTML要素に対応しているのかがわからなくなります．
それを防ぐためにCSSセレクタ名からどのHTML要素に対応しているのかわかるようにしましょうねと言われていて，それが上で言及されている「Best practices」 です．
ところが，そんなうまいCSSセレクタ名を考えるなんて楽な仕事ではないわけです．コーディングではなくCSSセレクタ名を考えている時間が長くなってしまうのは，あまり良くないことです．
そこで TailwindCSS は class 属性のなかにすべてのスタイル指定を書いてしまって，CSSを書くのは一切やめてしまえと主張します．
なかなか大胆ですが，ちょっと身に覚えがありますね．
Vue.js でも，HTMLとCSSとJavaScriptをまとめてひとつのコンポーネントにしてますね．
現代では，スタイル指定が重複しないことよりも，どのスタイルがどのHTML要素に適用されているかわかる方が重視されているみたいです．
