CSS !중요: 정의 및 사용 시기
게시 됨: 2020-06-27CSS의 가장 유용하고 논쟁적인 요소 중 하나는 !important 속성입니다. 모든 디자이너는 어느 시점에서 CSS 코드에서 태그를 접하게 됩니다. 그럴 때 생기는 진짜 질문과 딜레마는 "올바르게 사용되었습니까?"입니다. CSS !important 는 매우 강력한 도구이기 때문에 개발자와 디자이너는 이를 사용할 때 모범 사례를 알고 있어야 합니다. CSS !important는 모든 종류의 스파게티 코드로 이어질 수 있으며 이는 누구에게도 좋지 않습니다.
CSS가 중요한 이유는 무엇입니까?
CSS의 !important 속성은 연결된 규칙이 다른 규칙보다 우선함을 나타냅니다. 이는 요소와 함께 사용되는 선택기의 최우선 순위이므로 개발자와 디자이너가 사이트의 개별 부분에 대한 스타일 지정을 구체적으로 제어할 수 있습니다. 대부분의 경우 이는 styles.css 또는 custom.css에 포함된 사이트의 기본 스타일을 재정의하는 것을 의미합니다.
!important의 각 인스턴스는 해당 인스턴스가 나타나는 특정 줄에만 적용됩니다 . 따라서 스니펫의 전체가 아닌 일부에서 속성을 사용할 수 있습니다. !important에 대한 CSS 코드는 다음과 같습니다.
.example-class {
color:#fff!important;
}
!important 와 함께 기억해야 할 주요 사항은 두 가지입니다.
- 중요 단어는 항상 느낌표 (!)
- 세미콜론은 항상 !important 선언 뒤 줄 끝에 있어야 합니다.
!important 는 원할 경우 페이지별 또는 모듈별로 사용할 수도 있습니다(Divi와 같은 페이지 빌더의 경우). 하지만 그렇게 하면 어떤 요소를 재정의하는지에 대한 스파게티 코드에 들어갈 수 있습니다. 어떤 페이지에서 어떤 순서로?
모든 디자이너는 어느 시점에서 CSS 중요 태그를 실행하고 결정을 내려야 합니다. 이것이 사이트의 기본 스타일을 재정의할 가치가 있습니까?
때때로 대답은 확고한 예입니다. 다른 시간에는 어렵고 빠르지 않습니다. 지금 또는 미래에 아무 것도 깨지지 않을 때를 아는 데 중요한 CSS를 사용한 몇 가지 모범 사례를 살펴보겠습니다.
CSS를 사용하는 경우 중요
!important 의 기본(가장 널리 받아들여지는) 사용은 기본 선택자와 상호 작용하는 클래스의 스타일을 다르게 지정하려는 경우입니다. 블로그의 제목 제목 과 메타 정보 가 사이트의 나머지 부분과 다른 글꼴 및 색상이 되기를 원할 수 있습니다. 이러한 요소의 기본 스타일은 CSS 파일의 h1 및 p 선택기에서 상속됩니다. .css 파일이나 WordPress 테마 사용자 정의 프로그램에서 사이트 기본값에 설정한 것이 무엇이든 표시됩니다.
p {
font-weight: 400;
font-size: 1.1rem;
line-height: 1.7;
color: #111;
font-family:'Roboto';
}
h1 {
margin-top: 30px;
margin-bottom: 15px;
color: #000;
font-family:'Lato';
}
클래스를 사용하여 원하는 개별 요소(블로그 게시물 제목 및 메타 정보)를 변경할 수 있습니다. 항목 제목 및 .post-meta. 그리고 그것들이 여전히 부모 h1 및 p 로부터 일부 스타일을 상속받기를 원하기 때문에 h1.entry-title 및 p.post-meta 를 사용하여 이들을 구체적으로 호출합니다.
h1.entry-title, p.post-meta {
color: white!important;
font-family:'Poppins'!important;
}
동일한 스타일시트에 이러한 스니펫이 있으면 게시물 제목과 게시물 메타가 표시되는 경우를 제외하고 모든 경우에 최상위 코드가 적용됩니다. CSS 중요 속성은 기본값을 재정의하고 이를 세밀하게 제어할 수 있습니다.
이러한 종류의 개별 사용자 정의는 !important 의 주요 용도입니다. 그러나 유일한 것은 아닙니다.
CSS Important를 사용하여 클래스, ID 및 요소 보호
또한 !important 를 사용하여 페이지의 다양한 요소를 미래에 대비할 수 있습니다. 사이트의 추가 개발이 예상치 못한 방식으로 조정될 수 있습니다. 예를 들어 구독 상자, 이메일 수신 동의 또는 YouTube 삽입을 위한 특정 스타일을 개발할 수 있습니다. 이들 각각은 다른 위치에 있는 스타일시트에서 다른 스타일을 상속할 수 있습니다. !important 태그를 사용하면 양식이나 버튼의 스타일을 변경하는 데 신중한 손이 필요합니다.
요소의 이름을 클래스 또는 ID로 지정한 다음 모든 줄에 !important 를 입력 하세요 .
.youtube-embed {
font-family:'Exo'!important;
font-weight: 700!important;
line-height:1.4rem!important;
margin-top:25px!important;
margin-left:auto!important;
margin-right:auto!important
color:#449928!important;
padding:11px!important;
background:#998899;
}
짜잔! 스타일시트의 정기적인 변경으로 미래에 대비할 수 있습니다.
인라인 스타일 사용
이것은 많은 사람들에게 올 수도 있고 아닐 수도 있는 사용 사례 중 하나입니다. 이전에는 매우 일반적이었지만 게시물과 페이지를 손으로 코딩하는 것에서 멀어지면서 덜 그렇게 되었습니다. 그러나 Gutenberg 블록의 HTML이나 WordPress 클래식 편집기의 텍스트 보기를 파고든다면 인라인 CSS 스타일과 함께 !important 를 절대적으로 사용할 수 있습니다.
<div class="special-paragraph" style="color:#blue!important;"> <p>This text will show up blue now!</p> </div>
이것은 몇 가지 이유로 중요합니다. 첫 번째는 style=”x:y!important;” 를 사용하여 페이지의 모든 코드 줄을 제어할 수 있다는 것입니다 . 두 번째는 해당 페이지에 이미 적용된 CSS를 재정의할 수 있다는 것입니다. 해당 값에 !important 가 있는 경우에도 마찬가지입니다. 예를 들어:
<style>
p {
color:#313373!important;
font-size:2rem;
}
</style>
<div class="special-paragraph" style="color:#blue!important;">
<p>This text will show up blue now, even though there's another !important tag
applied to the paragraph selector on this page!</p>
</div>
동일한 선택기에서 !important 를 사용하는 <style></style> 을 사용하는 포함된 HTML 스타일이 있더라도 특정 단락을 대상으로 하는 인라인 CSS가 렌더링됩니다.
중요한 태그 쌓기 주의
마지막 몇 가지 예를 살펴보고 주의 사항을 알려 드리겠습니다. 이러한 유형의 사용은 소량으로 괜찮습니다. 일회성 상황을 사용할 수 있으며 아무도 문제를 겪지 않을 것입니다. 일회성으로 !important 를 사용하여 개별 요소의 스타일을 지정했기 때문입니다. 그것이 무엇을위한 것입니다 .
그러나 !important 를 목발로 사용하기 시작하면 스타일시트를 자주 편집하지 않도록 하거나 동일한 사이트의 여러 문제에 대한 빠른 수정으로 사용하는 것이 스파게티 코드의 시작입니다. 특히 당신이 아닌 미래의 개발자를 위해. !important 가 렌더링되는 순서를 파악하는 데 어려움을 겪을 수 있지만 미래의 개발자는 불가능할 수 있습니다.
결국에는 여러 스타일시트, 페이지 및 모듈과 상호 작용하는 !important 가 사이트 전체에 너무 많이 쌓여서 일반 CSS가 거의 렌더링되지 않는다는 것입니다. 그리고 때때로 !important 플래그가 지정된 항목도 렌더링되지 않습니다. 또는 더 나쁜 것은 사이트의 스타일을 해체하고 다시 구축하려는 경우가 아니라면 이후의 모든 변경 사항이 표시되도록 !important 플래그를 지정해야 한다는 것입니다.
마무리
CSS Important는 솔직히 디자이너의 툴킷에서 가장 강력한 도구 중 하나입니다. 부하 직원이나 동료에게 영향을 줄 염려 없이 사이트의 모든 요소를 쉽게 조정할 수 있습니다. 그러나 과도하게 사용하면 효과가 페이지와 요소가 서로를 무시하는 악몽으로 이어질 수 있으며 한때 중요했던 것이 기본값이 되었지만 기본값으로 설정할 수는 없습니다. 따라서 !important를 드물게 사용하여 눈에 띄거나 미래에 대비할 수 있는 것이 필요할 때 올바른 방식으로 수행하는 것입니다.
프로젝트에서 CSS !important를 사용하는 것에 대해 어떻게 생각하십니까?
기사 특집 이미지 by wan wei / shutterstock.com