Keyword
見やすいHTML・CSSを書こう。
2017.03.25
こんにちわこんばんわ、ちばです。
クズの本懐というアニメの原作の最終巻を読んで高まりがすごいです。
私はえっちゃん推しなのですが、もうえっちゃんを見れなくなるかと思うと。。。
そんなことはさておき、今年に入り社内の人口が少しずつ増えてまいりました。
もちろんそれに伴いコーダーも増えてるわけですが、HTML・CSSの書き方にも個人差があります。
個人差が多少ある分には良いのですが、慣れないうちは見づらかったりどうやって書けばいいかわからずで激しいコードになってしまう方もいるかと思います。
なので今回は私が意識している事を一部書いてみようと思います。
1番目についてはセクションとセクションの間は2改行、他のブロック毎は1改行とかを意識しています。
この辺はどれが見やすいと感じるかは別れるかと思いますが、一貫性をもたせることによって気持ち悪さ、見づらさは少しでも解消出来ると思います。
2番目はCSS設計の話題などでよく目にしますね。
適切なクラスをつけないとHTMLが見づらくなる要因でもあるので気をつけたいです、。
3番目はセクションの開始、終わりがどこかをコメントで示してあげます。
<!-- hogeBlock --> <section class="hogeBlock"> <p class="fugafuga"> ダミーだよ!! </p> </section> <!-- /hogeBlock --> <!-- fugaBlock --> <section class="fugaBlock"> <p class="fugafuga"> ダミーだよ!! </p> </section> <!-- /fugaBlock -->
このようにセクション毎にコメントをつけてあげると、ネストが深くなり閉じタグが連なっても見分けがつきやすいです。
こちらははHTMLの方の3つ目とほとんど同じです。
/*=================== hogeBlock ===================*/ .hogeBlock { margin: 0; padding: 0; } .hogeBlock p { margin: 0; padding: 0; } /*=================== fugaBlock ===================*/ .fugaBlock { margin: 0; padding: 0; } .fugaBlock p { margin: 0; padding: 0; }
このようにコメントを適切にいれてあげることによって、記述場所を探すのが容易になりますね。
またコメントも大きブロック、小さいブロック、エレメントなどで何パターンか作り統一しておくと更に見つけやすくなっていいと思います。
私は下記のようなパターンを良く使います。
/===================
hogehoge
===================/
/* hoge_hoge
——————*/
/* hoge */
これもCSS設計の話でよく出てきますよね。
ネストを深くしすぎてしまうと、目的の箇所を探すのが大変だったり継承や強さの把握がしづらくなってしまうので
私は多くても3つ前後のネストになるようにしています。
.fugaBlock .fugaBlockInner article.fugaBlockItem div ul li a span{ color: tomato; }
上記みたいなのは私はなるべく見たくないので気をつけています。
これはちょっと説明しづらいのでまずは下記を見てみてください。
/* hoge */ .hoge { font-size: 0; display: block; border: 1px solid tomato; padding: 0; margin: 0; background: #fff; } .hogehoge { background: #000; font-size: 2rem; padding: 10%; border: 1px solid tomato; display: inline-block; margin: 0 0 10px; } /* fuga */ .fuga { display: block; margin: 0; padding: 0; border: 1px solid tomato; background: #fff; font-size: 0; } .fugafuga { display: inline-block; margin: 0 0 10px; padding: 10%; border: 1px solid tomato; background: #000; font-size: 2rem; }
上記のコードですが、「.hoge」と「.fuga」どちらが見やすいですか?
私は「.fuga」が順番が統一されていて見やすいと思っています。
順番については個人差があるかとは思いますが、こちらも一貫性を持つことによって可読性が変わってくると思います。
一年前の自分ができていなかった事をまとめてみました。
もし今書き方にこだわりが無いという方は試してみてください。
また、エディタによってはcsscombやeditorconfig等が使えるのでそちらを使うのもおすすめです。
そしてアニメ、クズの本懐見てみください。
えっちゃん最高に可愛いので見てください。
それでは。
お問い合わせ
トライムは常にお客様へ寄りっ沿った提案をさせていただきます。
自社のEC売上の拡大や人材不足などのお客様のデジタル上の課題を、
様々なアプローチにより解決するお手伝いをいたします!
お気軽にお問い合わせください。
03-6403-3259
受付:10:00 - 19:00