CSS, 정말 피할 수 없는 문제일까?
CSS의 내재된 복잡성(Inherent Complexity)과 예상치 못한 동작(Unexpected Behavior)이 개발자들에게 큰 어려움을 준다는 주장이 제기됨
래퍼(Wrapper) 요소 과다 사용과 브라우저 기본 스타일(Browser Defaults)의 비일관성이 주요 문제점으로 지적됨
CSS 선택자(CSS Selectors)의 상속 기반 동작 방식이 코드 예측을 어렵게 한다는 비판이 있음
Flexbox, Grid 등 현대적 레이아웃 기법의 유용성에도 불구하고, 폰트 크기(Font Size) 등 세부 조정의 어려움이 언급됨
CSS 선택자(CSS Selectors)와 상속의 함정
커뮤니티에서는 CSS 선택자가 상속(Inheritance) 기반으로 동작하여 예측 불가능성을 야기한다는 점에 주목함. 특히 클래스리스 CSS(Classless CSS)나 인라인 스타일(Inline Styles)을 선호하는 의견과 함께, Tailwind CSS와 같은 유틸리티 우선 접근 방식이 HTML 구조에 대한 과도한 의존성을 줄이는 대안으로 제시됨. 반면, CSS Nesting이 선택자 복잡성을 줄이는 데 도움이 될 수 있다는 의견도 있으나, HTML 구조 변경 시 CSS 유지보수 어려움을 지적하는 반론도 존재함.
박스 모델(Box Model)과 `box-sizing` 논쟁
글에서는 `box-sizing: border-box`가 레이아웃(Layout) 관점에서 유용하지만, 콘텐츠 중심 설계(Content-First Design)에는 `content-box`가 더 적합하다는 주장이 제기됨. 일부에서는 `border-box`가 뷰포트 채우기(Viewport Filling)와 같은 특정 상황 외에는 큰 이점이 없으며, 비율 기반 설계(Ratio-Based Design)와 호환되지 않는다고 지적함. 이는 HTML의 내재적 반응성(HTML's Inherent Responsiveness)과도 연관되어, 콘텐츠 자체의 흐름을 존중하는 것이 중요함을 시사함.
폰트 크기(Font Size) 조정의 복잡성
폰트 크기 조정의 어려움에 대한 논의에서, `font-size-adjust` 속성이 폰트 간 글리프 크기(Glyph Size) 불일치 문제를 해결할 수 있지만, 새로운 불확실성을 야기할 수 있다는 의견이 있음. 일부 개발자는 `font-size-adjust`가 em, rem 단위의 예측 가능성을 해칠 수 있다고 우려하며, 근본적으로 폰트 메트릭(Font Metrics)의 복잡성 때문에 완벽한 해결책은 없다고 봄. 따라서 접근성(Accessibility)을 고려하여 사용자가 폰트 크기를 조절할 수 있도록 하는 것이 중요하다고 강조됨.
반응형 디자인(Responsive Design)과 미디어 쿼리(Media Queries)의 역할
반응형 디자인에 대한 정의를 두고 미디어 쿼리(Media Queries) 사용이 필수적인지에 대한 논쟁이 있음. 일부는 반응형 디자인이 다양한 화면 크기에 적응하는 사고방식이며, 미디어 쿼리 외에도 컨테이너 쿼리(Container Queries)나 클램프(Clamp) 함수를 활용한 유연한 레이아웃(Fluid Layout)이 더 선호된다고 주장함. 반면, 명확한 브레이크포인트(Breakpoints) 설정이 여전히 중요하며, 콘텐츠 자체의 흐름에 맡기는 것은 예측 불가능성을 높일 수 있다는 반론도 존재함.
마진 병합(Margin Collapsing)과 레이아웃 제어
마진 병합(Margin Collapsing)이 예상치 못한 간격 문제를 일으킬 수 있다는 점에 많은 개발자들이 공감함. 특히 중첩된 요소에서 마진이 부모 요소를 벗어나는 현상이 발생할 수 있음. 이를 해결하기 위해 `display: flow-root`를 사용하거나, 부모 요소에서 자식 요소 간의 간격(Inter-element Margin)을 제어하는 방식이 제안됨. 이는 Flexbox나 Grid 레이아웃 사용 시에도 `gap` 속성만으로는 해결하기 어려운 미묘한 레이아웃 문제를 다룰 때 유용하다고 언급됨.
