나는 그들을 싫어하고 CSS의 계단식 특성을 무시하고 조심스럽게 사용하지 않으면 더 추가하는 루프가 생깁니다 !important.

그러나 성능이 나쁘다는 것을 알고 싶습니다.

편집
(빠른) 답장에서 성능에 (중대한) 영향을 미치지 않을 것이라고 결론 지을 수 있습니다. 그러나 다른 사람들을 낙담시키는 추가 주장 일지라도 알고있는 것이 좋습니다.).

편집 2
BoltClock은 2 개의 !important선언 이 있으면 스펙이 가장 구체적인 것을 선택한다고 말합니다.

실제로 성능에 영향을 미치지 않아야합니다. 파이어 폭스의 CSS 파서를/source/layout/style/nsCSSDataBlock.cpp#572 보고 CSS 규칙 덮어 쓰기 를 처리하는 것이 관련 루틴이라고 생각합니다 .

"중요"에 대한 간단한 점검 인 것 같습니다.

  if (aIsImportant) {
    if (!HasImportantBit(aPropID))
      changed = PR_TRUE;
    SetImportantBit(aPropID);
  } else {
    // ...

또한 의견 source/layout/style/nsCSSDataBlock.h#219

    /**
     * Transfer the state for |aPropID| (which may be a shorthand)
     * from |aFromBlock| to this block.  The property being transferred
     * is !important if |aIsImportant| is true, and should replace an
     * existing !important property regardless of its own importance
     * if |aOverrideImportant| is true.
     * 
     * ...
     */

1. Firefox는 수동으로 작성된 하향식 파서를 사용합니다. 두 경우 모두 각 CSS 파일은 StyleSheet 객체로 구문 분석되며 각 객체에는 CSS 규칙이 포함됩니다.

2. 그런 다음 Firefox는 올바른 값으로 모든 규칙을 적용한 후 최종 값을 포함하는 스타일 컨텍스트 트리를 만듭니다.

보낸 사람 : http://taligarsiel.com/Projects/howbrowserswork1.htm#CSS_parsing

이제 위에서 설명한 개체 모델과 같은 경우 파서는 !important후속 비용을 들이지 않고도 쉽게 영향을받는 규칙을 표시 할 수 있습니다 . 성능 저하 는 반대의 좋은 주장 이 아닙니다!important .

그러나 유지 보수 가능성은 다른 답변과 같이 적중합니다. 이는 유일한 반대 의견 일 수 있습니다.

!important브라우저가 규칙과 얼마나 빨리 일치하는지에 관해서는 본질적으로 나쁘지 않다고 생각합니다 (선택 자의 일부가 아니라 선언의 일부만 형성합니다)

그러나 이미 언급했듯이 코드의 유지 관리 가능성이 줄어들어 향후 변경으로 인해 코드 크기가 불필요하게 커질 수 있습니다. 또한 사용법을 사용 !important하면 개발자의 성능이 저하 될 수 있습니다.

당신이 존재한다면 정말 까다 롭고, 당신은 또한 말할 수있는 !important이 정말 많이하지, 당신의 CSS 파일을 11 추가 바이트를 추가,하지만 당신은 공정한 몇 만약 내가 추측 !important이 추가 할 수있는 스타일 시트에들.

안타깝게도 내 생각만으로는 !important성능 에 어떤 영향을 줄 수 있는지에 대한 벤치 마크를 찾을 수 없었 습니다.

!important그 자리가 있습니다. 저를 믿어주세요. 그것은 여러 번 저축되었고 문제에 대한 길고 우아한 방법을 찾기 전에 단기 해결책으로 더 유용합니다.

그러나 대부분의 경우와 마찬가지로 악용되었지만 '성능'에 대해 걱정할 필요는 없습니다. 작은 1x1 GIF가 웹 페이지에서 더 중요한 성능을 발휘한다고 생각합니다!

페이지를 최적화하려면 더 많은 것이 있습니다 ! );)

여기서 배후에서 진행되는 작업은 CSS가 처리 될 때 브라우저가이를 읽고 !important속성을 발견 한 다음 브라우저가로 정의 된 스타일을 적용한다는 것 !important입니다. 이 추가 프로세스는 약간의 추가 단계처럼 보일 수 있지만 많은 요청을 처리하는 경우 성능이 저하됩니다. (출처)

CSS에서! important를 사용한다는 것은 일반적으로 개발자 자기애 적이며 이기적이거나 게으른 것을 의미합니다. 오는 개발자를 존중하십시오 ...

다음을 사용할 때 개발자의 생각 !important:

1. 내 흔들리는 CSS가 작동하지 않습니다 ... grrrr.
2. 이제 어떻게해야합니까 ??
3. 그리고 !important그래 .... 이제는 잘 작동합니다.

