Tailwind에서 벗어나며 CSS 구조화 배우기

핵심 요약

몇몇 사이트를 에서 시맨틱 HTML과 바닐라 CSS로 옮기며, 가 제공하던 규칙 중 필요한 것만 직접 재구현함의 reset, 색상 팔레트, font scale처럼 익숙한 시스템은 유지하되 CSS 변수와 파일 분리로 바닐라 C… 에서 벗어나며 CSS 구조화 배우기 ( 11일전 | ★ | 댓글 3개 몇몇 사이트를 에서 시맨틱 HTML과 바닐라 CSS로 옮기며, 가 제공하던 규칙 중 필요한 것만 직접 재구현함 의 reset, 색상 팔레트, font scale처럼 익숙한 시스템은 유지하되 CSS 변수와 파일 분리로 바닐라 CSS에 옮겨 담음 CSS 대부분은 컴포넌트별 파일로 나누고 고유 클래스를 둬, 한 컴포넌트 수정이 다른 컴포넌트를 몰래 깨뜨릴 가능성을 줄임 를 떠나는 배경에는 최신 의 빌드 시스템 의존성, 바닐라 CSS와의 혼재, CSS 제약이 있음 반응형 설계는 보다 CSS grid의 areas를 더 활용하려 하며 @layer, @scope, queries도 학습 대상으로 삼음 에서 배운 구조를 바닐라 CSS로 옮기기 8년 전 를 처음 쓸 때는 CSS 코드를 어떻게 구조화해야 할지 몰랐고, 완전한 혼란보다 가 훨씬 나은 선택이었음 최근 약 일주일 동안 몇몇 사이트를 에서 시맨틱 HTML + 바닐라 CSS로 옮기며, 가 제공하던 규칙 중 필요한 부분만 직접 선택해 재구현하게 됨 layers와 2024를 읽으며, 모든 CSS 코드베이스에는 레이아웃·폰트·색상·공통 컴포넌트 같은 서로 다른 관심사를 관리할 시스템이 필요하다는 점이 분명해짐 에는 reset , 색상 팔레트, font scale 같은 시스템이 이미 있었고, 익숙하고 유용한 부분은 바닐라 CSS에서도 모방할 수 있음 CSS 코드베이스에 둔 주요 시스템 의 styles를 .css에서 처음 약 200줄 복사해 사용함 reset에 오래 익숙해져 있었고, 모든 요소에 box-sizing: border-box를 적용하는 규칙은 요소의 너비가 padding을 포함하게 만듦 * { 같은 다른 reset 규칙에도 무의식적으로 의존하고 있을 가능성이 있으며, 이런 규칙 없이 CSS를 쓰려면 큰 적응이 필요해 보임 CSS 대부분은 Vue나 React 컴포넌트와 비슷한 방식으로 컴포넌트별 파일에 정리함 각 컴포넌트는 고유 클래스를 갖고, 한 컴포넌트의 CSS가 다른 컴포넌트의 CSS를 덮어쓰지 않도록 구성함 실제로 바꾸고 싶은 CSS의 약 80%가 컴포넌트 파일 안에 있어, 100줄짜리 컴포넌트를 편집할 때는 그 100줄만 생각하면 됨 예를 들어 .zine 컴포넌트는 다음과 같은 HTML을 가질 수 있음 CSS는 중첩 선택자로 ., ., :hover 같은 상태를 컴포넌트 내부에 모음 Web 나 @scope처럼 컴포넌트 간 간섭을 프로그램적으로 막지는 않았지만, 관례를 정해 지키는 것만으로도 크게 나아진 느낌을 줌 colours.css에는 필요할 때 사용할 수 있는 CSS 변수를 모아 둠 색상은 어렵고 이번 리팩터링에서 색상 사용을 다시 검토하고 싶지 않았기 때문에 기존 방식을 유지함 유일한 규칙은 사이트에서 쓰는 모든 색상을 이 파일에 나열하는 것임 -- 에서는 text-lg, xl, 2xl처럼 크기 단계를 고르면 됐기 때문에 em, px, rem 중 무엇을 쓰는지 기억할 필요가 없었음 이를 바닐라 CSS에서도 유지하기 위해 에서 가져온 크기 변수를 정의함 폰트 크기는 변수로 지정하며, 보다 조금 장황하지만 현재로서는 만족스러운 방식임 여러 컴포넌트에서 반복되는 버튼 같은 요소는 로 분류함 스크린리더 사용자에게만 보여야 하는 요소를 위한 .sr-only 같은 일부 유틸리티 클래스는 에서 복사함 이 영역은 작게 유지하고, 변경할 때 조심하려 함 “base” 스타일은 사이트 전체에 직접 적용하는 스타일임 사이트 전체에 많은 스타일을 강제할 만큼 확신이 없기 때문에 이 영역은 매우 작게 유지함 현재 괜찮다고 느끼는 규칙은