Blazor 구성 요소에서 격리된 CSS 사용
Blazor로 작업할 때 항상 나를 괴롭혔던 한 가지는 실수로 구성 요소 전체에서 스타일을 깨뜨리는 것이 얼마나 쉬운지였습니다. 한 구성요소에 클래스를 추가했는데 갑자기 완전히 다른 페이지에 있는 다른 항목이 이상해 보였습니다. 알고 보니 Blazor에는 이를 위한 내장 솔루션인 CSS 격리가 있습니다.
CSS 격리란 무엇인가요?
CSS 격리를 사용하면 스타일 범위를 특정 구성 요소로 지정할 수 있습니다. Blazor는 빌드 시 각 구성 요소에 대해 고유한 특성을 생성하고 이를 CSS 선택기에 추가하여 이를 수행합니다. 따라서 스타일은 해당 스타일이 속한 구성 요소에만 적용됩니다.
BEM 이름 지정도 필요 없고, 말도 안 되는 특정성 해킹도 필요하지 않습니다. 깨끗하고 범위가 지정된 CSS입니다.
사용방법
Card.razor라는 구성요소가 있다고 가정해 보겠습니다.
<div class="card">
<h3 class="card-title">@Title</h3>
<p class="card-body">@ChildContent</p>
</div>
@code {
[Parameter]
public string Title { get; set; }
[Parameter]
public RenderFragment ChildContent { get; set; }
}
분리된 스타일을 추가하려면 이름은 같지만 확장자는 .razor.css인 파일을 생성하면 됩니다. 이 경우: Card.razor.css.
.card {
border: 1px solid var(--color-border);
border-radius: 8px;
padding: 1rem;
background: var(--color-bg-secondary);
}
.card-title {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.card-body {
color: var(--color-text-secondary);
font-size: 0.9rem;
}
그리고 그게 다야! Blazor는 자동으로 이를 선택하고 해당 스타일의 범위를 Card 구성 요소로만 지정합니다. 다른 곳에 또 다른 .card 클래스가 있으면 영향을 받지 않습니다.
내부적으로는 어떻게 작동하나요?
프로젝트를 빌드하면 Blazor는 HTML과 CSS를 다시 작성합니다. 구성 요소는 b-3x8qz7k2f1와 같은 고유한 속성을 가지며 CSS 선택기는 해당 속성을 추가합니다.
.card[b-3x8qz7k2f1] {
border: 1px solid var(--color-border);
/* ... */
}
생성된 CSS 번들은 {ProjectName}.styles.css로 제공됩니다. index.html 또는 _Host.cshtml에 이것이 있는지 확인하십시오.
<link href="YourApp.styles.css" rel="stylesheet" />
해당 링크가 없으면 격리된 스타일이 표시되지 않으며 무슨 일이 일어나고 있는지 궁금해하는 데 30분을 소비하게 됩니다. 저를 믿으세요. 저는 거기에 가봤습니다.
하위 요소 타겟팅
한 가지 명심해야 할 점은 기본적으로 격리된 CSS는 현재 구성 요소의 요소에만 적용된다는 것입니다. 하위 구성 요소 내부의 요소 스타일을 지정하려면 ::deep 연결자가 필요합니다.
::deep .child-element {
color: red;
}
이는 Blazor가 하위 구성 요소 내의 일치하는 요소에도 스타일을 적용하도록 지시합니다. 하위 항목의 스타일을 지정해야 하는 래퍼 구성 요소가 있는 경우 매우 편리합니다.
언제 사용하는가
저는 현재 거의 모든 구성 요소에 CSS 격리를 사용합니다. 모든 것을 깨끗하고 예측 가능하게 유지합니다. 내가 사용하지 않는 유일한 때는 재설정, 타이포그래피 또는 테마 변수와 같은 진정한 전역 스타일(공유 CSS 파일에 포함됨)에 사용하는 것입니다.
게시물이 마음에 드셨기를 바랍니다! @emimontesdeoca로 소셜 미디어를 통해 언제든지 저에게 연락해주세요.