그러나 !importantCSS를 제대로 관리하지 않았기 때문에 사용하기에 좋은 접근 방식 은 아닙니다. 성능 문제보다 나쁜 디자인 문제가 많이 발생하지만 다른 속성을 재정의 !important하고 CSS가 쓸모없는 코드로 인해 복잡해지기 때문에 많은 추가 코드 줄을 사용해야 합니다. 대신 CSS를 잘 관리하고 속성이 서로 재정의하지 않도록해야합니다.

우리는 할 수 있습니다 사용합니다 !important. 그러나 다른 방법이 없을 때만 사용하십시오.

성능에 관계없이 나쁜 습관이기 때문에 사용하지 않는 것에 동의합니다. 그 이유만으로 !important가능한 한 사용하지 않는 것이 좋습니다.

그러나 성능에 관한 문제 : 아니요, 눈에 띄지 않아야합니다. 그것은 몇 가지 효과가 나타날 수 있습니다, 그러나 당신이 그것을 통지해서는 안 그래서 작은해야한다, 아니다 해야 당신은 그것에 대해 걱정.

눈에 띄게 충분할 정도로 중요한 경우 코드보다 더 큰 문제가있을 수 있습니다 !important. 사용하는 핵심 언어의 일반적인 구문 요소를 간단하게 사용한다고해서 성능 문제가되지는 않습니다.

답례적인 질문으로 당신의 질문에 답하겠습니다. 고려하지 않은 각도 : 어떤 브라우저를 의미합니까?

각 브라우저에는 분명히 자체 최적화 엔진이 있으며 자체 최적화 엔진이 있습니다. 이제 각 브라우저의 성능에 어떤 영향이 있습니까? 아마도 !important한 브라우저에서는 좋지 않지만 다른 브라우저에서는 제대로 작동합니까? 그리고 아마도 다음 버전에서는 다른 방식일까요?

여기서 필자의 요점은 웹 개발자로서 우리가 사용하는 언어의 개별 구문 구조의 성능에 대한 영향을 생각하거나 생각할 필요가 없다는 것입니다. 우리는 이러한 구문 구성을 사용해야합니다. 왜냐하면 그들이 수행하는 방식 때문에하지 않기를 원하는 올바른 방법이기 때문입니다.

시스템에서 핀치 포인트가있는 위치를 분석하기 위해 프로파일 러를 사용하여 성능 질문을해야합니다. 진정으로 속도를 늦추는 것들을 먼저 수정하십시오. 개별 CSS 구성 수준으로 내려 가기 전에 해결해야 할 훨씬 더 큰 문제가 거의 확실합니다.

성능에는 눈에 띄게 영향을 미치지 않습니다. 그러나 코드의 유지 관리 성이 떨어 지므로 장기적으로 성능이 저하 될 수 있습니다.

!important전에 여러 번 사용해야했지만 개인적 으로 사용할 때 입증할만한 성능 저하가 없었습니다.

참고 로이 스택 질문에 대한 답변을 참조하십시오 !important.

또한 다른 사람들이 언급하지 않은 것을 언급하겠습니다. !important자바 스크립트 함수를 작성하지 않고 인라인 CSS를 무시하는 유일한 방법입니다 (조금이라도 성능에 영향을 미칩니다). 따라서 인라인 CSS를 재정의 해야하는 경우 실제로 성능 시간을 절약 할 수 있습니다.

흠 ...! 중요한가? !! 중요한가?

이 단계를 단계별로 살펴 보겠습니다.

1. 파서는 사용 여부에 관계없이 각 속성에 대해 중요를 확인해야합니다. 따라서 성능 차이는 0입니다.
2. 속성을 덮어 쓸 때 파서는 덮어 쓰는 속성이 중요하지 않은지 확인해야하므로 성능 차이는 다시 0입니다.
3. 덮어 쓰는 속성이 !! 중요한 경우! important를 사용하지 않기 위해 -1의 속성-성능 적중을 겹쳐 써야합니다.
4. 덮어 쓰는 속성이! important 인 경우! important를 사용하여 +1의 속성 향상을 덮어 쓰는 것을 건너 뜁니다.
5. 새 속성이! important 인 경우, 덮어 쓰는 속성이! important 또는 !! important-performance difference 0과 상관없이 구문 분석에서 겹쳐 써야합니다.

따라서 파서가 다른 속성을 건너 뛰지 않는 많은 속성을 건너 뛸 수 있으므로 실제로 중요한 성능이 더 좋습니다.

@ryan이 아래에서 언급했듯이 인라인 CSS를 재정의하고 자바 스크립트를 사용하지 않는 유일한 방법은 불필요한 성능 저하를 피하는 다른 방법입니다.

