CSS의 문제점
사실 CSS의 문제점이라고 한다면 대규모 앱에서 사용할 때를 말한다. 혼자서 작은 사이드 프로젝트를 한다면 무엇을 사용해도 사실 상관 없다. 하지만 그 순간에도 아래의 문제점을 발견하게 될 수는 있다.
CSS의 문제점
이 글은 CSS 자체의 문제점이라긴 보다는 CSS를 자바스크립트를 통해 다룰때 발생하는 문제라고 받아들이면 좋을 것같다. 대부분은 전역적 속성에서 오는 파생 문제다.
전역 네임스페이스
CSS의 모든 선택자는 전역적이다. 아무리 BEM 같은 방법론을 사용하더라도 전역 네임스페이스를 오염시키고 있는 것은 사실이다.
예를들어 전역 변수에 이름을 아무리 잘 짓는다고 하더라도 앱의 규모가 커지면 과연 문제가 생기지 않을까? 앱의 규모가 커진다는 것은 팀의 규모도 같이 커진다는 것이고 그 코드를 수정하는 사람들도 수 없이 많아진다는 것이다(일반적으로 입사와 퇴사를 반복하기 때문에). 이는 수 많은 버그나 오류로 이어질 수 있고 장기적으로는 유지 보수를 하기 어려운 앱을 만들 수 있다. 또한 여러 팀이 생긴다고 했을때 이미 스타일이 지정된 클래스가 있는지에 여부에 대해 아는 것도 쉽지 않으며 대부분 그 클래스를 찾을 시간에 새로운 클래스를 그냥 추가한다. 이런 상황이 반복되다 보면 스타일 시트는 이미 엉망이 되어있을 것이고 그 코드 규모도 엄청 방대할 것이다.
물론 전처리기를 사용하여 CSS를 여러 하위 모듈로 변환할 수는 있지만 결국 브라우저에 대해서는 큰 전역 CSS 번들이 생성된다.
죽은 코드를 제거하는게 어렵다
어떤 스타일이 어떤 요소에 적용되고 있는지 파악하는 것은 쉽지 않으며, 전역적으로 CSS는 적용되기 때문에 사이드 이펙트가 예상이 어려워 코드 삭제가 쉽지 않다. 또한 CSS의 계단식 특성으로 인해 selector 또는 rule를 제거하면 브라우저 내에서 의도하지 않은 결과를 발생시킬 수 있다.
상수 공유가 어렵다
CSS와 JS간의 상수 공유가 어렵다.
종속성 문제
아무리 특정 요소가 특정 CSS에 의존하고 있다고 하더라도 스타일은 전역적이기 때문에 이를 명확하게 말하는 것은 힘들며, 모든 파일에서 모든 스타일 요소를 적용할 수가 있으므로 제어를 잃기가 쉽다.
비결정적 해결(non-deterministic resolution)
CSS는 순서가 중요하기 때문에 CSS가 만약 요청에 따라 로드 된다면 순서가 보장되지 않아 스타일을 보장받기 힘들다.
격리가 어렵다
전역적인 속성으로 인해 CSS에서는 파일이나 구성 요소 간에 격리를 하는 것은 사실상 불가능에 가깝다. 다만 인라인 스타일을 적용한다면 해결은 할 수 있다.
인라인 스타일의 문제점
인라인 스타일을 사용하면 일반적인 CSS로 구현하기 어려운 작업도 할 수가 있다(ex. react에서 state를 이용한 스타일 제어). 이 외에도 장점이 존재하지만 문제점을 보기 위한 글이므로 문제점 위주로 나열해 보겠다.
애니메이션이 불가능
인라인 스타일만으로는 애니메이션을 구현할 수 없다. 물론 전역적으로 애니메이션을 정의하고 사용하면 되긴 하다.
!important
인라인 스타일을 사용하면 일반 CSS보다 우선 순위가 높기 때문에 이를 재정의 하려면 !important 키워드를 사용해야 한다. 이는 당장의 요구 사항은 만족할 수 있을지 모르지만, 다른 스타일이 요소에 적용되는 것을 막기 때문에 좋지 못한 습관이다(간혹 레거시 프로젝트를 보면 !important로 도배된 프로젝트를 볼 수 있다).
브라우저에서 디버깅이 어렵다
대부분의 스타일 요소를 많이 추가하게 된다. 그러면 자연스레 아래와 같이 브라우저에서 볼 수는 있겠지만 이것을 확인하고 디버깅하는 것은 아주 피곤한 일이다.
서버 사이드 렌더링시 페이지 사이즈가 더 커진다.
인라인 스타일을 사용하면 위 그림처럼 더 많은 것을 만들어야 하기 때문이다. 클라이언트에 보내야 하는 단일 파일의 바이트 수가 늘어가고 조금 더 느린 페이지를 표시하게 될 수도 있다. 물론 압축 기술이 많이 발전하긴 했지만, 그래도 일반적으로 우리는 이런 현상을 피할려고 노력한다.
Last updated
