CSS

CSSのリファクタリングに便乗


CSSのリファクタリング

Twitterで流れてきたこちらの記事がとても興味深かったので紹介します。

CSSのために親子関係を複雑にしたり、id、classをたくさん書くのは最小限にすべきであり、CSSをどこまでHTMLに対して従属関係におくことができるかというのが「良いCSS」ではないでしょうか。

HTML大好きな私としては、文書構造からきちんと作って、見た目はあとからCSSでっていうのはまるっきり同意。

そしてこの記事の中で、CODEPENをforkしてリファクタリングをしているのを見て、なんだか自分もやってみたくなりました。

 

というわけで、まずはちゃちゃっとこんな感じで。

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)とか使っています。
動的に個数の変わるリストとかならこれで横は割り切るって手もありますが…

でもやっぱり、横にも増やしたいよね~(;´∀`)

紹介した記事の著者さんはこんな感じにされています。

1段ずつになってしまいますが、文書構造的には問題ないし、横にも縦にも増やせるし、ソースもスッキリしていますので汎用性を考えるとこれがベストなんでしょうかね~。

こういうお題みたいなのって、プログラミング言語だとよくあるんですが、CSSでああでもないこうでもないって話すことあんまりないので、燃えますね!

スポンサードリンク

菜摘

Web制作がメインですがときどきフライヤーデザインやCDラベルなどDTP系もやってます。 デザイナーだったはずがhtml/cssコーディングに目覚めた。 黒い画面は相変わらず怖い。 javascriptはこのごろちょっと頑張ってるよ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です