CSS 블록의 마지막 세미콜론 제외

CSS 블록의 마지막 세미콜론 제외

---

이에 관한 몇 가지 질문 :

• 좋은 습관입니까?
• 대규모로로드 시간이 개선됩니까?
• 브라우저가 '중단'될 수 있습니까?
• 자바 스크립트 (/ jQuery)의 마지막 함수도 마찬가지입니까?

내가 의미하는 것은 다음과 같은 것입니다.

#myElement {
  position: absolute;
  top: 0;
  left: 0
}

---

좋은 습관입니까?

세미콜론을 수동으로 제외하는 것은 좋지 않습니다. 특히 팀에서 작업하는 경우 더 많은 스타일을 추가 할 때 간과하기 쉽기 때문입니다.

다음으로 시작한다고 상상해보십시오.

.foo {
    background-color: #F00;
    color: #000             <-- missing semi-colon
}

그리고 누군가가 몇 가지 스타일을 추가합니다.

.foo {
    background-color: #F00;
    color: #000             <-- missing semi-colon
    width: 30px;
    z-index: 100;
}

갑자기 다른 개발자가 자신의 width선언이 작동하지 않는 이유를 파악하는 데 시간을 낭비 하고 있습니다 (또는 더 나쁜 것은 작동하지 않는다는 것을 알지 못함). 세미콜론은 그대로 두는 것이 더 안전합니다.

대규모로로드 시간이 개선됩니까?

가장 확실하게 모든 블록에 대해 몇 바이트를 절약 할 수 있습니다. 특히 큰 스타일 시트의 경우 추가됩니다. 이러한 성능 향상에 대해 걱정하는 대신 YUI Compressor 와 같은 CSS Compressor를 사용 하여 끝 세미콜론을 자동으로 제거하는 것이 좋습니다.

브라우저가 '중단'될 수 있습니까?

아니요, 브라우저가 사양의이 부분을 올바르게 구현하므로 안전합니다. CSS2 사양 은 다음과 같이 선언을 정의합니다.

선언 중 비어 있거나 속성 값 뒤에 콜론 (:), 다음 속성 이름,로 구성되어 있습니다.

더 중요한 것은:

... 동일한 선택자에 대한 여러 선언을 세미콜론 (;)으로 구분 된 그룹으로 구성 할 수 있습니다.

이는 ;여러 선언을 구분하는 데 사용되지만이를 종료하는 데 필요하지 않음을 의미합니다.

Javascript의 마지막 기능도 마찬가지입니까?

JavaScript는 완전히 다른 사양을 가진 완전히 다른 짐승입니다. 이 특정 질문은 이전에 Stack Overflow에서 여러 번 깊이 답변되었습니다 .

---

• 아니요, 세미콜론을 생략하면 응용 프로그램에 많은 위험이 발생합니다. 요소에 스타일을 더 추가하면 세미콜론을 다시 추가하는 것을 간과하기가 너무 쉽습니다. 이 시점에서 세미콜론이 아닌 라인을 실수로 잘못 배치하지 않도록 수동 프로세스와 세부 사항에 대한주의에 의존하게됩니다. 더 나쁜 것은 각 요소의 최종 스타일 라인을 망가 뜨리지 않았는지 확인하기 위해 프로덕션에 갈 준비가 될 때마다 CSS 파일을 물리적으로 확인해야한다는 것입니다.

• 파일 크기가 더 작기 때문에 가능하지만 그 차이는 무시해도 좋습니다. 로드 시간이 걱정되는 경우 파일을 서버에 배치하기 전에 Gzip으로 압축 하면 도움이됩니다.

• 대부분의 브라우저는 당신이 의미하는 바를 알 정도로 똑똑하지만, 마지막 스타일에주의하지 않음으로써 CSS 파일을 망칠 까봐 걱정해야합니다.

---

• 좋은 습관입니까?

제 생각에는 아닙니다. 마지막 규칙 아래에 규칙을 추가하면 세미콜론을 추가하는 것을 잊기 쉽습니다.

• 대규모로로드 시간이 개선됩니까?

로드 시간에 큰 차이가있을 것이라고 상상할 수 없습니다.

• 브라우저가 '중단'될 수 있습니까?

아니요, 세미콜론은 CSS 블록에서 규칙을 구분하는 데만 필요합니다. 세미콜론은 종결자가 아니라 구분 기호입니다.

• 자바 스크립트 (/ jQuery)의 마지막 함수도 마찬가지입니까?

예, 세미콜론을 추가하기 위해 JavaScript 인터프리터에 맡기지 마십시오.

---

로딩 시간이 약간 향상됩니다. 충분히 큰 CSS 파일을 사용하면 눈에 띄기도합니다 (글쎄요, 전체적으로 축소 될 수 있습니다. 마지막 세미콜론을 제거하는 것만 으로도 충분할 것 같지 않습니다).

