CSS 리팩터링 #1 CSS

최근 완료한 프로젝트에서 사이트가 느리다는 이야기가 들려왔다.
이런 경우 주로 DB를 먼저 의심하기 마련이지만, 저사양에서 확인해 보니 CSS/JS의 다운로드/렌더링 속도도 문제가 있는 듯 했다.
퍼블리싱 해둔 걸 보니 CSS와 자바스크립트를 모두 한 파일에 밀어넣은 상황.
자그마치 175kb에 1만 라인이 넘어가는 CSS를 보면서 일단 이것을 분리해야겠다는 생각이 들었다.


헐...

CSS를 한 파일에 두면 다음과 같은 단점이 있다.

1. CSS 파일의 용량이 늘어난다. 다운로드 시간이 길어지고, 처음 접속한 사용자는 그 만큼 오래 기다리게 될 것이다.
2. CSS 항목이 늘어남에 따라 브라우저가 파싱할 항목도 많아진다. 이는 렌더링 속도 지연으로 이어진다.
3. CSS 파일을 여러 사람이 수정할 경우 충돌할 가능성이 높아진다. VSS와 같은 환경에서는 체크인/아웃 때문에 매우 불편해진다.
4. CSS 파일에 잘못된 문자가 삽입되거나 인코딩 오류로 정상 파싱되지 않을 경우 전체 사이트가 망가지게 된다.
5. 미리 예약된 변수(클래스, ID)명이 자꾸만 많아진다. 사소한 변수명 작성에도 원래 그런 이름이 있지는 않았는지 검색해보아야 한다.
6. 미리 예약된 변수들로 인한 충돌을 막기 위해 지시어(selector)를 자세하게 쓰게 된다. (예: ".content .page1 TABLE .title") 이에 따라 렌더싱 속도도 느려진다.

따라서 일단 당면한 지상 과제는 CSS를 각 페이지별로 분리하는 것이다. 상식적으로 생각해 봐도 특정 페이지에서 쓰이는 수십개의 지시어와 선언문을 모든 페이지에서 읽어들일 필요는 없을 것이다.
다만 이렇게 함으로써 CSS 파일이 매우 많아지는데, 배치하는 데는 다음 두 가지 방식이 있을 것이다.

1. CSS를 별도의 폴더에 두기
2. CSS와 실제 사용되는 페이지를 같은 폴더에 두기


CSS만 별도의 폴더에 두기(왼쪽), CSS와 해당 페이지를 한 폴더에 두기(오른쪽)

위 의 사진을 잘 보면 왼쪽의 경우 파일이 늘어나면 늘어날수록 파일을 찾기 위해 많은 스크롤과 클릭(폴더 열기)을 필요로 한다는 걸 어렵지 않게 짐작할 수 있다. 반면 오른쪽은 애써 파일을 찾아 다닐 필요가 없다. 따라서 나는 페이지에 해당되는 CSS를 반드시 같은 폴더에 둔다. 이렇게 함으로써 여러 파일을 오가며 작업할 때 생기는 피로를 조금이나마 덜 수 있다. 이미지나 플래시야 너무 많고 용량 또한 커서 피치못해서라지만, 한 파일에 한 개씩 붙어 있는 CSS 및 자바 스크립트 파일의 경우 굳이 분리해 두어야 할 이유를 모르겠다. 단지 reset.css나 공통 라이브러리에서 사용하는 css/js는 어느 페이지에서든 쉽게 접근할 수 있도록 공통 폴더에 둔다.

파일을 분리할 때 해당되는 내용만 제거하는 가장 쉬운 방법은 검색이다. 비주얼 스튜디오의 경우 '파일에서 찾기' 기능으로 '전체 솔루션' 에서 검색하면 해당 CSS를 사용하는 파일이 어느 것인지 쉽게 알 수 있다. 다만 자바스크립트나 C#/JAVA/PHP 등 페이지 구성 언어에서 클래스명을 문자열 조합을 통해 동적으로 만드는 경우(예: header1, header2 등의 클래스명을 "header_" + i 식으로 만들어 넣는 경우)에는 검색이 불가능하니 주의하자.


아항. 넌 "JointPurchase.css"로 만들어주면 되겠군

CSS 를 분리할 때는 순서도 신경을 써 주어야 한다. 예컨대 main.css에서 선언한 내용을 sub.css에서 확장하거나 덮어 씌우는 내용이 있을 수 있다. 그렇다면 본래 main.css에 있던 내용은 반드시 sub.css에 있던 내용의 앞에 와야 할 것이다. 이런 순서가 뒤바뀔 경우 페이지는 엉망이 될 수 있다.

Tag :
,

Leave Comments