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

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

---

나는 몇 달 동안 웹 사이트에서 일한지, 그리고 많은 시간이 내가 편집 뭔가 시도를하고 있어요 때, 나는 사용이 !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가 "buyNow"인 고유 한 하나의 버튼을 제외하고는 녹색입니다. 전체 규칙의 중요성 (이 경우 색상 및 글꼴 크기)은 선택기의 특수성에 의해 관리됩니다.

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

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

그러면 색상 속성이 글꼴 크기보다 중요합니다. 실제로 button#buyNow글꼴 크기 (일반적인 ID와 클래스 고유성에 의해 여전히 결정됨)와 달리 선택기 의 색상보다 색상이 더 중요합니다 .

요소 <button class="highlight" id="buyNow">의 글꼴 크기는 2em이지만 색상은 blue입니다.

이것은 두 가지를 의미합니다.

1. 선택기는 내부의 모든 규칙의 중요성을 정확하게 전달하지 않습니다
2. 만 컬러 파란색을 무시하는 방법은 사용하는 다른 !important 예를 들면, 선언을 button#buyNow선택.

이렇게하면 스타일 시트를 유지 관리 및 디버그하기가 훨씬 어려워 질뿐 아니라 눈덩이 효과가 시작됩니다. 하나 !important는 다른 것으로 그것을 재정의하고, 다른 하나 는 그것을 재정의합니다. 거의 하나만 남지 않습니다. 하나 !important는 유용한 단기 해결책이 될 수 있지만 장기적으로 엉덩이를 물게됩니다.

언제 사용할 수 있습니까?

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

이것은 !important사용자가 웹 사이트 스타일을 재정의 할 수있는 수단을 제공하기 위해 처음부터 고안된 것입니다. 스크린 리더, 광고 차단기 등의 접근성 도구에서 많이 사용됩니다.

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

일반적으로 이것이 코드 냄새의 경우라고 말하지만 때로는 옵션이 없습니다. 개발자는 코드를 최대한 많이 제어하는 ​​것을 목표로해야하지만, 손이 묶여 있고 존재하는 모든 작업을 수행해야하는 경우가 있습니다. !important드물게 사용하십시오 .

• 유틸리티 클래스

많은 라이브러리와 프레임 워크 .hidden에는 .error, 또는 같은 유틸리티 클래스가 .clearfix있습니다. 그것들은 단일 목적으로 사용되며, 종종 아주 적지 만 매우 중요한 규칙을 적용합니다. ( display: noneA의 .hidden예를 들면 클래스). 이것들은 현재 요소에있는 다른 스타일을 재정의해야하며, !important나에게 묻는다면 반드시 보증 해야합니다.

결론

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

견딜 수 있거나 선호되는 경우가 있지만 사용하기 전에 해당 사례 중 하나가 실제로 상황에 적용되는지 다시 확인하십시오.

---

!important 명령문을 항상 적용하여 다음을 수행하십시오.

• 선택기가 덜 구체적이고 낮은 수준이더라도 이제 더 높은 선택기보다 뛰어납니다.
• 일반적으로 해당 명령문을 대체하는 추가 명령문이있는 경우 더 이상 중요한 명령문을 대체하지 않습니다.

!important선택기의 특수성이 적용되는 스타일을 처리하므로 캐스 케이 딩 스타일이라는 아이디어 때문에 대부분의 시간을 피할 수 있습니다. 그러나 특정 성이 그 논리가 아니며 !important진술 을 강요 해야하는 상황이 있습니다 (정확히 기억할 수는 없습니다) .

사용하지 않거나 피해야하는 이유는 !important?

• 사용자가 사용자 정의 스타일 시트를 사용하지 못하도록하여 (이제 중요한 것으로 표시된 규칙을 무시할 수 없음) 일부 사용자의 접근성을 방해합니다
• 마음은 일반적으로 매우 쉽게 특이성을 갖기 때문에 코드를 읽기가 !important더 어려워집니다.

---

I think it is important that we touch on this again, here at the end of 2014 when more rules are being added into the working draft, it is so important not to impose restrictions upon your users. I have wrtten this small example to explain a possible scenario in which such a thing takes place. This is taken from a REAL website I have visited on the web, and I see it, sadly, more often than not.