그러나 로딩 시간에 그렇게 신경을 쓴다면 CSS를 축소하기 위해 수동으로 시도하는 것이 아니라 프로그램을 사용해야합니다. 축소 된 CSS는 읽을 수 없습니다. 말하자면 "소스 코드"에서 이것을 사용하는 것은 나쁜 습관입니다. 잊기 쉽기 때문입니다.

---

중복 된 질문입니다. 여기를 보아라:

CSS의 세미콜론

JavaScript에서 세미콜론을 적용하는 것과 관련하여 함수는 선언적으로 할당되지 않는 한 세미콜론으로 끝나서는 안됩니다. var a = function() {};그러나 브라우저는 사용자가 실수로 (또는 고의로) 생략하면 자동 세미콜론 삽입을 수행합니다.

---

선언 중지 를 제거해도 브라우저가 "중단"되지는 않지만 자동화 된 미니 파이어 (특히 로딩 시간에 관심이 있다면 세미콜론만으로는 많지 않음)를 남겨 두어야하지만 유지 관리상의 이유로 소스에서는 피해야합니다.

모범 사례를 찾고 있다면 Google CSS 스타일 가이드의 CSS 형식 지정 규칙 이 시작하기에 아주 좋은 곳입니다. 제안을 맹목적으로 적용하는 것이 아니라 그이면의 이유를 확인하는 것입니다.

모든 선언 후에 세미콜론을 사용하십시오. 일관성과 확장 성을 위해 모든 선언을 세미콜론으로 끝냅니다.

/* Not recommended */
.test {
  display: block;
  height: 100px
}
/* Recommended */
.test {
  display: block;
  height: 100px;
}

Javascript는 다른 이야기입니다. 짧은 대답은 항상 세미콜론을 사용하고 암시 적 삽입에 의존 하지 않는 것 입니다.하지만 Google 이 또 다른 스타일 가이드에서 규정 한 것보다 더 좋고 철저한 대답을 본 적이 없습니다 .

세미콜론 누락이 특히 위험한 곳이 몇 군데 있습니다.

// 1.
MyClass.prototype.myMethod = function() {
  return 42;
}  // No semicolon here.

(function() {
  // Some initialization code wrapped in a function to create a scope for locals.
})();



var x = {
  'i': 1,
  'j': 2
}  // No semicolon here.

// 2.  Trying to do one thing on Internet Explorer and another on Firefox.
// I know you'd never write code like this, but throw me a bone.
[normalVersion, ffVersion][isIE]();



var THINGS_TO_EAT = [apples, oysters, sprayOnCheese]  // No semicolon here.

// 3. conditional execution a la bash
-1 == resultOfOperation() || die();

그래서 어떻게 되나요?

1. 자바 스크립트 오류-먼저 42를 반환하는 함수가 두 번째 함수를 매개 변수로 사용하여 호출 된 다음 숫자 42가 "호출"되어 오류가 발생합니다.
2. 을 호출하려고 할 때 런타임에 '정의되지 않은 속성 없음'오류가 발생할 가능성이 큽니다 x[ffVersion][isIE]().
3. die하지 않는라고 resultOfOperation()이다 NaN과 THINGS_TO_EAT의 결과를 할당됩니다 die().

왜?

JavaScript는 명령문이 세미콜론으로 끝나야하는 것을 요구합니다. 이러한 각 예제에서 함수 선언이나 객체 또는 배열 리터럴은 명령문 내에서 사용됩니다. 닫는 대괄호는 명령문의 끝을 알리기에 충분하지 않습니다. Javascript는 다음 토큰이 중위 또는 대괄호 연산자 인 경우 문을 종료하지 않습니다.

이것은 사람들을 정말 놀라게했습니다. 따라서 세미콜론으로 과제를 끝내야합니다.

---

좋은 습관입니까?

현명한 축소 프로세스가이를 처리 할 것이며 새로운 정의를 추가 할 때 세미콜론을 배치하는 것을 잊은 경우 오류가 발생할 수 있으므로 피하고 싶습니다.

대규모로로드 시간이 개선됩니까?

예, 더 작은 파일 크기입니다. 그러나 그 차이는 무시할 만하 며 최소화 프로세스가 자동으로 수행합니다.

브라우저가 '중단'될 수 있습니까?

아니

자바 스크립트 (/ jQuery)의 마지막 함수도 마찬가지입니까?

아니요, 함수 문 끝에서 세미콜론을 제외하는 것은 "잘못된"것입니다.

---

내 경험에 따르면 1) 좋은 습관이 아닙니다. 2) 매우 큰 규모의로드 시간도 중요하지 않습니다. 3) 이것에서 깨질 브라우저를 알지 못합니다. 4) jQuery도 마찬가지입니다.

---

CSS의 경우 IE9, FF, GC, Safari 및 Opera에서 시도했지만 차이가 없었습니다.

Javascript의 경우 FF 및 GC에서 오류가 발생 했으므로 스크립트에서는이 작업을 수행하지 마십시오. 로드 시간의 경우 차이가 눈에 띄지 않습니다.

ReferenceURL : https://stackoverflow.com/questions/11939595/leaving-out-the-last-semicolon-of-a-css-block