▲

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

 (modern-css.com)
3P by GN⁺ 7일전 | ★ favorite | 댓글 1개
  • 오래된 CSS 해킹 기법과 이를 대체하는 최신 네이티브 CSS 문법을 나란히 비교해 보여주는 코드 모음
  • Grid, Flexbox, OKLCH 색상, container query, scroll-timeline 등 최신 표준을 활용해 자바스크립트 의존도를 줄임
  • 색상, 레이아웃, 애니메이션, 셀렉터, 타이포그래피, 워크플로우 등 주제별로 구분되어 각 기능의 현대적 대안을 제시
  • 최신 CSS 표준을 통해 JS, Sass, 외부 라이브러리 의존도를 줄이고, 브라우저 네이티브 기능을 최대한 활용할 수 있음
▲
GN⁺ 7일전  [-]
Hacker News 의견들

  • 2025년의 CSS라니, 마치 2005년처럼 인라인 스타일을 HTML에 직접 쓰자는 느낌임
    Tailwind 얘기를 하는 거지만, 결국 포맷과 표현의 분리를 무시하는 셈임

    • 웹 개발에서 가장 오래된 신화는 ‘관심사의 분리’라는 개념임
    • HTML과 CSS는 기술의 분리일 뿐임
      HTML이 진짜로 콘텐츠만 담당하고 CSS가 스타일만 담당했다면, .container-wrapper .container .container-inner 같은 div soup을 만들 필요도 없었을 것임
      레이아웃을 바꿀 때마다 HTML을 수정해야 하는 현실이 그 증거임
    • 코드를 난독화할 필요 없음, 그냥 Tailwind 쓰면 됨
    • 오히려 그게 낫다고 생각함
      컴포넌트 관련 코드가 한 곳에 모여 있어서 파일을 왔다 갔다 할 필요가 없음
    • 좋은 아이디어라고 생각함
      레이아웃과 스타일은 분리할 수 없는 UI의 일부임
      HTML은 콘텐츠가 아니라 레이아웃임
      설령 관심사 분리를 신봉하더라도 HTML과 CSS는 같은 표현 계층에 속함
      둘을 분리할 수 있다고 믿는 건 현실을 외면하는 것과 같음

  • 최근 CSS의 주요 개선점 목록을 정리해봤음

    1. 중첩 셀렉터(nested selectors)
    2. :has(...)
    3. :is(...) — 예전엔 :not(:not(...)) 같은 꼼수를 써야 했음
    4. :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 자체에서 지원하니 훨씬 편리해짐

답변달기