CSS에서 "!important"를 사용하면 어떤 의미가 있습니까?

CSS에서 "!important"를 사용하면 어떤 의미가 있습니까?

이 질문에는 이미 다음과 같은 답이 있습니다.

CSS에서 !important는 무엇을 의미합니까? (5개 답변)

마감됨3년 전에.

저는 제가 무언가를 할때, 저는몇달동웹했일고을, 제무를고할때합다사, 니는많시야해을용간은저려하집을 사용해야 .!important예:

div.myDiv { 
    width: 400px !important;
}

예상대로 표시되도록 하기 위해.이것은 나쁜 관행입니까?또는 다음과.!important명령을 사용해도 괜찮습니까?이로 인해 더 이상 원하지 않는 것이 발생할 수 있습니까?

예, 당신이 사용한 예를 말씀드리겠습니다.!important나쁜 관행이고, 앞으로 원치 않는 결과를 초래할 가능성이 매우 높습니다.그렇다고 해서 사용하는 것이 결코 괜찮은 것은 아닙니다.

그래요?!important:

특수성은 브라우저가 CSS가 페이지에 어떻게 영향을 미치는지 결정할 때 작용하는 주요 힘 중 하나입니다.선택기가 더 구체적일수록 더 중요합니다.이는 일반적으로 선택한 요소가 발생하는 빈도와 일치합니다.예:

button { 
    color: black; 
}
button.highlight { 
    color: blue; 
    font-size: 1.5em;
}
button#buyNow { 
    color: green; 
    font-size: 2em;
}

이 페이지에서는 모든 단추가 검은색입니다.파란색인 클래스 "하이라이트"가 있는 단추는 제외합니다.단, ID가 "지금 구매"인 하나의 고유 버튼은 녹색입니다.전체 규칙(이 경우 색상과 글꼴 크기 모두)의 중요도는 선택기의 특수성에 의해 관리됩니다.

!important그러나 선택기 수준이 아닌 속성 수준에서 추가됩니다.예를 들어, 이 규칙을 사용한 경우:

button.highlight {
    color: blue !important;
    font-size: 1.5em;
}

색 속성이 글꼴 크기보다 더 중요합니다.사실, 색은 색보다 더 중요합니다.button#buyNow글꼴 크기와 반대되는 선택기(일반 ID 대 클래스 특수성에 의해 여전히 제어됨).

요<button class="highlight" id="buyNow">는 의글 크기니다입꼴다▁have니▁a▁would-입니다.2em 색단blue.

이는 두 가지를 의미합니다.

1. 셀렉터가 내부의 모든 규칙의 중요성을 정확하게 전달하지 않습니다.
2. 파란색을 재정의하는 유일한 방법은 다른 색상을 사용하는 것입니다. !important, 를 들어 언선, button#buyNowselector

이것은 당신의 스타일시트를 유지하고 디버그하는 것을 훨씬 더 어렵게 만들 뿐만 아니라, 눈덩이 효과를 시작합니다. 하나!important다른 사람이 그것을 무시하고, 다른 사람이 그것을 무시하는 등으로 이어집니다.그것은 거의 하나로 유지되지 않습니다. 한 사람이!important단기적으로 유용한 해결책이 될 수 있습니다. 장기적으로 볼 때 당신의 엉덩이를 물어뜯을 것입니다.

다음을 사용할 수 있는 경우

• 사용자 스타일시트에서 스타일을 재정의합니다.

이것이 무엇입니까?!important사용자에게 웹 사이트 스타일을 재정의할 수 있는 수단을 제공하기 위해 처음에 고안되었습니다.이것은 화면 판독기, 광고 차단기 등과 같은 접근성 도구에서 많이 사용됩니다.

• 타사 코드 및 인라인 스타일을 재정의합니다.

일반적으로 코드 냄새의 경우라고 생각하지만, 가끔은 선택의 여지가 없습니다.개발자로서 가능한 한 코드를 많이 제어하는 것을 목표로 해야 하지만, 손이 묶여 있는 경우가 있고, 있는 것은 무엇이든 작업하면 되는 경우가 있습니다.!important

• 유틸리티 클래스

는 많은라러프와워다는크같음유클함다제래께니공됩와스티틸리은리과와 같은 유틸리티 와 함께 됩니다..hidden,.error또는.clearfix이는 단일 목적에 부합하며, 종종 매우 적은 수의 규칙을 적용하지만 매우 중요합니다.display: none당분간.hidden예를 들어, 클래스).이것들은 요소에 현재 있는 다른 스타일을 무시해야 하며, 확실히 다음을 보장합니다.!important제게 묻는다면요.

결론

