CSS: 격리 대 추상화

완전한 격리

이는 사물이 새는 CSS의 전역적 특성의 결과로 발생하며 따라서 구성 요소 기반 UI 아키텍처는 캐스케이딩 및 전역 CSS가 구성 요소 전체에서 스타일 누수를 유발하기 때문에 어렵습니다. 예를 들어:

<!-- Heading1: Component file; applies styles inside itself. -->
<h1>Some heading</h1>
<style>
    h1 {
        font-size: 32px;
        font-weight: bold;
    }
</style>
<!-- 
 The style inside of Heading1.component.js leaks out to global affecting
 all the h1 tags.
-->

CSS의 글로벌 특성으로 인해 h1 구성 요소 내부에 있을 수 있는 Heading1 자체style가 있지만 CSS의 글로벌 범위로 인해 페이지의 모든h1으로 누출됩니다. 구성 요소 스타일은 구성 요소 자체로 범위가 지정되지 않으므로 범위가 지정된 클래스 이름에 스타일을 적용하여 이 문제를 해결하려는 BEM, CSS-in-JS 및 CSS 모듈과 같은 솔루션이 탄생했습니다. 예를 들어:

<!-- With BEM Naming convention makes sure that styles are scoped -->
<div class="card">
    <div class="card__title">Title</div>
    <div class="card_actions card__actions--hover">actions</div>
</div>
<style>
    .card {
        width: 100%;
        padding: 16px 24px;
        display: flex;
        flex-direction: column;
    }
    .card__title {
        font-size: 16px;
        font-weight: 600;
    }
    .card_actions {
        display: none;
    }
    .card_actions--hover:hover {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }
</style>

CSS-in-JS와 같은 다른 솔루션은 고유한 클래스 이름을 생성하여 문제를 해결합니다. 자세한 내용은 여기“Why CSS-in-JS?”에서 확인할 수 있습니다. 스코프 스타일을 보장하고 의도하지 않은 누출을 방지하며 최신 번들러는 스마트하고 페이지에서 요구하는 스타일만 제공한다는 점을 확신해야 합니다. CSS 성장은 전체 격리 방식에서 발생한다는 점에 유의하십시오.

전체 추상화

이는 유틸리티 또는 원자 클래스라고 하는 일반적이고 전역적이며 재사용 가능한 클래스를 생성하여 CSS의 전역적 특성을 수용합니다. tailwind과 같은 솔루션은 스타일링에 유틸리티 클래스를 사용하는 데 중점을 두고 있으며 번들링 및 주문 문제를 완화하기 위한 자체 빌드 시스템이 있습니다. 각 유틸리티 클래스는 코드에 영원히 남고 스마트 번들러는 빌드 시 사용되지 않는 유틸리티 클래스를 털어냅니다. 이렇게 하면 대부분의 선언을 포함하는 유틸리티 클래스이므로 코드에서 CSS의 증가가 느려지고 재사용이 가능하므로 CSS가 느립니다. 예를 들어:

<div class="w-full py-4 px-6 flex flex-col">
    <div class="text-base font-semibold">Title</div>
    <div class="hidden hover:flex hover:justify-end">actions</div>
</div>
<style>
    <!-- utility classes -->
    .w-full { width: 100%; }
    .px-6 { padding-left: 24px; padding-right: 24px; }
    .py-4 { padding-top: 16px; padding-bottom: 16px; }
    .flex { display: flex; }
    .flex-col { flex-direction: column; }
    .text-base { font-size: 16px; }
    .font-semibold { font-weight: 600; }
    .hidden { display: none; }
    <!-- hover:flex is written as .hover\:flex -->
    .hover\:flex:hover { display: flex; }
    .hover\:justify-content { justify-content: flex-end; }
</style>

위의 예는 유틸리티 클래스가 반복을 유발하지 않고 다양한 스타일을 달성하기 위해 무한한 수의 방법으로 구성될 수 있는 규칙의 작은 선언인 방법을 보여줍니다.

중앙 필드

어려운 진실은 중간 지점이 없다는 것입니다. 이 둘은 같은 축의 반대편에 있으며 중간 지점을 선택할 수 없습니다. 최선을 다하더라도 중도에 도달할 수 없습니다. 팀이 성장함에 따라 잘 정의된 아키텍처를 깨고 누출을 일으키거나 CSS가 커지거나 특정성 전쟁이 일어날 개발자가 항상 있습니다.

우리는 중간 지점을 갖기 위한 노력이 이루어지고 있기 때문에 희망적이어야 합니다. 그러한 노력 중 하나는 그들이 React conf에서 발표한 Facebook에 의한 것이며 두 세계의 장점을 모두 즐길 수 있도록 오픈 소스로 만들어지기를 기다리고 있습니다.