사용자 지정 헤더와 CSS

안녕하세요 여러분, 상단에 커스텀 헤더를 추가하려고 하고 있습니다. 대부분은 잘 작동하는데, 일부 CSS가 Discourse에 의해 덮어쓰여지는 것 같습니다.
Discourse의 CSS가 제 헤더에 영향을 주지 않도록 막는 방법이 있을까요?

안녕하세요 :wave:

CSS 수정 사항을 공유해 주시겠어요?

보통 선택자가 충분히 구체적이지 않으면 Discourse가 우리의 규칙을 덮어쓰기(오버라이드)합니다.

예를 들어, Discourse에 body .category { line-height: 1 }와 같은 규칙이 있고, 우리가 자체 테마에서 .category { line-height: 2 }라고 작성했다면, body 선택자가 추가로 포함되어 더 구체적이므로 첫 번째 규칙에 의해 덮어쓰기됩니다.

제가 읽은 바로는 CSS에서 "! Important"도 사용된다고 하던데, 맞나요?

네. 셀렉터를 사용해 CSS를 오버라이드할 수 있는 한, 이 방법은 추천하지 않습니다. '마지막 수단’에 해당하니까요. :slight_smile:

좋아요, 설명해 주셔서 감사합니다. 애드온 구성 요소가 #customization:theme-component에 영향을 주거나 변경하도록 권장하는 사례를 자주 보았습니다.

답장 주셔서 감사합니다. 저는 CSS에 대해 충분히 익숙해서 표준적인 트릭 같은 것은 알고 있습니다. 그 말이 별로 좋게 들리지 않았다면 죄송합니다. 그런 의도는 아니었습니다.
사실은 Discourse 어딘가에 설정이 있어서, 특정 id나 클래스가 있는 사용자 정의 컨테이너를 Discourse 자체의 CSS가 무시하도록 강제할 수 있기를 바랐습니다. 그렇게 되면 정말 많은 시간을 절약할 수 있을 텐데 말입니다.
어쨌든 대부분은 해결한 것 같습니다. 앞으로 Discourse에서 주요 CSS 변경 사항이 추가될 때를 주시하면서 그에 맞춰 대응해야겠네요.