2025년의 CSS라니, 마치 2005년처럼 인라인 스타일을 HTML에 직접 쓰자는 느낌임
Tailwind 얘기를 하는 거지만, 결국 포맷과 표현의 분리를 무시하는 셈임
웹 개발에서 가장 오래된 신화는 ‘관심사의 분리’라는 개념임
HTML과 CSS는 기술의 분리일 뿐임
HTML이 진짜로 콘텐츠만 담당하고 CSS가 스타일만 담당했다면, .container-wrapper .container .container-inner 같은 div soup을 만들 필요도 없었을 것임
레이아웃을 바꿀 때마다 HTML을 수정해야 하는 현실이 그 증거임
코드를 난독화할 필요 없음, 그냥 Tailwind 쓰면 됨
오히려 그게 낫다고 생각함
컴포넌트 관련 코드가 한 곳에 모여 있어서 파일을 왔다 갔다 할 필요가 없음
좋은 아이디어라고 생각함 레이아웃과 스타일은 분리할 수 없는 UI의 일부임
HTML은 콘텐츠가 아니라 레이아웃임
설령 관심사 분리를 신봉하더라도 HTML과 CSS는 같은 표현 계층에 속함
둘을 분리할 수 있다고 믿는 건 현실을 외면하는 것과 같음
최근 CSS의 주요 개선점 목록을 정리해봤음
중첩 셀렉터(nested selectors)
:has(...)
:is(...) — 예전엔 :not(:not(...)) 같은 꼼수를 써야 했음
:where(...) — :is(...)와 비슷하지만 셀렉터 가중치가 0이라 복잡한 셀렉터를 쓸 때 유용함
#1에 강력히 동의함
대부분의 LLM이 이 기능을 모름 AGENTS.md에 예시를 추가하길 추천함 MDN Nesting Selector 문서를 참고하면 좋음 & 셀렉터를 활용해 가독성과 중복 제거를 동시에 얻을 수 있음
내가 제일 좋아하는 건 text-box: trim임
20년 동안 디자이너에게 대문자 상단 맞추기 불가능하다고 설명하던 시절이 끝나서 자유로움을 느낌
개인적으로는 @layer 기능이 가장 마음에 듦
2~4번은 좋지만 중첩 셀렉터는 grep 불가능해서 싫음
예시 중 일부는 예전 방식이 모든 브라우저에서 작동하지만, 새 방식은 Chrome/Edge에서만 됨
이런 예시를 넣는 건 Blink 독점을 강화하므로 무책임하다고 생각함
동의함. 기본 필터가 “newly available”로 설정되어 세 주요 브라우저(Chrome/Edge, Safari, Firefox)를 모두 포함하면 좋겠음
사이트 탓은 아님
오히려 Mozilla의 표준 준수 부족을 지적해야 함
화면 가장자리에 요소를 고정시키는 걸 멈춰야 함
일부 사이트는 화면의 절반 이상을 정적 요소가 차지함
콘텐츠는 스크롤되게 두는 게 자연스러움
아이러니하게도 해당 사이트는 다크 모드 고정이고, prefers-color-scheme을 사용하지 않음
“창의적인 CSS 예시 좋다!” 하고 보면, 브라우저 지원이 40~50% 수준이라 현실적 제약이 있음
과거엔 이런 지원 부족이 큰 문제였지만, 지금은 많이 나아졌음
Chromium의 과도한 영향 덕분이긴 하지만 결과적으로는 긍정적임 Interop 2025 참고
예시 필터를 “widely available”로 바꾸면 지원률이 훨씬 높아짐
시간이 걸릴 뿐임
브라우저 벤더들이 언젠가 광범위한 지원을 위해 미리 기능을 추가하고 있음
Firefox에서는 안 된다고 표시된 예시들이 실제 데모에서는 잘 작동해서 혼란스러움
혹시 polyfill이 적용된 건지 궁금함
“Limited availability” 표시임
왼쪽 하단의 초록색 퍼센트는 해당 기능을 지원하는 브라우저 사용자 비율을 의미함
절반 이하인 경우도 많음
결국 “modern CSS”라기보다 “latest Chrome CSS”에 가까움
기능 지원 라벨링이 엉망임
예를 들어 sibling-index()는 Firefox에서 아직 안 되는데 “widely available”로 표시되어 있음
요즘은 Tailwind, CSS-in-JS, Sass/SCSS, Vanilla CSS 중 어떤 걸 써야 하는지 헷갈림
정답은 없음
팀에 맞는 걸 쓰면 됨
Tailwind가 맞으면 그걸로, 개인 프로젝트면 인라인 CSS로, Sass가 익숙하면 그대로,
최신 CSS에 올인하고 싶으면 그것도 멋진 선택임
웹 개발을 너무 오래 하다 보니, “옛날 방식”이라 불리는 예시들조차 처음 보는 기능이 많음
색상 밝기 조절 기능은 처음 봤음
예전엔 Sass와 Compass로 구현했는데, 툴체인 유지보수가 번거로웠음
이제 CSS 자체에서 지원하니 훨씬 편리해짐
Hacker News 의견들
2025년의 CSS라니, 마치 2005년처럼 인라인 스타일을 HTML에 직접 쓰자는 느낌임
Tailwind 얘기를 하는 거지만, 결국 포맷과 표현의 분리를 무시하는 셈임
HTML이 진짜로 콘텐츠만 담당하고 CSS가 스타일만 담당했다면,
.container-wrapper .container .container-inner같은 div soup을 만들 필요도 없었을 것임레이아웃을 바꿀 때마다 HTML을 수정해야 하는 현실이 그 증거임
컴포넌트 관련 코드가 한 곳에 모여 있어서 파일을 왔다 갔다 할 필요가 없음
레이아웃과 스타일은 분리할 수 없는 UI의 일부임
HTML은 콘텐츠가 아니라 레이아웃임
설령 관심사 분리를 신봉하더라도 HTML과 CSS는 같은 표현 계층에 속함
둘을 분리할 수 있다고 믿는 건 현실을 외면하는 것과 같음
최근 CSS의 주요 개선점 목록을 정리해봤음
:has(...):is(...)— 예전엔:not(:not(...))같은 꼼수를 써야 했음:where(...)—:is(...)와 비슷하지만 셀렉터 가중치가 0이라 복잡한 셀렉터를 쓸 때 유용함대부분의 LLM이 이 기능을 모름
AGENTS.md에 예시를 추가하길 추천함MDN Nesting Selector 문서를 참고하면 좋음
&셀렉터를 활용해 가독성과 중복 제거를 동시에 얻을 수 있음text-box: trim임20년 동안 디자이너에게 대문자 상단 맞추기 불가능하다고 설명하던 시절이 끝나서 자유로움을 느낌
@layer기능이 가장 마음에 듦예시 중 일부는 예전 방식이 모든 브라우저에서 작동하지만, 새 방식은 Chrome/Edge에서만 됨
이런 예시를 넣는 건 Blink 독점을 강화하므로 무책임하다고 생각함
오히려 Mozilla의 표준 준수 부족을 지적해야 함
화면 가장자리에 요소를 고정시키는 걸 멈춰야 함
일부 사이트는 화면의 절반 이상을 정적 요소가 차지함
콘텐츠는 스크롤되게 두는 게 자연스러움
아이러니하게도 해당 사이트는 다크 모드 고정이고,
prefers-color-scheme을 사용하지 않음“창의적인 CSS 예시 좋다!” 하고 보면, 브라우저 지원이 40~50% 수준이라 현실적 제약이 있음
Chromium의 과도한 영향 덕분이긴 하지만 결과적으로는 긍정적임
Interop 2025 참고
브라우저 벤더들이 언젠가 광범위한 지원을 위해 미리 기능을 추가하고 있음
Firefox에서는 안 된다고 표시된 예시들이 실제 데모에서는 잘 작동해서 혼란스러움
혹시 polyfill이 적용된 건지 궁금함
왼쪽 하단의 초록색 퍼센트는 해당 기능을 지원하는 브라우저 사용자 비율을 의미함
절반 이하인 경우도 많음
결국 “modern CSS”라기보다 “latest Chrome CSS”에 가까움
예를 들어
sibling-index()는 Firefox에서 아직 안 되는데 “widely available”로 표시되어 있음요즘은 Tailwind, CSS-in-JS, Sass/SCSS, Vanilla CSS 중 어떤 걸 써야 하는지 헷갈림
팀에 맞는 걸 쓰면 됨
Tailwind가 맞으면 그걸로, 개인 프로젝트면 인라인 CSS로, Sass가 익숙하면 그대로,
최신 CSS에 올인하고 싶으면 그것도 멋진 선택임
웹 개발을 너무 오래 하다 보니, “옛날 방식”이라 불리는 예시들조차 처음 보는 기능이 많음
색상 밝기 조절 기능은 처음 봤음
예전엔 Sass와 Compass로 구현했는데, 툴체인 유지보수가 번거로웠음
이제 CSS 자체에서 지원하니 훨씬 편리해짐