どうも7noteです。前回の続きです。

4.CSS

4.1 CSSスタイルルール

4.1.1 CSSの妥当性

『文法通りの正しい書き方で書きましょう』

文法チェックはこちらからできますとのこと。
→https://jigsaw.w3.org/css-validator/

4.1.2 IDとクラスの命名

『id名とclass名は内容や意味を表す名前を付けましょう』

/* 非推奨 */
#yee-1901 {}
/* 推奨 */
#gallery {}
#login {}
.video {}

用はデタラメな名前は付けるなってことですね。

4.1.3 IDとクラス名のスタイル

『id名とclass名は理解しやすく、かつ短く書きましょう』

/* 非推奨 */
#navigation {}
.atr {}

/* 推奨 */
#nav {}
.author {}

これだけでもメンテナンス性が上がりますね。

4.1.4タイプセレクター

『どうしても必要でない場合以外は、要素名＆class名を組み合わせて使用しないでください。』

/* 非推奨 */
ul#example {}
div.error {}

/* 推奨 */
#example {}
.error {}

たとえばp要素にtextというクラス名を付けている時に、p.text{～}と書かず、要素名は省略して.text{～}と書いてください。という話みたいです。

4.1.5略記プロパティ

『ショートハンドで記述が可能なプロパティはショートハンドで書きましょう』

/* 非推奨 */
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

/* 推奨 */
padding: 0 1em 2em;

ショートハンドで書くと効率や理解しやすさなどが向上するので、ショートハンドで書きましょう。
ショートハンドが書けるプロパティ一覧はこちら↓
【初心者でもわかる】cssで使えるショートハンドの書き方と、ショートハンドかロングハンドのどちらを使うべきかについての考察

4.1.6 0と単位

『プロパティの値で、数値が0の時は単位を省略しましょう』

/* 非推奨 */
margin: 0px;
padding: 0px;

/* 推奨 */
margin: 0;
padding: 0;

marginやpaddingで0pxを指定するときは、単位を省略してmargin: 0;という風に書きましょう。

4.1.7 値の先頭の0

『小数点以下(1以下)の場合、0は省略して「.」から書き始めましょう』

/* 非推奨 */
font-size: 0.8em;
/* 推奨 */
font-size: .8em;

プロパティの値で、「0.5s」などのように1以下の場合、先頭の0は省略できます。

4.1.8 16進表記

『16進数で3桁に省略できる場合は省略して書きましょう。』

/* 非推奨 */
color: #eebbcc;
/* 推奨 */
color: #ebc;

4.1.9プレフィックス

『略称のid名やclass名には、コメントで略前の名称を入れておきましょう』

/* 推奨 */
.adw-help {} /* AdWords */
#maia-note {} /* Maia */

他の人がソースを見たときに、なんの略か伝わるようメモを書いておきましょう。

4.1.10 IDおよびクラス名の区切り文字

『複数の単語を連結してclass名などを書く場合はハイフン(-)を使いなさい』

/* 非推奨 */
.error_status {}
/* 推奨 */
.error-status {}

アンダースコア(_)や頭文字を大文字にしてつなげるのは非推奨です。

4.1.11ハック

『ユーザーのデバイスやブラウザごとにCSSを書き分けて対処するのはすばらしい！』

的なことが書いてます。ユーザーエージェントや各ブラウザごとにCSSを書くようにしましょう。

4.2 CSSのフォーマットルール

4.2.1宣言の順序

『プロパティはアルファベット順など統一のルールで書きなさい』

/* 推奨 */
div {
  border-radius: 4px;
  color: black;
  text-align: center;
}

アルファベット順でなくてもいいでしょうが、ソースを書く度書く度バラバラの順番なのはよろしくないですね。

4.2.2コンテンツのインデントをブロックする

『CSSもインデントを付けて見やすく書きましょう』

/* 推奨 */
html {
  background: #fff;
  color: #444;
}

クローラーうんぬんの話より、開発者が見やすいかどうかの話が多くなってきました。

4.2.3宣言の停止

『プロパティの宣言後はセミコロン（;）を忘れず書きましょう』

/* 非推奨 */
height: 100px
/* 推奨 */
height: 100px;

4.2.4プロパティ名の停止

『プロパティと値の間のコロン（:）の後ろは半角スペースを入れましょう』

/* 非推奨 */
font-weight:bold;
/* 推奨 */
font-weight: bold;

4.2.5宣言ブロックの分離

『セレクタ指定後のかっこ({)の前には半角スペースを入れましょう』

/* 非推奨 */
#video{
  margin-top: 1em;
}
/* 推奨 */
#video {
  margin-top: 1em;
}

4.2.6セレクタと宣言の分離

『複数のセレクタに指定する場合は、カンマ（,）の後に改行を入れましょう』

/* 非推奨 */
a:focus, a:active {
  position: relative; top: 1px;
}
/* 推奨 */
a:focus,
a:active {
  position: relative; top: 1px;
}

4.2.7ルールの分離

『セレクタ{}とセレクタ{}の間は改行を入れてを1行分空けましょう』

/* 推奨 */
html {
  background: #fff;
}
    /*←←←←←1行開ける*/
body {
  margin: auto;
  width: 50%;
}

4.2.8 CSS引用符

『属性セレクターとプロパティ値にはシングルクォーテーション(‘)をつかいましょう』
『urlにはシングルクォーテーション(‘)もダブルクォーテーション(“)も不要です』

/* 非推奨 */
html {
  font-family: "open sans", arial, sans-serif;
}
/* 推奨 */
html {
  font-family: 'open sans', arial, sans-serif;
}

※例外として@charsetを使用する場合は、ダブルクォーテーションを使ってください

4.3 CSSメタルール

4.3.1セクションのコメント

『必要があればセクションごとにセクションコメントを入れてグループ分けしてください。』

/* 推奨 */

/* Header */

#adw-header {}

/* Footer */

#adw-footer {}

/* Gallery */

.adw-gallery {}

まとめ

CSSの書き方とかはなんとなくで書いてしまっていることが多いので、今一度改めてソースを見直して
綺麗なソースを意識して書くようにしたいですね。
とくに今回のような書き方の部分は最初の頃に身につけておかないと癖がついてしまうので、早い目に直しておきたいところです！

【Google HTML CSSスタイルガイド】を初めて読んだので、一言で分かるようにまとめてみた -CSS編-