【HTML・CSS】まともできれいなコードを書きたいよ

こんにちは。あいりすです。

突然ですが、自分が書いたコードって人に見られたくないですよね。（？）

裸を見られるより恥ずかしいというツイートも見たことがあるくらいです。

わたしもHTMLは最近はいろいろ調べてかなり意識して書くようにしていますが、CSSはどうもきれいにならないのです。
それこそもう裸を見られているようなものです…

そこで、ようやく時間ができたので、一般的によく言われているHTML・CSSの記述ルールをもとに
書く上での個人的なルールを少し決めてみて、意識しながらコーディングをしていこうと思いました。

まず、いろいろサイトを見てみたのですが、HTML・CSSを書く上で重要なことは、

・統一性（要するにルールを決めろということ）
・無駄なネスト（入れ子）はしない、避ける
・HTMLでの情報（記述）の順番と、実際に表示される内容の順番を同じにする
・タグは正しい使い方をする（セマンティックなHTMLってやつですね）

などがあります。もっと調べればもっとたくさんあると思いますが、、

次に、なぜわたしはCSSがカオスになってしまうのかを考えました。

おそらく、

「これどうやるんだ？」と調べる
↓
行き当たるまでに時間がかかる
↓
ようやくできて安心しきる
↓
次に行っちゃう

の繰り返しだからなのではないかと思います。

また、調べても全然わからないときは別のできそうなところに手を付けてしまうので、
当然こんなやり方では統一性のないCSSになってしまいますね…（今気づいた）

日々意識することを心がけて、慣れと適度な経験を積んだ上で改善していけるよう頑張ります。

また、現在わたしがコーディングをする上で既に意識している点をあげてみます。

・タグは、本来の使い方をする（h1、h2タグなどは特に）
・padding、marginの省略した書き方（topなどをいちいち指定しない書き方）を使う
・クラスの命名ルールを統一（わたしはsample_classのように付けています）
・コピペしてきた部分はぱっと見わかりにくい部分がありがちなので必ず始まりと終わり部分にコメントをつける

もっとあったような気がしますが…すぐ思いつくのはこのくらいです。

いろいろなサイトを見て、自分に足りていなくてかつ、すぐに改善しなければならない点を考えました。

個人的なルールとして日々意識しようと思うので、よかったら参考にしてみて下さい。

・headerのCSS、mainのCSSのなどにも、始まりと終わりにはわかるようにコメントをつける。
→ただでさえわかりにくいCSSになってしまうので、どの部分のCSSなのかくらいはわかるようにしないといけないですね…

・CSSプロパティは常に同じ順序で記述する。
→とあるサイトからそのまま引用する形になりますが、とても良かったのでこれからこの順番で記述するように心がけます。

１.　位置情報系：position/top/right/z-index/display/floatなど
２.　サイズ系：width/height/padding/marginなど
３.　文字系：font-size/line-height/letter-spacing/color/text-alignなど
４.　背景：background/borderなど
５.　その他：animation/transitionなど

・classをたくさん作らない。CSSの指定はなるべく階層指定に移行させる。
→記号（＞や＋）で指定する方法もありますよね。それらを使えばいちいちclassを作る必要がなくなり、CSSがきれいになります。

・CSSの記述順序もHTML同様、情報の並び順と同じようにする。

とりあえずこのあたりから改善をしていこうと思います。

わざわざ意識しなくても出来るようになってきたら、CSSファイルの記述量自体を減らすこと（0pxを0と記述するなど）を考えたりなど、
次のステップに進めるようにしていきたいと思います。

わたしは今更になってこのようなことに気が付きましたが、独学の段階で人にコードレビューをしてもらう機会をもっと増やしていれば、もっと早く気が付けたと思います。

そう考えると、人からいくらヒントを貰っていたとしても独学の方法って難しいんですね…。

というわけで、これからも頑張っていきたいと思います。
ここまで読んでくれてありがとうございます！