흠 ... 중요한 것이 중요하다는 것이 밝혀졌습니다

그리고 또한,

• ! important를 사용하면 개발자가 많은 시간을 절약 할 수 있습니다
• 때로는 전체 CSS를 다시 디자인하지 않아도됩니다.
• 때때로 html 또는 부모 css 파일은 제어 할 수 없으므로 생명을 구할 수 있습니다.
• 중요한 요소가 실수로 다른 중요한 요소를 덮어 쓰는 것을 방지합니다 !!
• 때로는 브라우저가 선택기에 너무 구체적이지 않고 올바른 속성을 선택하지 않으므로! important를 사용하는 것이 실제로 중요 해지고 CSS에 특정 CSS 선택기 톤을 작성하지 않아도됩니다. 따라서 중요하게 쓰기 위해 더 많은 바이트를 사용하더라도 다른 곳에서 바이트를 절약 할 수 있다고 생각합니다. CSS 선택기가 지저분해질 수 있습니다.

따라서! important를 사용하면 개발자가 행복해질 수 있다고 생각합니다. 매우 중요하다고 생각합니다 .

!important어쨌든 본질적으로 성능을 방해하는 것을 예측할 수는 없습니다 . 그러나 CSS가에 수수께끼로 !important표시되어 있으면 셀렉터의 자격을 초과하여 너무 구체적이고 부모 또는 한정자가 부족하여 특이성을 추가했음을 나타냅니다. 결과적으로 CSS가 부풀어지고 ( 성능 을 방해 할 수 있음) 유지 관리가 어려워집니다.

효율적인 CSS를 작성하려면 모듈 식 CSS를 작성하는 데 필요한 만큼만 구체적으로 작성하십시오 . ID (해시 포함), 체인 선택기 또는 적격 선택기를 사용하지 않는 것이 좋습니다.

#CSS에 접두사가 붙은 ID 는 255 개의 클래스가 ID를 재정의하지 않는 지점 ( @Faust로 바이올린)에 따라 매우 구체적 입니다. ID에는 더 깊은 라우팅 문제가 있지만 고유해야합니다. 즉, 중복 스타일에 재사용 할 수 없으므로 반복 스타일로 선형 CSS를 작성하게됩니다. 이 작업을 수행하면 규모에 따라 프로젝트마다 프로젝트가 달라 지지만 유지 관리성에 막대한 영향을 미치며 성능도 저하됩니다.

어떻게없이 특이성을 추가 할 수 있습니다 !important, 체인 자격 또는 ID를, (즉 #)

HTML

<div class="eg1-foo">
    <p class="eg1-bar">foobar</p>
</div>
<div id="eg2-foo">
    <p id="eg2-bar">foobar</p>
</div>
<div class="eg3-foo">
    <p class="eg3-foo">foobar</p>
</div>

CSS

.eg1-foo {
    color: blue;
}
.eg1-bar {
    color: red;
}
[id='eg2-foo'] {
    color: blue;
}
[id='eg2-bar'] {
    color: red;
}
.eg3-foo {
    color: blue;
}
.eg3-foo.eg3-foo {
    color: red;
}

JSFiddle

좋아, 어떻게 작동합니까?

첫 번째와 두 번째 예제는 동일하게 작동하고 첫 번째 예제는 문자 그대로 클래스이고 두 번째 예제는 속성 선택기입니다. 클래스와 속성 선택기의 고유성은 동일합니다. 자체 규칙이 있기 때문에 .eg1/2-bar색상을 상속하지 않습니다 .eg1/2-foo.

세 번째 예는 한정자 또는 체인 선택기처럼 보이지만 둘 다 아닙니다. 체인은 선택자 앞에 부모, 조상 등을 붙일 때입니다. 이것은 특이성을 추가합니다. 한정은 비슷하지만 선택자가 적용 할 요소를 정의합니다. 자격 : ul.class및 체인 :ul .class

이 기술을 무엇이라고할지 잘 모르겠지만이 동작은 의도적이며 W3C에 의해 문서화되어 있습니다.

동일한 단순 선택기의 반복 발생이 허용되며 특이성이 증가합니다.

두 규칙 간의 특이성이 동일하면 어떻게됩니까?

으로 @BoltClock 지적 여러 있다면,하세요 것을 다음 중요한 선언 사양 지시 대부분 특정의 일이 우선해야합니다.

아래의 예에서, 모두 .foo와 .bar동일한 특이성을 가지고 있으므로 마지막 규칙은 CSS 주장 우선 순위, 즉 선언함으로써 CSS의 계단식 자연에 대한 행동 fallsback .foo.

HTML

<div>
    <p class="foo bar">foobar</p>
</div>

CSS

.bar {
    color: blue !important;
}
.foo {
    color: red !important;
}

JSFiddle