Hackers' Pub

better CSS에 대한 접근들(CSS-in-JS, Atomic CSS, Preprocessor)의 공통된 한계는 constraint solving 방식이 아니란 것이다.

다들 어떤 기존의 스타일을 '덮어쓰는' 방법, 근데 개중에 좀 잘 덮어쓰는 방법을 찾고 있다. 그런데 많은 경우, 뭔가를 덮어쓰려고 하고 있다면, 그건 사실 값을 덮어쓰는게 아니고 만족해야할 조건을 추가하고 싶은거다. 값을 덮어쓰는 것은 조건을 추가하는 방법 중 가장 강제적인 하나의 방법일 뿐이고. 즉, 디자인 시스템은 어떤 조건들의 합들로부터 실제 스타일을 구하는 방법이어야 하고, 개발자는 조건만 명시할 수 있어야 한다.

constraint solving을 잘 설계하고 구현하는게 어렵다 왜 이렇게 안 하냐고 하긴 좀 거시기하다. 그래서 나도 요즘 propagator를 공부중이다.

부연 설명을 위한 퀴즈. 정답은 저도 방금 실험해보고 알았습니다.

<style>
  .box1 {
    min-width: 200px;
  }

  .box2 {
    min-width: 300px;
  }
</style>

<div style="width: 0px;">
  <!-- 케이스 2: 두 클래스 모두 (box2의 200px가 적용) -->
  <div id="d1" class="box1 box2">200 px or 300px</div>
  <!-- 케이스 3: box1 box2 순서가 다름 -->
  <div id="d2" class="box2 box1">200 px or 300px</div>
</div>

여기서 #d1과 #d2의 width가 어떻게 될까요?

혹시 맞춘분이 많을까봐 그러는데, 이 동작이 원래 잘 알려져 있나요?