web-dev-qa-db-ja.com

CSSの1行を//でコメントアウトするのは悪い習慣ですか？

私は最近//を使用して、CSSコードの1行を「コメントアウト」し始めました。私は実際に行をコメントアウトしていないことを理解しています。私はちょうどそれを壊しています（/* ... */を使用する必要があります）が、同じ効果があります。行は;で終了し、次のコードは正常に機能します。

削除することもできますが、後で元に戻したい場合や、戻ってきたときに使用していたものを確認したい場合は避けたいことがよくあります。

例：

li{
    float:left;
    //list-style-type:none;
    text-indent:0px;
}

これで逃げることができますか、それとも問題を引き起こす可能性がありますか？

csssyntaxcomments
60
Adam Milward

何よりもまず：コメントアウトされたコードは code smell であり、避けるべきです。 Git のようなVCSを使用していると仮定します。これは、履歴コードを処理します。

しかし、あなたが本当にこのように働きたいのなら、将来のブラウザやエキゾチックなブラウザが//ので、適切な表記法に従うことをお勧めします。

li {
    float:left;
    text-indent:0px;
    /* list-style-type:none; */
}
44
Dennis Traub

これについて不満を言う人がたくさんいたことはわかりますが、これは古い質問なので、おそらくそれが真実であるのか、そもそも実際に標準があるのか​​と疑問に思う人が多いでしょう。空気をきれいにしてください。厳格なCSSコメントポリシーの主な理由は次のとおりです。

＃1標準ではありません

少なくともCSS 2.1以降で標準化されているため、コメントは/*および*/にのみ含める必要があります。一部のブラウザは//を許容しますが、想定されておらず、「ああ、そう、それは非標準です」または「ちょっと！それは非標準です、修正してください」と言っている人からわずか1インチです。そして、何が働いていたあなたのCSSコードが今では何千人もの人々のために（そしてすでに何百人もの人々のために働いていなかったかもしれません）何を推測します。 <!--と-->は許可されますが、それらが.cssソースファイルではなくHTMLドキュメント内に表示される場合にのみ追加されます（そして、それは唯一の意味です）。お使いのブラウザが非常に古く、<style>タグをスキップできない場合は、おそらく10年前の新しいブラウザの時間です。 Lynx および他のテキストブラウザーでもそれらを読み取らないことがわかっているため、コメントアウトするのは、ハードウェアとソフトウェアが現在の動作状態で内陸している非常に孤立した状況でのみ役立ちます。

＃2（非常に）クロスプラットフォームに対応していません

//で始まる行のどこからでも始まる単一行コメントは、クロスプラットフォームの標準化された文字ではない「改行」で終了します。さらに悪いことに、ある人は改行用に1文字、または2 ...を持ち、これらのプラットフォームが混ざり合うと、改行が失われ、ターミネータが...そしてコードの一部またはすべてがコメントアウトされます。特に、多くの人が行うCSSだけでサイトの機能を制御する場合は、その結果が何であるかを知るために天才である必要はありません。

＃3標準ISすべてに友好的で均一

/*および*/の区切り文字は、アーキテクチャ、オペレーティングシステムなどに関係なく、すべてのコンピューターで常に同じ文字になります。

＃4改行は空白です

最後の理由（はい、もう1つあります）、改行文字は（CSSおよび他の多くの言語で）空白と見なされ、*/は空白ではありませんか？そして、この時点でそれについて考える場合、特に空白は多くのHTML/CSSパーサーによって除去されたり、それについて知らずに再フォーマットされたりする可能性があるため、コメントを終了するために空白を使用しないでください。

＃5 CSS！= C/C++

席を離れて「Hey、but C++ ...」と怒鳴りつけようとしている場合は、それらのコンパイラとIDEに大量の改行チェックと検出機能が組み込まれているので、それを利用できることに注意してください。ほとんどのコンパイラは、要求されない限りコードを再フォーマットしません。多くのIDEは、通常、ドキュメントが独自に推測できない場合、どのような改行を使用しているかを尋ねます。エンドユーザーが読み込まれるたびにCSSページを使用してこれを実行した場合、悪夢が回避しようとしていると想像してください。さらに、C/C++コードは実行時に解析されず、コンパイルされるため、ほとんどの場合、ユーザーは最初に問題のドキュメントを取得することはありません。ソースファイルは、何百ものプラットフォームと多くのオペレーティングシステム、および何百万ものブラウザ上で世界中で常に表示されているわけではありません。コメントは、エンドユーザーに届く前に削除されます。 CSSソースはユーザーのブラウザに直接届き、反対側にあるものを知らない非常に弾力性のあるものでなければならないので、開発者がやっていることではなく、エンドユーザーが持っているかしていることに対して準備ができている必要があります！

＃6不便です

いいえ、余分な*/を入力するのは非常に面倒ですが、主な原因は、自動補完を提供しないCSS編集ソフトウェアの開発者です。できればすぐに使える特別なエディターを使用する場合は、//を使用するのと同じくらい簡単であることがわかります。 /**/を入力してからバックスペース2を入力する習慣を身に付けると、忘れないようになり、少し簡単になります。さらに良いのは、ホットキーを設定して、それらを配置するだけです。 WindowsとLinuxの両方には、これを可能にする強力なツールがあります（そのためにはKDEが非常に適しています）。

これが誰もが「方法」の背後にある「なぜ」を理解し、何かがあなたのために働くからといって、それが標準であることを意味しないことを思い出してください。

