//로 CSS 한 줄을 주석 처리하는 것은 나쁜 습관입니까?

//로 CSS 한 줄을 주석 처리하는 것은 나쁜 습관입니까?

---

최근 //에 CSS 코드 한 줄을 "주석"하기 위해 사용 하기 시작했습니다 . 나는 실제로 줄을 주석으로 처리하지 않는다는 것을 이해합니다. 나는 그것을 부수고 있지만 (사용해야 함 /* ... */) 동일한 효과가 있습니다. 그런 다음 줄이로 종료되고 ;다음 코드가 제대로 작동합니다.

삭제할 수는 있지만 나중에 다시 넣고 싶거나 다시 돌아 오면 사용했던 내용을보고 싶을 때 선호하지 않는 경우가 많습니다.

예:

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

이 문제를 피할 수 있습니까? 아니면 문제를 일으킬 가능성이 있습니까?

---

가장 먼저, 주석 처리 된 코드는 코드 냄새 이므로 피해야합니다. 나는 당신이 역사적인 코드를 처리하는 Git 과 같은 VCS를 사용하고 있다고 가정 합니다.

하지만 정말로 이런 방식으로 작업하고 싶다면 : 미래 및 / 또는 이국적인 브라우저가와 같은 비공식 해킹을 어떻게 해석할지 모르기 //때문에 적절한 표기법을 사용하는 것이 좋습니다.

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

---

나는 이것에 대해 불평하는 사람들이 많았고 이것은 오래된 질문이기 때문에 많은 사람들이 여전히 사실인지 아니면 실제로 표준이 있는지 궁금해하는 사람들이있을 것입니다. 공기를 맑게 해주세요. 다음은 엄격한 CSS 주석 정책의 핵심 이유입니다.

# 1 표준이 아닙니다

최소한 CSS 2.1 이후로 표준화되었으므로 주석은 /*및 */. 일부 브라우저는 허용하지만 허용 //되지 않으며 "오 예, 비표준입니다"또는 "헤이! 비표준입니다. 고쳐주세요!"라고 말하는 사람으로부터 단 1 인치 거리입니다. 그런 다음 작동하던 CSS 코드가 이제 수천 명의 사용자를위한 것이 아닌 (그리고 이미 수백 명의 다른 사용자를 위해 작동하지 않았을 수도 있음) 무엇을 추측하십시오. 나는 그것을 추가 할 것입니다 <!--그리고 -->그들이 아닌 .CSS 소스 파일, HTML 문서 내에 표시되는 경우에만 허용되지만 (그리고 나는 단지 의미). 브라우저가 너무 오래되어 <style>태그를 건너 뛸 수 없다면 아마도 10 년 전 새 브라우저가 필요할 것입니다. Lynx 조차 다른 텍스트 브라우저는 읽을 수 없다는 것을 알고 있으므로 주석 처리는 하드웨어와 소프트웨어가 현재 작업 상태에 잠겨있는 매우 고립 된 상황에서만 유용합니다.

# 2 크로스 플랫폼 친화적이지 않습니다.

으로 한 줄에서 시작하는 한 줄 주석은 //플랫폼 간 표준화 된 문자가 아닌 'newline'으로 끝납니다. 더 나쁜 것은, 일부는 개행 문자에 대해 하나의 문자를 가질 수 있습니다. 또는 이러한 플랫폼이 함께 섞일 때 개행 문자가 손실 될 수 있으며 종결자가 있습니다 ... 그리고 이제 코드의 일부 또는 전체가 주석 처리됩니다. 그 결과가 무엇인지 알기 위해 천재 일 필요는 없습니다. 특히 많은 사람들이하는 CSS를 통해서만 사이트의 기능을 제어하는 ​​경우에는 더욱 그렇습니다.

# 3 표준은 모두에게 친절하고 균일합니다.

/*및 */구분 기호는 항상 관계없이 건축 EVERY 컴퓨터에서 동일한 문자로 등 운영 시스템을 가고있다

# 4 줄 바꿈은 공백입니다.

마지막 이유 (예, 하나 더 있음), 개행 문자 (들)는 (CSS 및 기타 여러 언어에서) 공백으로 간주되며 */공백이 아닙니다. 그리고이 시점에서 생각해 보면, 특히 공백이 많은 HTML / CSS 파서에 의해 제거 될 수 있기 때문에 주석을 종료하기 위해 공백을 사용해서는 안된다는 것이 매우 분명해야합니다.

# 5 CSS! = C / C ++

