CSS 프레임 워크가 중요한 태그를 불필요하게 사용하는 이유는 무엇입니까?

Question

이것은 논쟁보다 질문이지만 나는이 주제를 다룬 인터넷에 많은 것이 없다고 생각합니다.

예를 들어 기초는 수백 함께 제공 중요한 태그를 내 눈을 필요로하지 않는 것들을! CSS의

.text-center { text-align: center !important; } 

가 부하 내 관점에서 나쁜있는이에 시뮬입니다 연습 및 내가 대답하고 싶은 질문은 CSS 프레임 워크가 전혀 그들을 사용하는 이유입니다? 부트 스트랩과 파운데이션은 둘 다 사용하는 두 가지 주요 CSS 프레임 워크입니다.

저는 CSS에서 중요한 태그를 사용하는 것은 매우 나쁜 습관이며 IE에만 ​​사용해야한다고 항상 들었습니다.

Answer 1

당신이 당신의 자신의 CSS를 작성하는 경우 필요할 때마다 당신은보다 구체적인 규칙을 추가 할 수있는 자유가 있습니다

.center  { text-align: center; } 
.foobar  { text-align: left; } 
.foobar.center { text-align: center; } 

그러나, CSS 프레임 워크는 할 수 없습니다 HTML을 어떻게 정렬할지 예측하십시오. 따라서 더 구체적인 규칙 조합을 수천 가지로 생성하는 대신 !important을 수행하는 것이 더 쉽습니다. 예 :

.center    { text-align: center; } 
.foobar    { text-align: left; } 
.barbaz    { text-align: right; } 
/* 
    * assuming .center must be centered regardless of other rules and 
    * !important must be avoided at the same time, we need to do this 
    */ 
.foobar.center  { text-align: center; } 
.barbaz.center  { text-align: center; } 
.foobar.barbaz.center { text-align: center; } 

Answer 2

코드에 넣을 수 있기 때문입니다. 텍스트를 오른쪽으로 정렬됩니다이 경우

<style> 
#aside p {text-align: right;} 
.text-center {text-align: center} /* without important text will be aligned to right */ 
</style> 

<div id="aside"> 
    <p>right-aligned text</p> 
    <p class="text-center">centered text</p> 
</div> 

http://jsfiddle.net/v1v4jaas/

inportant없이이있다. 중요한 경우 두 번째 단락이 가운데에 배치됩니다.

클래스 등 ID에 대한 유일한 낮은 우선 순위를 가지고

Answer 3

당신의 CSS에 !important 사용은 일반적으로 당신이 작성한 클래스가 적절한 계층 구조를 가지고 있지 을 의미한다.

!important 규칙은 특정 속성을 무시합니다. 하지만 하나가 무기력하고 우선해야 할 때만 사용해야합니다.

!important은 유틸리티 클래스에서만 사용하는 것이 가장 좋습니다.

예 :는 u는 응용 프로그램 전반에 걸쳐 유사하고자하는 버튼이 말

그것은 우리가 동일한 것으로 기대 .btn 서식을 무시할 수있는 다른 클래스에 의해 포장되지 않는 .btn에 대한 위의 정의는 마찬가지

.btn { 
     margin-bottom: 0; 
     text-align: center; 
     vertical-align: middle; 
     touch-action: manipulation; 
     cursor: pointer; 
     border: 1px solid transparent; 
     padding: 6px 12px; 
     font-size: 11px; 
     border-radius: 4px; 
    } 

애플리케이션 전반에 걸쳐 그러나 일단 아래에 다른 클래스로 싸이면 최종 스타일은 당신의 기대와 완전히 다릅니다.이 정의는 당신의 버튼을 만들기 위해 충분하다

.btn { 
      margin-bottom: 0    !important; 
      text-align: center   !important; 
      vertical-align: middle  !important; 
      touch-action: manipulation !important; 
      cursor: pointer    !important; 
      border: 1px solid transparent !important; 
      padding: 6px 12px    !important; 
      font-size: 11px    !important; 
      border-radius: 4px   !important; 
     } 

: 이제

<p class="format-paragraph"> 
    <button type="submit" name="save" class="btn"> Submit</button> 
</p> 

, 당신의 .btn 클래스는 슈퍼 강력하게 그것을 포장하는 사람에 의해 존중되어야한다,에 .btn 정의를 변경 응용 프로그램 전체에서 비슷하게 보입니다.

여기에 언급 된 .text-center { text-align: center !important; } 클래스는 여기에있는 유틸리티 일뿐입니다.

자세한 정보! 중요한 우선 순위 here.