Form Text Editor Fields

You have a website, and your website depends on filling out forms and editing text. To try to minimize eye strain you try to go with a style you think everyone will be okay with, and since your users mainly visit at night, you decide to make your background color to be white, and then make the text color to be black. The form is blank by default, so you type in text (this time) to make sure it works:

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

A few months later, users complain that white-on-black is too eye straining but the other half love it, what do you do? you add a custom theme that uses !important to override the internal styles so that BOTH parties are happy, which is what it is SUPPOSED to be used for:

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

Now, what happens here? What did you expect. If you properly remember the !important tags in the first set, you would have noticed it didn't work and probably remembered that you needed to delete the !important tags off. BUT you forgot one..

RIGHT, you get white text on white background, and the user can no longer read your webpage at all if they try to use this new style (assuming you kept it).

Of course, You don't realize this because the textbox is empty. And You ASSUME that it will work! (Assumption is a developer's worst enemy, it's right up there with pride and arrogance).

Make and Follow Self Implied Rules

So, the basic rule should be only use !important when designing OVERRIDES to an original complete set of css rules. Remember that it is meant for exceptions and disturbs the natural order and meaning of css in the first place. In MOST cases you will not need to use it at all.

Know How Users Customize Their Colors

With the existence of such tools as extensions and the presence of sites like 'userstyles.org' and it's stylish counterpart, you run the risk of alienating your users by using the !important tag at all! Keep in mind that stylish will not override them.

Never Restrict Your Visitors

If you use !important on a style, make sure you make it possible for the user to turn that style off (and i dont mean via the web browser's internal 'on/off' switch). And for heavens sake don't make it DEFAULT.

Ads

People are less and less using stylish for ad removal, so I don't think protecting ads with !important really is an issue here. It will just annoy someone trying to customize your site.

---

A little late to this question but it's saying "no matter what other styles are applied, ignore them and use this one". You may find it a little confusing with the ! infront (of the !important) because thats a not operator in javascript but in css it's called a delimiter token that just says to take priority. Heres an example.

---

Without !important:

.set-color{
  color: blue;
 }

.set-color{
  color: red;
 }

outputs RED

---

!important on bottom attribute (of same)

.set-color{
  color: blue;
 }

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

outputs RED (would have been red anyways)

---

!important on top attribute (of same)

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

.set-color{
  color: red;
 }

outputs BLUE (says ignore red, use blue)

---

---

For me, using !important is a bad CSS practice. It disrupts the natural flow in applying the css rules where in properties are applied from top to bottom. With !important, the property will now give priority to the latest important value.

It's just like using the goto keyword in scripts. Though its are perfectly legal, it's still best avoided.

---

I wouldn't advise you to use it unless it's a necessity, which sometimes might be the case with you, as you're working on an existing project. But try to stay away from it and use as little !important as possible.

The problem is if you use too many of them then one might inadvertently overwrite the other. Your code is also much less legible and anyone who comes after you to maintain this will tear his/her hair apart, as trying to find !important every time you do something in the CSS is a royal pain.

Check this: http://webdesign.about.com/od/css/f/blcssfaqimportn.htm

---

Well, i think using !important is sometime "must to do job" if you want overdraw wp-plugins default properties.

I used it just today and it was the only way to finish my job. Maybe is not good way to do something but sometime is the only way to do it.

---

The problem with !important is that with CSS you MUST in all cases try to avoid deep selecting (more priority), because in the future you or someone else (often for big projects) will need to override these styles WITHOUT changing the original style and then this one will have limited freedom to do that. He will need to use !important, too with deeper selector.

---

!important is a factor, That can vain your code for something that is overridden

the ! in it does not mean Logical not, such here it gets disconcerting with that among that code. !important is frequently a colossal mishap in computing.

For Example if you want to make it display: block; but you've already defined display: none;:

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

<p>Some Paragraph</p>

!important is a best avoided keyword, When to use it, It may be a Influential time, Please click this link to see when to use !important, !important Style Rule - CSS-Tricks

no madder what

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