이제 자리에서 나와 "Hey, but C ++ ..."에 대해 소리 치려고한다면 컴파일러와 IDE에는 수많은 개행 검사 및 감지 기능이 내장되어 있으므로이를 취할 수 있습니다. 대부분의 컴파일러는 요청하지 않는 한 코드 형식을 다시 지정하지 않으며, 많은 IDE는 일반적으로 문서가 자체적으로 추측 할 수없는 경우 어떤 종류의 줄 바꿈을 사용하는지 묻습니다. 최종 사용자가로드 될 때마다 CSS 페이지를 사용하여이 작업을 수행했다면이 페이지를 돌아 다니는 악몽을 상상해보십시오. 또한 C / C ++ 코드는 런타임에 구문 분석되지 않고 컴파일되므로 대부분의 경우 사용자는 처음부터 해당 문서를 가져 오지 않습니다. 소스 파일은 수백 개의 플랫폼과 많은 운영 체제, 그리고 수백만 개의 다른 브라우저에서 전 세계가 지속적으로 볼 수 없습니다. 주석은 최종 사용자에게 전달되기 전에 제거됩니다. CSS 소스는 사용자의 브라우저에 바로 제공되며 다른쪽에있는 것이 무엇인지 알지 못하는 상태에서 매우 탄력적이어야합니다. 따라서주의 할 점은 최종 사용자가 가지고 있거나하는 모든 것에 대해 준비해야한다는 것입니다.

# 6 불편하다

아니요, 추가로 입력해야하는 것은 매우 성가신 */일이지만, 이것에 대한 책임은 주로 자동 완성 기능을 제공하지 않는 CSS 편집 소프트웨어 개발자에게 있습니다. 이 작업을 수행 할 수있는 특수 편집기를 사용하는 경우, 가급적이면 즉시 사용할 수 //있습니다. 를 사용하는 것만 큼 쉽습니다 . 입력하는 습관 /**/을 들인 다음 백 스페이스 2를 사용하면 잊지 않고 조금 더 쉽게 할 수 있습니다. 더 좋은 방법은 핫키를 설정하여 바로 내려 놓을 수 있다는 것입니다. Windows와 Linux 모두이를 허용하는 강력한 도구가 있습니다 (KDE는이를 위해 매우 좋습니다).

---

나는 이것이 모두가 "방법"뒤에있는 "이유"를 이해하는 데 도움이되기를 바라며, 무언가가 당신에게 효과가 있다는 것을 기억하고 그것이 표준이라는 것을 의미하지 않으며 요약하면 :

예, 그것을 사용하는 것은 나쁜 습관입니다. 이중 슬래시에 아니오라고 말하십시오 !!! 이 중요한 사실을 상기시키기 위해 시각 자료가 필요하면이 이미지를 마음 속에 태워 버립니다 (이렇게 사진을 찍는 것 외에 더 좋은 방법이없는 분들께 감사드립니다).

---

추신 : CSS 표준 (W3C, 팔꿈치)을 만들고 위반하는 사람들에게 불만을 제기하고 싶다면 누군가 "! important"키워드가 얼마나 길고 잘못되었는지에 대해 토론을 시작합니다! 그러나 그것은이 질문의 일부가 아니므로 이에 대해 다루지 않겠습니다.

참고 문헌

• W3C : CSS 2.1 작업 초안 : 주석 문자.
• W3C : CSS 구문 모듈 레벨 3 : 파서-문자 해석의 철도 다이어그램.
• Stack Overflow : 주제가 거의 동일한 다양한 Stack Overflow 기사.
• w3schools : CSS 3 구문 표준 (이는 W3C를 참조 함).
• sitepoint : "이중 슬래시를 사용하지 않음"에 대한 CSS 구문 주석입니다.
• mozilla | mdn : 완화 된 CSS 3 처리로 입력 파일에서 이중 슬래시가 허용됩니다.

---

나는 최근 에 CSS에서 한 줄로 주석을 달 수있는 방법에 대해 많은 빛을 비추는 이 기사 를 읽었습니다 .

CSS를 사용 //하면 유행 후에 사용할 수 있습니다 . 라인 주석이 아니라 다음 구성 주석 입니다. 즉,를 사용할 때마다 //다음 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블록 을 주석 처리합니다 .

처음에 언급 된 링크 된 기사를 통해 더 많은 정보를 얻을 수 있습니다.

---

Working Draft에 따르면 한 줄짜리 주석과 같은 것은 없습니다.

---

예, 현재 상태에서 한 줄 주석을 사용하는 것은 나쁜 습관이라고 생각합니다.

우선, 팀 환경에서 작업하는 경우 코드 유지 관리 / 가독성이 가장 중요하며 혼자 작업하더라도 유지 관리 가능한 코드를 작성하는 것이 좋습니다. 그렇지 않으면 정신 이상이 계속됩니다.