!important선언은 CSS의 핵심 메커니즘 중 하나인 특수성을 방해하는 부작용을 가지고 있기 때문에 종종 나쁜 관행으로 간주됩니다.대부분의 경우 이를 사용하면 CSS 아키텍처가 불량할 수 있습니다.

허용 가능하거나 선호되는 경우도 있지만, 사용하기 전에 이러한 경우 중 하나가 실제로 사용자의 상황에 적용되는지 다시 한 번 확인해야 합니다.

!important작업을 적용되도록 합니다.

• 셀렉터가 덜 구체적이고 낮은 수준일지라도 이제 더 높은 특수성 셀렉터를 능가합니다.
• 만약 그 진술이 일반적으로 그 진술보다 더 많이 발생한다면, 그것은 더 이상 중요한 진술을 무시하지 않습니다.

, 의시간분대부시.!important선택기의 특수성이 계단식 스타일의 개념인 어떤 것이 적용되는지를 처리하기 때문에 피할 수 있습니다.하지만, 구체성이 그렇게 논리적이지 않아 강요해야 하는 상황이 있습니다(정확하게 기억나지 않습니다).!important

사용하지 않는 이유/사용하지 않는 이유!important?

• 사용자가 일부 사용자의 접근성을 손상시키는 사용자 정의 스타일시트를 사용하지 못하도록 합니다(이제 중요한 것으로 표시된 규칙을 재정의할 수 없음).
• 마음은 보통 꽤 쉽게 특수성을 취하기 때문에 코드를 읽기 더 어렵게 만듭니다, 하지만 무엇이 무엇인지 기억합니다.!important읽기 어렵게 만듭니다.

저는 우리가 이것에 대해 다시 언급하는 것이 중요하다고 생각합니다. 여기 2014년 말에 더 많은 규칙이 초안에 추가되고 있으므로 사용자에게 제한을 가하지 않는 것이 매우 중요합니다.저는 그런 일이 일어나는 가능한 시나리오를 설명하기 위해 이 작은 예를 썼습니다.이것은 제가 웹에서 방문한 실제 웹사이트에서 찍은 것입니다. 그리고 저는 슬프게도 자주 봅니다.

양식 텍스트 편집기 필드

웹 사이트가 있고 웹 사이트는 양식 작성 및 텍스트 편집에 따라 달라집니다.눈의 피로를 최소화하기 위해 모두가 괜찮다고 생각하는 스타일을 사용하려고 합니다. 사용자가 주로 밤에 방문하기 때문에 배경색을 흰색으로 만든 다음 텍스트 색을 검은색으로 만들기로 결정합니다.양식은 기본적으로 비어 있으므로 텍스트를 입력하여(이번에는) 작동하는지 확인합니다.

...
background-color: black; /* I forgot important here, but it works fine on its own */
color: white !important;
...

몇 달 후, 사용자들은 화이트 온 블랙이 너무 눈에 피로하다고 불평하지만, 나머지 절반은 그것을 좋아합니다, 당신은 어떻게 합니까?!important를 사용하는 사용자 지정 테마를 추가하여 내부 스타일을 재정의하여 두 당사자가 모두 만족할 수 있도록 합니다. 이 테마는 다음 용도로 사용됩니다.

...
background-color: white !important;   
color: black !important;
...

자, 여기서 무슨 일이 일어날까요?뭘 기대한 거지?첫 번째 세트에서 !important 태그를 제대로 기억했다면, 작동하지 않는다는 것을 알았을 것이고 아마도!important 태그를 삭제해야 한다는 것을 기억했을 것입니다.하지만 당신은 하나를 잊었습니다.

예, 흰색 배경에 흰색 텍스트가 표시되고 사용자가 이 새 스타일을 사용하려고 하면 사용자는 웹 페이지를 더 이상 읽을 수 없습니다.

물론 텍스트 상자가 비어 있기 때문에 이 사실을 깨닫지 못합니다.그리고 당신은 그것이 효과가 있을 것이라고 가정합니다! (가정은 개발자의 최악의 적이며, 자부심과 오만으로 바로 저 위에 있습니다.)

자기 암시적 규칙 만들기 및 준수

따라서 기본 규칙은 원래의 완전한 CSS 규칙 집합에 OVERRIDE를 설계할 때만 사용해야 합니다.그것은 예외를 위한 것이고 애초에 css의 자연스러운 순서와 의미를 방해한다는 것을 기억하세요.대부분의 경우 사용할 필요가 없습니다.

사용자가 자신의 색상을 사용자 지정하는 방법

확장과 같은 도구의 존재와 'userstyles.org '과 같은 사이트의 존재, 그리고 세련된 대응 관계로!중요한 태그를 사용함으로써 사용자를 소외시킬 위험이 있습니다!스타일리시하다고 해서 그것들이 무시되지는 않는다는 것을 명심하세요.

