[컴][웹] css 관련 알아두면 좋은 이야기

 

css 최적화 / inline style 을 쓰면 안되는 이유 / css design / 아키텍쳐 / 테일윈드

css 관련 알아두면 좋은 이야기

ref. 1 의 글에서 개인적으로 궁금했던 내용만 정리했다. 전체내용은 ref.1 을 통해 파악하자.

인라인 스타일의 주요 문제

• 보다 강력한 CSS 기능에 접근하기 어렵다는 것 : 의사 선택자(pseudo selector) 및 미디어 쿼리와 같은
• 다음을 leveraging 하기 어렵다
  • 공유된 디자인 토큰
  • 캐싱
  • 정적 분석
  • 전처리

CSS in JS

1. Styled Components, Emotion등:
   • 서버 사이드 렌더링의 효율성 문제
   • 캐싱 문제
   • 클라이언트 런타임 비용
2. 컴파일 단계의 컴포넌트에서 스타일시트를 추출하도록 변화함: Vanilla extract, Linaria 및 Compiled와 같은 도구

tailwind 의 부상

me: tailwind 는 처음은 아주 적은 단위로 쪼개서 css 를 생성하고, 나중에 묶을 필요가 있을 때 묶는 방식이라고 보면 될 듯 하다. 예를 들어 color: rgb(254 242 242); 같은 1개의 style 도 tailwind 에서는 text-red-50 로 만들어놨다.(참고: Tailwind CSS Cheat Sheet)

• 지속해서 이름을 지정할 필요가 없다
• 적당한 시점에 추상화할 수 있는 두 가지 기법을 제공
  • 첫 번째는 블록(OOCSS와 유사)을 나타내는 공유된 CSS 클래스를 만드는 방법
  • 컴포넌트 기반 프레임워크를 사용할 때 추천되는 방법인 중복된 클래스를 재사용할 수 있는(React, Vue, Solid, Svelte 등) 컴포넌트로 추출하여 공유하는 것

Reference

1. The evolution of scalable CSS
2. (번역) 확장 가능한 CSS의 진화 | Ykss