현대 CSS 코드 스니펫: 더 이상 2015년처럼 CSS를 작성하지 말자

• 오래된 CSS 해킹 기법과 이를 대체하는 최신 네이티브 CSS 문법을 나란히 비교해 보여주는 코드 모음
• Grid, Flexbox, OKLCH 색상, container query, scroll-timeline 등 최신 표준을 활용해 자바스크립트 의존도를 줄임
• 색상, 레이아웃, 애니메이션, 셀렉터, 타이포그래피, 워크플로우 등 주제별로 구분되어 각 기능의 현대적 대안을 제시
• 예전에는 JS나 Sass로 처리하던 기능을 이제는 순수 CSS 속성으로 구현 가능함을 강조
• 최신 브라우저 호환성을 전제로, 간결하고 유지보수 쉬운 코드 작성 방식으로의 전환을 촉구

개요

• 사이트는 modern-css.com으로, “Modern CSS Code Snippets”라는 이름의 컬렉션을 제공
• 각 예시는 “Old”와 “Modern” 두 버전으로 구성되어, 과거 방식과 최신 CSS 기능을 직접 비교 가능
• 설명에는 브라우저 호환성, 코드 간결화, 시각적 일관성 등의 개선점을 함께 제시

레이아웃(Layout)

• Grid와 Flexbox를 활용해 기존의 float, absolute, calc() 기반 레이아웃을 대체
  • 예: position: absolute; transform: translate(-50%, -50%) 대신 display: grid; place-items: center; 사용
  • float 기반 레이아웃 대신 grid-template-areas로 구조 정의
• scrollbar-gutter, overscroll-behavior, aspect-ratio, position: sticky 등으로 JS 의존 제거
  • 모달 스크롤 차단, 비디오 비율 유지, 스크롤 고정 헤더 등을 CSS만으로 구현
• subgrid, stretch, anchor positioning 등 고급 기능으로 부모-자식 레이아웃 연동 가능
• popover, dialog, commandfor 속성으로 모달과 메뉴를 JS 없이 제어

색상(Color)

• 기존의 rgb()나 수동 색상 조정 대신 OKLCH 색 공간을 사용
  • 예: --brand: oklch(0.55 0.2 264) 형태로 명도(L)만 조정해 일관된 색조 유지
• color(display-p3) , color-mix() , light-dark() 등으로 더 넓은 색역과 다크모드 대응
• accent-color 속성으로 체크박스·라디오 버튼의 테마 색상 지정
• Sass의 lighten()/darken() 함수 대신 oklch(from var(--brand) calc(l + 0.2) c h)로 구현

애니메이션(Animation)

• translate/rotate/scale 속성을 분리해 개별 애니메이션 제어 가능
• interpolate-size, transition-behavior: allow-discrete, @starting-style 등으로 JS 없는 전환 구현
• view-transition API와 animation-timeline: view() 로 스크롤 기반 애니메이션을 CSS만으로 처리
• shape() , sibling-index() , scroll-state() 등으로 복잡한 모션과 상태 변화를 단순화

셀렉터(Selector)

• :focus-visible, :is() , :where() , :has() , :user-valid, :target-current 등 최신 선택자 사용
  • 접근성 향상과 불필요한 JS 이벤트 제거
  • 예: input:user-invalid로 폼 유효성 표시, nav a:target-current로 현재 링크 강조
• :scope와 @scope를 통해 컴포넌트 단위 스타일 격리 가능

타이포그래피(Typography)

• text-wrap: balance, text-box: trim-both cap alphabetic 등으로 시각적 정렬 개선
• line-clamp, initial-letter, font-display: swap, variable fonts로 텍스트 표현 최적화
• clamp() 를 활용한 반응형 폰트 크기 설정으로 미디어쿼리 단순화

워크플로우(Workflow)

• CSS 변수(var) 와 @layer, @property, @container style() 등으로 빌드 도구 없이 동적 스타일 관리
• content-visibility, contain-intrinsic-size로 렌더링 성능 향상
• color-scheme: light dark로 다크모드 자동 지원
• plain .css에서 중첩 선택자(&) 사용 가능, Sass 없이도 구조적 스타일 작성

종합

• 모든 예시는 “Old vs Modern” 형식으로, 과거의 복잡한 코드와 최신 CSS의 간결함을 대비
• 최신 CSS 표준을 통해 JS, Sass, 외부 라이브러리 의존도를 줄이고, 브라우저 네이티브 기능을 최대한 활용
• “Stop writing CSS like it’s 2015”라는 메시지처럼, 2026년 기준의 현대적 CSS 작성법을 제시하는 자료임