CSSのリファクタリング
Twitterで流れてきたこちらの記事がとても興味深かったので紹介します。
CSSのために親子関係を複雑にしたり、id、classをたくさん書くのは最小限にすべきであり、CSSをどこまでHTMLに対して従属関係におくことができるかというのが「良いCSS」ではないでしょうか。
HTML大好きな私としては、文書構造からきちんと作って、見た目はあとからCSSでっていうのはまるっきり同意。
そしてこの記事の中で、CODEPENをforkしてリファクタリングをしているのを見て、なんだか自分もやってみたくなりました。
私もこれforkしてやってみようかな https://t.co/4J1SqDeyxW
— なつみ (@natsumi_m31) 2016年7月13日
というわけで、まずはちゃちゃっとこんな感じで。
See the Pen DiamondCat by natsumi (@mayo31) on CodePen.18228
もとのPENと同じく、1段ずつをulにして、余分なdivやclassなどを抜きました。
次に、やっぱり構造上1段ずつulってのは嫌だな、と思ったので、ul一個で済ませようとしたのがこちら。
See the Pen DiamondCat2 by natsumi (@mayo31) on CodePen.18228
徹底的にidとclassを排除し、文書構造上も無駄を一切なくしました。
縦にいくらでも増やせますが、2個の次に2個、とか、1個だけ、とかの段になると崩れますがっかり。幅はfork元が固定なので固定するものと割り切って、5個区切りで:nth-child(5n)とか使っています。
動的に個数の変わるリストとかならこれで横は割り切るって手もありますが…
でもやっぱり、横にも増やしたいよね～(；´∀｀)
紹介した記事の著者さんはこんな感じにされています。
@sakanatech @misumi_takuma
ちょっと1pxぐらいずれてる気もしますが、酒入ってるので勘弁してくださいー。
CSSのためにHTMLに書き込むの好きじゃないので、私だったらこんな感じにするかと思いますー。https://t.co/f3caWCws1C— 榊原昌彦 (@sakaki002) 2016年7月12日
1段ずつになってしまいますが、文書構造的には問題ないし、横にも縦にも増やせるし、ソースもスッキリしていますので汎用性を考えるとこれがベストなんでしょうかね～。
こういうお題みたいなのって、プログラミング言語だとよくあるんですが、CSSでああでもないこうでもないって話すことあんまりないので、燃えますね！