みなさん、こんにちは。
札幌の得地です。
みなさんは、ＣＳＳを記述するとき、何か意識していることはありますか?
私はスクール生のとき、ＣＳＳの記述の仕方にもちょっと気を配るということを学びました。
プロパティの順番
プロパティの記述順をある程度揃えることを心がけていくことで、
「どのプロパティがどこにあるか」分かりやすくなり、
「ここの数値を変更したから、ここの数値も変更する必要がある」など、
変更し忘れ防止にもなり、ブラウザで見たときに「あれ?ここ崩れてる?なんで?」とあせることも少なくなるかもしれません。
例えば、私がスクール生の時に学んだことは、
「padding」や「margin」を記述する場合、「width」や「height」の下に記述していきます。
「width」の数値を変更した場合、「padding」の数値も変更する必要がでてくる場合があるからです。
私は昔、変更することをよく忘れることがあり、「あれ?幅が大きくなる?なんで?」と
ＨＴＭＬの勉強のしはじめの頃は何度も引っかかっておりました。
私の場合ですが、「width」「height」「padding」「margin」の記述順でミスも少なくなり、何となくスッキリとキレイに見える気がします。
関連のあるプロパティ
関連性のありそうなプロパティはひとかたまりにして記述すると、これまたスッキリして変更忘れや、自分以外の人が見ても分かりやすいのではないかなぁと思います。（個人差があるかもしれませんが）
「プロパティの順番」でもあげましたが、
例えば…
関連性のあるプロパティはある程度まとめて、
私はその「ひとかたまり」も上記のような【BOX】～【背景・その他】の順で記述していきます。
時々、他の方のCSSの記述を見て、
「こういう記述方法があるのかぁ」と勉強になり、取り入れたりします。
私はCSSの勉強のしはじめの頃、記述の順番自体がなかなか覚えれず、メモ帳にプロパティの順番を書いて、確認しながら記述していました。
自分の記述方法が必ずしもほかの方にも合うとは限りませんが、
CSSの記述はページが多くなれば、デザインが複雑であれば、記述が長くなっていくと思います。
自分以外の人がCSSを触ることもあります。
できるだけスッキリとまとめることができれば、記述のスピードも少し上がるのではないかなと思います。
以上になりますが、ここまで読んでくださり、ありがとうございます。
Akros Web & Business Design Academyでは資料請求、無料の体験授業を行っております。
もしご興味がございましたら、お気軽にお問い合わせください。