한 줄 주석을 사용하기 시작하면 유지 관리 및 가독성이 모두 저하되고 편집기 내의 구문 강조 표시기가 주석을 강조 표시하지 않으며 주석과 규칙을 구별하기가 어려워집니다.

또한 단일 및 다중 행 주석은 포괄적으로 상호 교환 할 수 없습니다. 예를 들어 해킹을 사용하지 않고 원시 텍스트 주석을 사용할 수없고 구문 //.foo {...}이나 규칙 만 주석 처리 할 수 ​​있습니다 .foo {//height:10px}.

교환 할 수없는 인스턴스 :

ul.images {
    padding: 0;
    //static height value
    height: 270px;
    margin: 0 auto;
}
ul.images {
    padding: 0;
    /*static height value
    height: 270px;*/
    margin: 0 auto;
}

이제 상호 교환 가능합니다 (빈 생성자 해킹 으로 인해 ) :

ul.images {
    padding: 0;
    //static height value{};
    height: 270px;
    margin: 0 auto;
}
ul.images {
    padding: 0;
    /*static height value*/
    height: 270px;
    margin: 0 auto;
}

While using the constructor {}; as a postfix will work, it does IMO defeat the purpose of using it, because you'll use more characters; a multi-line comment uses four characters, /**/, whereas a single-line comment with the hack uses five characters, //{};

The last caveat of single-line comments which hasn't been mentioned yet, is that Chrome developer tools will hide commented-out rules, rather than allowing you to toggle them.

Chrome developer tools (multi-line comment):

Chrome developer tools (single-line comment):

A good use case, IMO, for single-line comments would be when you need to comment-out an entire constructor, which is really long (the example won't be).

Commenting out an entire constructor

//ul.images {
    padding: 0;
    height: 270px;
    margin: 0 auto;
}

/*ul.images {
    padding: 0;
    height: 270px;
    margin: 0 auto;
}*/

In closing, if you are trying to debug something during development, I don't see the harm in commenting-out a constructor with single-line comments to weed out a bug. If you're debugging then it'll be temporary. That said, I don't see any use case for raw-text, so I definitely wouldn't advocate using them there.

---

I would recommend not commenting out CSS like this when it's not needed. Remove the stuff that you don't need and commit it to your SVN or GIT repository. Let it do its job and keep track of history for you. Accumulated comments like this become cruft that make your code harder to read and understand.

---

I use // to 'comment out' lines in .css files all the time. Because it's bound to a shortcut in Vim, and I always forget what I am editing. In JavaScript it's really handy to comment out blocks of code, test the code, and 'comment in' the block of code again (shortcuts, yes).

But when I tidy op my .css file, I use the following constructs to more easily move declarations in and out of scope:

.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;
}

In .pin I can remove a line and add it to the commented area and vice versa. In .shadow I just redeclare the same property with a different value.

It's a pain.

!important

---

As others have said, using a double slash is not standards compliant, but if you really want to use it AND want to be standards compliant AND you have gcc installed, you can run your CSS through cpp -P to strip out all double slash and /* ... */ comments from the CSS. As a bonus, you can use macros, includes and conditionals, and comments don't get downloaded by the browser (minor performance boost).

The only major problem is using standalone id tags (i.e., #para { ... }) where cpp barfs. Solution there is double the # (to ##) and pass the output through sed, like this:

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

I'm sure there are better CSS-oriented preprocessors, but this worked for me.

---

For inline CSS comments, I use:

.myDiv {
    @width:750px;  
}

또는 원하는 문자 (예 :) *@!ZZ따라서 속성이 알려지지 않고 CSS로 읽을 수 없게됩니다.

---

HTML 주석 :

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

JavaScript의 주석 :

한 줄 주석 :

코드 앞에 두 개의 슬래시 "//":

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

여러 줄 주석 :

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

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

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

</script>

CSS의 주석 코드 :

/*
.tblemp {
color:red; }

*/

자세한 내용은

---

추가 정보를 추가하고 "/ * 주석 만 사용"규칙을 확인하기 위해. 웹 사이트 폴더에 대한 액세스 권한이있는 고객은 다음을 사용하여 한 줄을 주석 처리하기 만하면됩니다.

//*  comment here   *//

실제로 Chrome 과 Safari 는이 줄 뒤에 오는 모든 것을 무시합니다. 나는 그것을 "CSS 킬러"라고 부를 것입니다.

참고 URL : https://stackoverflow.com/questions/12298890/is-it-bad-practice-to-comment-out-single-lines-of-css-with