방문자를 제한하지 마십시오.

스타일에서 !important를 사용하는 경우, 사용자가 해당 스타일을 끌 수 있도록 해야 합니다(웹 브라우저의 내부 'on/off' 스위치를 통해).그리고 제발 그것을 기본값으로 만들지 마세요.

광고

사람들이 광고 제거를 위해 스타일리시하게 사용하는 것이 점점 줄어들고 있기 때문에, 저는!중요한 것으로 광고를 보호하는 것이 여기서 정말로 문제가 된다고 생각하지 않습니다.당신의 사이트를 사용자 지정하려는 누군가를 짜증나게 할 뿐입니다.

이 질문에 조금 늦었지만 "다른 스타일이 적용되더라도 무시하고 이 스타일을 사용하십시오."라고 말합니다.당신은 그것이 약간 혼란스럽다는 것을 발견할 수 있습니다.!신문사) !important자바스크립트에서는 연산자가 아니지만 css에서는 우선 순위를 지정하는 구분 기호 토큰이라고 하기 때문입니다.예를 들어 보겠습니다.

---

제외:

.set-color{
  color: blue;
 }

.set-color{
  color: red;
 }

출력 RED

---

!important (동일한) 바닥 속성으로

.set-color{
  color: blue;
 }

.set-color{
  color: red !important;
 }

출력 RED(어차피 빨간색이었을 것)

---

!important (동일한) 상위 속성으로

.set-color{
  color: blue !important;
 }

.set-color{
  color: red;
 }

파란색 출력(빨간색은 무시하고 파란색 사용)

---

나는, 사기하를 합니다.!important나쁜 CSS 관행입니다.속성이 위에서 아래로 적용되는 CSS 규칙을 적용할 때 자연스러운 흐름을 방해합니다.와 함께!important자산은 이제 가장 중요한 최신 값에 우선 순위를 부여합니다.

그것은 마치 사용하는 것과 같습니다.goto스크립트의 키워드입니다.그것은 완벽하게 합법적이지만, 여전히 피하는 것이 가장 좋습니다.

기존 프로젝트를 수행하는 경우에 따라 필요한 경우가 아니라면 사용하는 것이 좋습니다.하지만 그것을 멀리하고 가능한 한 적게 사용하도록 노력하세요!중요합니다.

문제는 너무 많은 수를 사용할 경우 하나가 실수로 다른 하나를 덮어쓸 수 있다는 것입니다.당신의 코드는 또한 훨씬 덜 읽을 수 있고 이것을 유지하기 위해 당신을 뒤쫓는 사람은 누구나 그/그녀의 머리카락을 찢을 것입니다. CSS에서 무언가를 할 때마다 중요한 것은 왕실의 고통입니다.

다음을 확인하십시오.

제에는 제, 생엔각을 사용하는 것 요...!importantwp-plugins 기본 속성을 과도하게 그리는 경우 를 "반드시 작업을 수행해야 합니다"라고 지정할 수 있습니다.

저는 오늘만 사용했고 그것이 제 일을 끝낼 수 있는 유일한 방법이었습니다.아마도 무언가를 하는 좋은 방법은 아닐 것이지만 그것을 할 수 있는 유일한 방법은 시간입니다.

!중요한 것은 요소입니다. 그것은 재정의된 것에 대한 당신의 코드를 무효화할 수 있습니다.

그것의 !는 논리적이지 않다는 것을 의미하지 않습니다, 그래서 여기서 그것은 그 코드 중에서 그것과 혼동됩니다.!중요한 것은 종종 컴퓨팅의 거대한 사고입니다.

예를 들어 만들려는 경우display: block;이미 하지만당신정습니다했의이.display: none;:

p {
   display: none;
   display: block !important /*Now overriden*/;
}

<p>Some Paragraph</p>

!important키워드입니다. 있는수. 이 하십시오. 언제 사용해야 하는지, 영향력 있는 시간일 수 있습니다. 언제 사용해야 하는지 보려면 이 링크를 클릭하십시오.!important!중요 스타일 규칙 - CSS-Tricks

무엇보다도

의 !important그것과 함께?CSS모든 경우에 심층적인 선택(더 우선순위가 높은)을 피해야 합니다. 미래에는 사용자 또는 다른 사용자(대규모 프로젝트의 경우)가 원래 스타일을 변경하지 않고 이러한 스타일을 재정의해야 하고, 그러면 이 스타일은 그렇게 할 수 있는 제한된 자유를 갖게 되기 때문입니다.그는 사용할 필요할 것입니다.!important더 깊은 선택기로 역시.

언급URL : https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css