웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > css

사용하지 않는 CSS를 제거하는 방법은?

Last Modified : 2018-07-09 / Created : 2017-04-30
7,327
View Count
웹사이트를 개발하는 과정이 반복되고 길어지면 CSS의 코드의 양이 늘어나게됩니다. 이때 꼭 필요한 CSS가 아닌 실제 사용되지 않음에도 불구하고 계속 남아있는 CSS 코드가 발생할 수도 있는데 이를 효과적으로 제거, 삭제하는 방법은 어떤게 있을까요?


# purifycss
찾아보니 purifycss 등의 어플리케이션이 존재하더군요 ~ npm을 사용해 간단하게 인스톨하고 실행하는 것이 장점같습니다. 아쉬운 점은 다들 그렇듯 이것 역시 수정을 해준다기 보다는 현재 실제로 사용되는 것이 어떤 것인지 알려주는 역할을 합니다. 자동으로 모두 제거해주고 기존 CSS를 수정해주거나 바로 사용할 수 있는 뭔가를 만들어 주면 정말 편할 것 같습니다.


# 브라우저의 Audits를 활용하기
Audits 메뉴는 브라우저 개발자 도구에 존재합니다. Chrome, Safari 등등의 브라우저에서 존재하는 메뉴로 클릭하면 실행하기 버튼이 있습니다. 여기에 실제로 사용되는 CSS가 얼마나 되는지 등의 유용한 정보를 제공합니다. 이를 가지고 바로 적용할 수는 없지만 현재 CSS의 상태, 검증을 위해서 좋은 방법 중 하나입니다.

Previous

[CSS] 여러줄의 멀티라인 생략기호 표시하는 방법, -webkit-line-clamp

Previous

이미지 스프라이트 방법시 장점 및 단점과 고려할 사항은?