HTML と CSS について
HTML と CSS について、これは関心が分離されているから良いという話を聞きます。 HTML には文書構造、 CSS にはデザインをまとめるのが良いという話です。
今から20年くらい前、 CSS が登場したばかりのネットではほとんどの場合はこれが正しかったと思います。なぜなら、当時はコンテンツを作るのには HTML を手元で書いて、デザインは HTML 要素とその属性に書くのが当たり前だったからです。
この時代では、サイトに一貫したデザインを持たせたいときは1ヶ所デザインに変更があったなら全てのページの HTML を書き直す必要があったり、レイアウトのために table 要素を使ってしまうためコンテンツの機械的な解析が困難だったりと、HTML の文書構造と見た目が分離していないのは実際に弊害があったのです。
Tailwind CSS を見たとき
難しい CSS の設定を簡単にできるのがすごい！と思いました。特に divide-y などを見ると割と面倒な計算をやってくれていて、これはなんて楽にスタイルを適用できる技術なんだ！とびっくりしたものです。
しかしもうひとつ思いました。「これは文書構造に見た目を依存させるという意味で、CSS 前の世界に戻っていないか？」
Tailwind CSS は本当に CSS 前の世界に戻ったのか？
考えてみましたが、この答えは完全に NO です。
今はサイトを一から手書きすることなどなく、デザインを1ヶ所変更したいならソースファイルの1ヶ所を変更してサイトを生成し直せばいい話ですし、見た目のために HTML 要素を使うこともほぼ無くなったため、HTMLコンテンツを機械解析するのもやりやすくなりました。
文書構造と見た目が一つになっていることの欠点はこの記事で取り上げたものだけではないでしょう。しかしそれらもまた技術の発展によって克服されいると思われます。そんな今という時代は、文書構造と見た目の分離はこの先も本当に必要なのかを問い直されている時代なのではないでしょうか？
文書構造と見た目の密結合は悪いことなのか
プログラミングをしていると、密結合と聞いたら悪い印象があるかも知れません。
しかし、HTML 文書には見た目も含めて機能である要素がたくさんあります。 nav や button といった要素がそれです。
テキストサイトが主流だった20年前はともかく、今はウェブサイトで出来ることは格段に増え、HTML は文書構造だけではなく UI コンポーネントのスケルトンという性質も持つようにもなりました。
そうした現代の HTML から見た目の情報を剥がすことにはどれだけの意味があるでしょうか。
本当に関心を持つべきはユーザーにどのような体験を提供するのかであり、HTML や CSS をどのような構成にするのかではありません。そしてユーザー体験を提供するには UI のデザインは避けて通れない道です。
そのため、CSSの複雑さをなるべく隠蔽し、HTML にどのような UI を持たせるのかに注力できるようにするのが Tailwind CSS のアプローチだと考えます。
まとめ
CSS が現れた時代にはウェブサイトはテキストがメインコンテンツで、デザインというとそれをいかに見せるのかというところに関心がありました。そのため、文書構造と見た目の設定が分かれていることに大きな価値がありました。
しかし今のウェブサイトはウェブアプリと呼ばれるものがメインで、そのウェブアプリを使ってどのような体験をしてもらうかに関心があります。ユーザー体験をよくするためには UI デザインの問題は避けて通れません。
そして、ウェブ技術で UI を実現するには HTML と CSS が疎結合であることにはあまりメリットがないと考えます。
なので、Tailwind CSS が採用しているユーティリティファーストは、CSS の複雑さをなるべく隠蔽してどのような UI を作るのかに注力できるようになるアプローチだと思います。
参考URL : https://adamwathan.me/css-utility-classes-and-separation-of-concerns/