CSS 특징

종속 (Cascade)

높은 우선순위의 속성은 낮은 우선순위의 속성을 덮어씌운다.

명시 (Specificity)

종속되어 속성이 부여될때 속성값을 지정하는 대상을 명확하게 지정하는 것.
이미 선언된 높은 명시도를 가진 selector를 대체하기 위해선
더 높은 명시도를 가진 selector로 접근해야한다.

!important 로 인해 흔히 발생하는 문제를 보아도 그 복잡함으로 인해
문제가 생길 수 밖에 없단걸 알수있다.

CSS 전처리기(Pre-Processor)

페이지 처리과정에서 반응에 대한 피드백을 위해 처리하는 과정에서
변수 사용은 필수적이나, CSS 에선 그 처리가 불가하단 문제가 있었고
종속으로 인한 복잡성을 해결하기위해 중첩(Nesting)을 활용하는 방법을 제공.

• 변수(Variables)

/* code ------------------- */
@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}
/* result ------------------- */
#header {
  width: 10px;
  height: 20px;
}

• 중첩(Nesting)

/* code ------------------- */
#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}
/* result ------------------- */
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

CSS-in-JS 처리방식

종속성만 생각하면 inline style 과 동일하게 볼수있으나
사용된 속성만 컴파일되어 공통적으로 사용됨으로 파일 사이즈가 매우 절약되며
캐시를 이용하여 처리 되어 가능해진다.

경험에서 볼때, 중첩으로 처리되는 것도 상당한 도움이 되지만
vue로 작업을 하며 느낀건 결국 컴포넌트로써 처리되고 그 컴포넌트의 복잡성이
점차 높아져가다가 중간에 어떤 이유에 의해서 삭제했을때가 핵심으로 생각된다.

결국 삭제된 블럭은 특정한 스타일로 잡혀있을 것이고 통용되지 않을때가 더 많다.
그래서 해당 스타일을 제거하다 보면 불필요하게 관계가 얽혀있을때가 있다.
물론 실력으로 방지할 수 있겠지만 CSS-in-JS 방식을 쓰면 컴포넌트 자체에만 집중할 수 있다고 생각된다.
계층적으로 엘리먼트를 구성하지만 하위와 상위가 독립적인 구조가 되어 신경써야 하는 영역이 줄어드는것이다.

변수를 활용하는 장점도 있지만 vue, react 같은 framework를 사용하게 되면
구현이 가능한 점이 약간 장점을 퇴색되게 보인다.

<div class="space-y-5">
  <div class="p-3 bg-white shadow rounded-lg">
    <h3 class="text-xs border-b">font-sans</h3>
    <p class="font-sans">
      The quick brown fox jumps over the lazy dog.
    </p>
  </div>
  <div class="p-3 bg-white shadow rounded-lg">
    <h3 class="text-xs border-b">font-serif</h3>
    <p class="font-serif">
      The quick brown fox jumps over the lazy dog.
    </p>
  </div>
  <div class="p-3 bg-white shadow rounded-lg">
    <h3 class="text-xs border-b">font-mono</h3>
    <p class="font-mono">
      The quick brown fox jumps over the lazy dog.
    </p>
  </div>
</div>

참고자료
https://tailwindcss.com/
https://jxnblk.com/blog/why-you-should-learn-css-in-js/
https://velog.io/@teo/css-history-1#on-demand-atomic-css--2021-2022-2023