CSSコードにコメントする方法

CSSでコメントを使用する方法。

CSSスタイルシート内にコメントを書き込んで、自分自身またはチームのメンバーのために、コードを簡単に文書化（説明）します。

CSSでコメントを書くには、次の構文/形式を使用します。

/* This is a CSS comment */

/* */ 形式はのみです CSSでコメントを書く方法であるため、単一行と複数行の両方のコメントに使用されます。

/* 
   This is a 
   multi-line 
   CSS comment.
   Also known as a block comment.
*/

コメント構文を使用してコメントアウトするいくつかの例 ルールセット内のCSSコード：

  .box {
    background-color: #000;
    padding: 1.5rem;
    /* border-radius: 4px; */ 
  }

  .box {
    background-color: #000;
    padding: 1.5rem; /*
    border-radius: 4px; 
    box-shadow: 5px 10px #888888;
    */
  }

実際には、コメントはコードの文書化と、場合によってはコメントアウトの両方に使用されます。 テスト中に特定のスタイル宣言を（非アクティブ化）します。

CSSコメントとJavaScriptコメントを混同しないでください。 JavaScriptの場合/* */ （CSSと同じ形式）は複数行に使用されますが、単一行のコメントは二重スラッシュ//を使用します 。

• 1行のコメントはインラインとも呼ばれます コメント。
• 複数行のコメントはブロックとも呼ばれます コメント。

//を使用しているプロジェクトを見たことがあるかもしれません CSSコードの1行のコメント用。もう少し詳しく見ると、JavaScriptのように1行のコメントを許可するSass/SCSSなどのCSSプリプロセッサを使用していることがわかります。 バニラ （プレーン）CSS、残念ながら/* */しかありません

CSSコードにコメントを書く必要がありますか？

HTMLチュートリアルにコメントする方法で説明したように、開発者はこのトピックについて同意しません。コードは明示的で自明であるべきだと考える人もいます。

私にとって、トピックは白黒ではありません。すべてのコメントが同じように書かれているわけではありません。 CSSスタイルシートを使用して最新の小説を作成することはできませんが、小さく簡潔なコメントは、チームの初心者や初心者がコードで何が起こっているのかを理解するのに役立つ世界的な違いを生む可能性があります。

明示的 暗黙的 いつでも。

コメントがスペースを取りすぎてページの読み込みに悪影響を与えることを心配する必要はありません。一般に、コメントまたはテキストは、パフォーマンス/ページの読み込み速度を向上させる際に心配する必要のある最後のことです。さらに、後処理中にコメントを削除できるツールがあります。