こんにちは！最近、嫁に「IT系って意識高い系の略なの？」ってガチに聞かれました。ジュンです。（自分の答えは最後に言います）
コードは綺麗に書くべきだ！デザイナーの僕としては「実装できれば中身なんて別にいいじゃん！」と思った時期もありましたが、それは大間違いでした！
自分が書いたコードなのに分かりづらっ…泣
コードを綺麗に書くことで得られるメリットとしては以下になります。
目次
理解しやすい、保守しやすい、拡張しやすい。
本文では、綺麗なコードを書く為のいくつかのポイントをご紹介します。
1.タグは、本来の使い方をする
たまに、pやliの本来の使い方を無視して作っているサイトを見かけます。CSSで定義すれば、ブラウザ上では問題なく見せることはできるのですが、HTMLはできる限り、本来の意味を踏襲してコーディングした方がよいでしょう。よく意味なく使ってしまうspanでも、本来はインライン要素としてグループ化するという立派な役割があるわけです。
2.CSSの値の指定は極力短縮する。
marginとかpaddingをtop, right…全部分けて書くことは、今の時代にはもはやタブーなのです。そして0にはpx,%,emなど付けなくても0は0なので省略しましょう。
悪い例
padding-top: 0px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
良い例
padding: 0 10px 20px;
3.プロパティは常に同じ順序で記述する。
CSSを思いつきで設定していると、他人が見たときに分かりにくく、また自分自身も後から見たときに、見落としたりする可能性も出てきます。そういったことを想定し、プロパティの順番は統一しておくようにしましょう。
順番の例：
位置情報系＝position, top, right, z-index, display, float等
サイズ＝width, height, padding, margin
文字系＝font, line-height, letter-spacing, color- text-align等
背景＝background, border等
その他＝animation, transition等
4.インデント、改行など一定のルールで行なう。
HTMLでもインデントの統一はよくいわれますが、CSSにおいても、見やすく分かりやすいソースコードを目指すために、インデントや改行のルールはできるだけ統一するようにしましょう。インデントには色々な解釈がありますが、大事なのは、統一する、ということです。
記述例：
.boxAttention,
.boxConversion {
width: 960px;
padding: 20px 0 30px;
margin: 0 auto;
}
5.内容を的確に表現したクラス名にする。
classの名前は、それが何のためのclassか、きちんと表現できていた方がベターです。例えば、コンテンツを入れるボックスはbox01などという名前ではなく、ボックスの役割がわかる名前のほうがいいでしょう。同じ労力で実現できるなら、より良い方法を選択する、というのもHTMLコーディングでは必要な感覚です。
6.無駄なclassの乱用を避ける。
classを無計画に多用していくと、煩雑なソースコードになり、メンテナンス性も落ちていきます。また、ブログなどでは、いちいちタグにclassを指定しないとキレイに見えないような組み方をしていると、運用に悪影響を与えることもあります。divやspanなどの汎用タグを用いたり、classの継承セレクタを用いて、できるだけ簡潔なソースコードで記述したほうがよいでしょう。
7.クラス名に接頭辞（プレフィックス）をつける
レイヤーにまとめたモジュールは、そのレイヤーごとに接頭辞（プレフィックス）をつけます。
* .l- Layoutレイヤー
* .c- Componentレイヤー
* .p- Projectレイヤー
* .u- Utilityレイヤー
* .t- Themeレイアー
* .s- Scopeレイヤー
* .qa- .te- QA/Testレイヤー
* .is- クリックなどのイベントが発生している要素に付与する
* .js- JavaScriptから参照される要素（スタイルは当てない）
個別ページ用のCSSも接頭辞をつけたほうがベターです。接頭辞をつけることで名前の重複をさらに抑えることができます。「Bootstrap」や「Foundation」などのCSSフレームワークを併用する場合は特に有効です。
そして接頭辞によって、
* どういった役割をもっているのか
* CSSファイルのどのあたりに記述されているのか
* どれぐらいの詳細度をもっているのか
といったことが名前だけで判断できるようになります。
8.CSSのセレクタにidは使わない
idを用いると詳細度が高くなるため、スタイルの上書きがしにくくなり、目的のスタイルが適用できなくなるため。idはCSS以外（javascriptなど）で用いるようにすることで、役割の違いがわかりやすくなります。
9.画像ファイルのファイル名は用途を分かりやすくする。
画像やhtml,cssなどのファイル名は必ずルール化しましょう。これはWEB制作だけではなく、パソコンで仕事をしている方は必ず覚えるべきことだと思います。仕事ができる人はパソコンを見れば分かる！
h1画像：h1_xxx.jpg
h2画像：h2_xxx.jpg
背景画像：bg_xxx.jpg
線の画像：line_xxx.jpg
ボタン画像：btn_xxx.jpg
アイコン画像：icon_xxx.jpg
単なる画像：img_xxx.jpg
10.基本的にimportant!は使わない
これを付けたスタイルはほぼ全ての優先順位をすっ飛ばして適応されますが、優先順位のしくみを理解していたら必要ないと思います。
11.CSS設計の概念を理解する
CSS設計は、CSSを記述する時のルールとなるものです。プロジェクト毎に適したCSS設計を採用することで、良いCSSにすることができます。
次のステップとして、※FLOCSS（フロックス）をベースとしてCSSの構成と命名規則を参考にした方がいいかと思います！
※OOCSSやSMACSS、BEM、SuitCSSのコンセプトを取り入れた、モジュラーなアプローチのためのCSS構成案。MCSSのレイヤー構成にも大きな影響を受けている。
アートピースでもコーディングの効率化のため、ガイドラインを設けています！これからもより安定しているサービスを提供できるよう心かけます。因みに先頭に書いた嫁に聞かれた質問の答えは「うん！そうかもねー」でした！はい！普通〜〜！
ではでは
▼参照
