better CSS에 대한 접근들(CSS-in-JS, Atomic CSS, Preprocessor)의 공통된 한계는 constraint solving 방식이 아니란 것이다.
다들 어떤 기존의 스타일을 '덮어쓰는' 방법, 근데 개중에 좀 잘 덮어쓰는 방법을 찾고 있다. 그런데 많은 경우, 뭔가를 덮어쓰려고 하고 있다면, 그건 사실 값을 덮어쓰는게 아니고 만족해야할 조건을 추가하고 싶은거다. 값을 덮어쓰는 것은 조건을 추가하는 방법 중 가장 강제적인 하나의 방법일 뿐이고. 즉, 디자인 시스템은 어떤 조건들의 합들로부터 실제 스타일을 구하는 방법이어야 하고, 개발자는 조건만 명시할 수 있어야 한다.
constraint solving을 잘 설계하고 구현하는게 어렵다 왜 이렇게 안 하냐고 하긴 좀 거시기하다. 그래서 나도 요즘 propagator를 공부중이다.
If you have a fediverse account, you can reply to this note from your own instance. Search https://hackers.pub/ap/notes/0195da6d-73a5-7057-98a3-47702a941baa on your instance and reply to it.
부연 설명을 위한 퀴즈. 정답은 저도 방금 실험해보고 알았습니다.
<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가 어떻게 될까요?
혹시 맞춘분이 많을까봐 그러는데, 이 동작이 원래 잘 알려져 있나요?
엘리먼트의 클래스 목록에서 순서는 의미가 없고 집합처럼만 작동하기 때문에 (선언 순서가 영향을 주는건 css rule만 해당) d1과 똑같이 적용될 것 같아요.