はい、IT ISそれを使用するのは悪い習慣です。ダブルスラッシュにNOとだけ言ってください!!!必要な場合この重要な事実を思い出させる視覚的な助けとして、この画像をあなたの心に焼き付けてください（このような写真を撮る以外に何もすることがない方に感謝します）：

No double slash

PS：CSS規格（W3C、肘）を作っている/破っているものに何か文句を言いたい場合、誰かが "！important"キーワードが不必要に長く間違っているという議論を始めます。しかし、それはこの質問の一部ではないので、これには触れません。

参照資料

  • W3C：CSS 2.1ワーキングドラフト：コメント文字
  • W3C：CSS構文モジュールレベル3：パーサーから文字への解釈の鉄道図
  • Stack Overflow：これと実質的に同じ主題のさまざまなStack Overflow記事
  • w3schools：CSS 3構文標準（順番にW3Cを参照）
  • sitepoint：「ダブルスラッシュを使用しない」CSS構文の注釈。
  • mozilla | mdn：緩和されたCSS 3処理により、入力ファイルで二重スラッシュが許可されます。
76
osirisgothra

最近読んだのは この記事 で、CSSの1行コメントの実践に多くの光を当てています。

CSSでは、ファッションの後に//を使用できます。行コメントではありませんが、next構成コメントです。つまり、//を使用するたびに、次のCSSコンストラクト（宣言またはブロック）が「コメントアウト」されます。

そのため、コードスニペットではlist-style-type:noneが次のCSSコンストラクトであり、コメント化されています。

li {
    float:left;
    //list-style-type:none;
    text-indent:0px;
}

同様に、以下のコードスニペットでは

//@keyframes foo {
  from, to { width: 500px; }
  50% { width: 400px; }
}
@keyframes bar {
  from, to { height: 500px; }
  50% { height: 400px; }
}

//は最初の@keyframes宣言をコメント化します。

スタイルシートにコメントを書き込むためだけに//を使用しようとする場合、注意する必要があります。生のテキストはCSSコンストラクトではないため、ページの次のコンストラクトをコメントアウトします。以下のスニペットで

// Do some stuff.
.foo { animation: bar 1s infinite; }

これにより、.fooブロックがコメント化されます。

最初に言及したリンクされた記事を介して詳細情報を取得できます。

6
Naveen

ワーキングドラフトによれば 、単一行コメントのようなものはありません。

4
Rob

不要な場合は、このようなCSSをコメントアウトしないことをお勧めします。不要なものを削除し、SVNまたはGITリポジトリにコミットします。それがその仕事をしてみましょうし、あなたのために歴史を追跡します。このように蓄積されたコメントは、コードを読みやすく、理解しにくくするために厄介になります。

2
duffymo

私が使う //常に.cssファイルの行を「コメントアウト」します。 Vim のショートカットにバインドされているため、編集中の内容を忘れてしまいます。 JavaScriptでは、コードのブロックをコメントアウトし、コードをテストし、コードのブロックを再度「コメントイン」する（ショートカット、はい）ことは本当に便利です。

しかし、.cssファイルを片付けるときには、次の構成を使用して宣言をスコープ内外に簡単に移動します。

.pin {
    /*
    position: absolute;
    background: url(buttons-3x3.png);
    background-color: red;
    */
    height:50px;
    width:150px;
    position: relative;
}


.shadow {
    margin-top: 25px;
    margin-left: 25px;
    margin-left: 60px;
    width:50px;
    height:50px;
    background: url(playground.png) -400px -100px;
    position: relative;
    position: absolute;
}

.pin行を削除してコメント領域に追加したり、その逆を行うことができます。 .shadow同じプロパティを異なる値で再宣言しました。

苦痛です。

！important

2
user37057

他の人が言ったように、ダブルスラッシュの使用は標準に準拠していませんが、reallyを使用し、標準に準拠し、gccをインストールしている場合は、cpp -Pは、CSSからすべての二重スラッシュと/ * ... * /コメントを取り除きます。ボーナスとして、マクロ、インクルード、および条件を使用でき、コメントはブラウザーによってダウンロードされません（パフォーマンスが若干向上します）。

唯一の主要な問題は、スタンドアロンIDタグ（つまり、#para { ... }）ここで、cpp barfs。解決策は、＃を2倍にして（##に）、次のように出力をsedに渡します。

cpp -P site.cssin | sed -e 's/^##/#/' >site.css

より良いCSS指向のプリプロセッサがあると確信していますが、これは私にとってはうまくいきました。

1
AndrewTPhoto

インラインCSSコメントの場合、以下を使用します。

.myDiv {
    @width:750px;  
}

または任意の文字（つまり、*@!ZZ）したがって、プロパティは不明になり、CSSで読み取ることができなくなります。

1
T.Todua

HTMLでのコメント：

<!--........................-->
<!--  <input type="text" name="lastname">-->

JavaScriptのコメント：

単一行コメント：

コードの前にある2つのスラッシュ「//」：

//document.write("Try this");

複数行コメント：

<script type="text/javascript">
    <!--

    /* document.write("try this!");

    document.write("try this"); */
    //-->

</script>

CSSのコメントコード：

/*
.tblemp {
color:red; }

*/

詳細

0
Tamilan

さらに情報を追加し、「/ *コメントのみを使用」ルールを確認するために。 Webサイトフォルダにアクセスできる顧客は、これを使用して1行をコメントアウトするために自分で選択するだけです。

//*  comment here   *//

実際に Chrome および Safari は、この行に続くANYTHINGを無視します。私はそれを「CSSキラー」と呼びます。

0
Dario Corno