Build UIs that don't suck #1: Rounding corners with science and CSS variables

Intro

기존: 카드 컴포넌트 전체를 a태그로 감싸 어디를 클릭해도 링크로 이동하도록 설계

문제점: 스크린 리더기가 링크를 읽을 때 a태그로 감싸진 모든 내용을 읽음

개선

• 기존에 가장 상위 컨테이너를 a태그에서 div태그로 변경
• 타이틀만 a태그로 변경 후, 내부에 span태그를 두어 absolute inset-0 을 준다 (inset-0: top-0, bottom-0, left-0, right-0)
• 그리고 relative 태그까지 모두 포함시키도록 z-index에 우선순위를 준다
• 상위 컨테이너에 isolate 속성을 주어 내부의 z-index를 로컬화한다
  

#1

• 중첩된 요소들에 대해 완벽한 border-radius를 계산하는 방법
• 임의의 값들과 calc() 함수를 사용해서 그 계산을 실제 CSS로 변환하는 방법
• CSS 변수를 사용하도록 모든 스타일을 리팩토링해서, 다양한 border-radius나 padding 값을 실험할 때에도 UI 전체가 완벽하게 동기화된 상태로 유지되도록 만들기

기존: 부모요소의 rounded 정도에 따라 자식요소에서 rounded를 유추해 적당한 값으로 주었음
개선

• 자식 요소에서 부모요소와 자연스럽게 어우러지는 rounded 정도는 부모 요소 rounded-부모의 패딩
• 부모요소에서 CSS 변수를 만들어주어 자식요소에서 사용하도록 구현해주면됨

<!-- 이전코드 -->
<div class="rounded-4xl">
  <img class="rounded-4xl" />
</div>

<!-- 변경 후 -->
<div
  class="[--card-radius:var(--radius-4xl)] [--card-padding:--spacing(3)] p-(--card-padding) rounded-(--card--radius)"
>
  <img class="rounded-[calc(var(--card-radius)-(var(--card-padding)))]" />
</div>