<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="1" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[1]</anchor-end> <cite xml:lang="en">Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.</cite>, <time>2023-04-18T02:47:46.000Z</time> <anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="URI" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="https://tailwindcss.com/">https://tailwindcss.com/</anchor-external></p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="2" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[2]</anchor-end> <cite xml:lang="en">Handling Hover, Focus, and Other States - Tailwind CSS</cite>, <time>2023-04-18T02:48:55.000Z</time> <anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="URI" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="https://tailwindcss.com/docs/hover-focus-and-other-states">https://tailwindcss.com/docs/hover-focus-and-other-states</anchor-external></p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="3" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[3]</anchor-end> <cite xml:lang="en">Responsive Design - Tailwind CSS</cite>, <time>2023-04-18T02:49:35.000Z</time> <anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="URI" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="https://tailwindcss.com/docs/responsive-design">https://tailwindcss.com/docs/responsive-design</anchor-external></p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="4" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[4]</anchor-end> <cite xml:lang="en">CSS Utility Classes and &quot;Separation of Concerns&quot;</cite>, <time>2023-08-06T12:23:53.000Z</time> <anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="URI" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="https://adamwathan.me/css-utility-classes-and-separation-of-concerns/">https://adamwathan.me/css-utility-classes-and-separation-of-concerns/</anchor-external></p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="5" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[5]</anchor-end> 
どんな思想でこんなやばいものが作られたのが理解したいと思って <anchor-internal xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="4" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">&gt;&gt;4</anchor-internal>
読んでみたんだけど、<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">表現と構造の分離</anchor>反対派だということしかわからなかった。
<anchor-internal xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="4" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">&gt;&gt;4</anchor-internal> の出発点が<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">表現と構造の分離</anchor>派なので、
それがうまくいかなかったからといってなぜ<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">表現と構造の分離</anchor>反対派になったのかよくわからなかった。</p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="7" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[7]</anchor-end> <anchor-internal xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="5" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">&gt;&gt;5</anchor-internal> <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">表現と構造の分離</anchor>したつもりなのに <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">CSS</anchor> に <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">HTML</anchor> の要素構造が出ちゃうから駄目じゃん、
ていう謎の問題意識からして意味がよくわからん。そこから <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">BEM</anchor>
に話が行くあたりもやばい。間違った問題を間違った方法で解決しようとして解決できなくて困ってたどり着いたのがここだった、ってことじゃん。
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">CSS</anchor> の C って cascading だよ、 cascade 使いこなせないで文句言ってるだけじゃん。
cascade がうまくいかなくて困った、という話だったらまだ理解できたかもしれないけどそうではなさげ。</p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="6" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[6]</anchor-end> 
<anchor-internal xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="4" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">&gt;&gt;4</anchor-internal> <code>style=&quot;&quot;</code> と同じじゃんという批判に対し、 <code>style=&quot;&quot;</code>
は完全自由だけど制限を加えた方がいいみたいなこと書いてるけど、
実態はほとんどないも同然じゃんよ。そんなことより短くて書きやすい、
っていう理由なんだと思ってた、というかその方がアピールポイントにならない?</p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="8" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[8]</anchor-end> 
最近 Tailwind は宗教みたいになってきてるなあ</p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="9" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[9]</anchor-end> 
Tailwind は糞だけど CSS 自体よりはマシとか言ってる人 <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">CSS完全に理解した</anchor>とか思ってそう,
自分の知識不足を CSS が難しいと責任転嫁してるようにしか見えない</p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="10" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[10]</anchor-end> 
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">WYSIWYG</anchor> がありなのと同じでこういう設計手法はありなのだと思うけど、これが <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">CSS</anchor>
を称しているのは詐称に近いのではないかと思うなど。
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">CSS</anchor> とはやり方も目指すところも何もかも違うのだし。</p></body></html>