더 이상 JavaScript를 남용하지 말자 ("Stop using JS for that:Moving features to CSS and HTML" Youtube 요약 정리)

원본 영상 - Kilian Valkhof - Stop using JS for that:Moving features to CSS and HTML

JavaScript 대신 HTML과 CSS만으로도 충분히 구현 가능한 기능들을 소개, 웹 개발에서 선언형 접근의 장점

✅ 핵심 메시지

• "가장 약한 힘의 원칙 (Rule of Least Power)": 가능한 한 덜 강력한 언어를 사용하자 →
  HTML > CSS > JavaScript
• JavaScript는 유지·테스트·접근성 측면에서 비용이 크므로, 이미 가능한 기능은 CSS/HTML로 대체하자.
• 과거에 JS로 구현했던 많은 기능들이 이제는 CSS/HTML로 대체 가능하다.

---

📌 JavaScript 없이도 가능한 주요 기능

기능	설명
✅ 커스텀 토글(toggle)	input[type=checkbox] + label + :checked + appearance: none
✅ 접근성 고려한 포커스 처리	:focus-visible, outline-color: transparent 활용
✅ 자동완성 리스트 (DataList)	<input list="..."> + <datalist> 조합
✅ 컬러 피커 (Color Picker)	<input type="color">로 완전한 시스템 색상 선택기 사용 가능
✅ 부드러운 스크롤	scroll-behavior: smooth + prefers-reduced-motion 조건 처리
✅ 스크롤 마진/패딩	scroll-margin, scroll-padding으로 스크롤 위치 조정 가능
✅ scroll target 강조	:target으로 이동된 앵커에 스타일 적용
✅ position: sticky	요소를 뷰포트 상단/하단에 고정하는 CSS만으로 구현
✅ Scroll Snap Carousel	scroll-snap-type, scroll-snap-align으로 슬라이더 구성
✅ Accordion UI	<details> + <summary>만으로 열기/닫기 구현
✅ Modal Dialog	<dialog> + showModal(), form method="dialog" 활용 (JS 필요 최소화)

---

🧪 향후 등장 예정 기능들

기능	설명
🧱 Container Queries	부모 컨테이너 크기에 따라 스타일 다르게 적용 (이미 주요 브라우저에 도입됨)
🧱 Masonry Layout	그리드 기반의 Pinterest 스타일 레이아웃 (실험적)
🧱 :has() CSS 선택자	특정 조건이 있는 요소에 스타일 적용 (크롬, 사파리, Firefox Nightly 지원)
🧱 Scroll-driven Animations	JavaScript 없이 스크롤 기반 애니메이션 구현 가능 (곧 지원 예정)

---

💡 마지막 조언

• 기존에 알고 있던 "JS가 필요하다"는 지식은 업데이트되었을 수 있음.
• 새롭게 등장한 HTML/CSS 기능들을 자주 체크하고 활용하라.
• 브라우저가 제공하는 기능은 접근성, 성능, 유지보수 측면에서 훨씬 우수하다.

원본 영상 - Kilian Valkhof - Stop using JS for that:Moving features to CSS and HTML