사용되지 않은 CSS 정의를 식별하는 방법

414

프로젝트에서 사용되지 않은 CSS 정의를 식별하는 데 도움이되는 좋은 접근 방법이 있습니까? 많은 CSS 파일이 가져 와서 물건을 조금 정리하려고합니다.

css  performance  optimization  code-cleanup 
— jswanson
소스
"프로젝트에서"라고 말할 때 정확히 무엇을 의미합니까? 사용하는 환경에 따라 답변이 다를 수 있습니다.
— Ian Robinson
7
— ChrisWue
나는 꽤 잘하는 도구를 만들었습니다. 여기 내 코드 펜이 있습니다
— toddmo
나는 당신을 위해 그것을 할 수있는 스크립트를 썼습니다 : github.com/kgoedecke/unused-css-parser
— Kevin Goedecke

답변:

145

https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/ 에서 Firefox 확장 프로그램 Dust-Me를 살펴보십시오 .

— 데이비드 메디넷
소스
14
확장 파이어 폭스 4 작동하지 않습니다
— mvark
5
이 업데이트는 공개되지 않았으며 SitePoint 포럼에 요청한 후 플러그인의 성능이 저하 된 것처럼 보입니다.
— Mike B
3
작성자가 자신의 웹 사이트에 최신 버전의 Opera를 포함한 최신 버전을 게시 한 것 같습니다. brothercake.com
— Funka
2
불행히도 더 이상 작동하지 않습니다
— Jonathan
4
대체를 작성하고 귀하의 웹 사이트에서 여러 페이지를 크롤링합니다 (링크를 재귀 적으로 따라 가기) : jitbit.com/unusedcss
— Alex
259

Chrome 개발자 도구 에는 사용되지 않은 CSS 선택기를 표시 할 수 있는 감사 탭이 있습니다.

감사를 실행 한 다음 웹 페이지 성능에서 사용되지 않은 CSS 규칙 제거를 참조 하십시오.

여기에 이미지 설명을 입력하십시오

— 데릭 아 데어
소스
64
그것은 훌륭하지만 너무 나쁩니다. 페이지 그룹에서 실행할 수 없습니다 (그렇지 않으면 사용하지 않는 CSS 규칙이 불가피 할 수 있습니다)
— Damon
17
감사 도구를 실행하면 사용되지 않은 CSS가 표시되지만 사용 방법은 무엇입니까? 각 항목을 수동으로 검색하여 제거해야합니까?
— Timothée HENRY
19
현재 페이지 일뿐입니다. '현재 페이지에서 사용하지 않는 CSS의 2445 규칙 (83 %)'이 표시되어 있으므로 실제로 도움이되지 않습니다.
— chhantyal
8
항목을 확장하면 사용하지 않는 실제 규칙 목록이 나타납니다. 그러나 DOM을 즉석에서 변경하는 사이트에서는 도움이되지 않습니다.
— Howie
10
실제로 이것은 커버리지로 이동했습니다-감사로 이동-> 하단의 콘솔 옆에 메뉴 (3 개의 수직 점 유형 메뉴)가 있으며 거기에서 커버리지를 선택할 수 있습니다. 기록을 클릭하고 탐색하십시오.
— 그레이엄 리치
65

방금이 사이트를 찾았습니다 – http://unused-css.com/

좋아 보이지만 내 사이트 중 하나에 업로드하기 전에 출력 된 '깨끗한'CSS를 철저히 확인해야합니다.

또한이 모든 도구와 마찬가지로 스타일이없는 id와 클래스를 제거하지 않았지만 JavaScript 선택기로 사용되는지 확인해야합니다.

아래 내용은 http://unused-css.com/ 에서 가져 왔 으므로 다른 솔루션을 추천 해 주신 분들께 감사드립니다 .

Latish Sehgal 은 사용하지 않는 CSS 클래스를 찾아 제거하기 위해 Windows 응용 프로그램을 작성했습니다. 나는 그것을 테스트하지 않았지만 설명에서 html 파일과 하나의 CSS 파일의 경로를 제공해야합니다. 그런 다음 프로그램은 사용되지 않은 CSS 선택기를 나열합니다. 스크린 샷에서이 목록을 내보내거나 새로운 클린 CSS 파일을 다운로드 할 수있는 방법이없는 것 같습니다. 또한 서비스가 하나의 CSS 파일로 제한된 것처럼 보입니다. 정리할 파일이 여러 개인 경우 하나씩 정리해야합니다.

Dust-Me Selectors 는 사용하지 않는 CSS 선택기를 찾는 Firefox 확장 (v1.5 이상)입니다. 보고있는 페이지의 모든 스타일 시트에서 모든 선택기를 추출한 다음 해당 페이지를 분석하여 사용되지 않는 선택기를 확인합니다. 그런 다음 데이터를 저장하여 후속 페이지를 테스트 할 때 선택기가 발견 될 때 목록에서 벗어날 수 있습니다. 이 도구는 전체 웹 사이트를 거미줄로 만들 수 있지만 안타깝게도 작동시킬 수 있습니다. 또한 스타일을 제거한 상태에서 CSS 파일을 구성하고 다운로드 할 수 있다고 생각하지 않습니다.

Topstyle 은 CSS를 편집하는 많은 도구를 포함하는 Windows 응용 프로그램입니다. 많이 테스트하지는 않았지만 사용하지 않는 CSS 선택기를 제거하는 기능이있는 것 같습니다. 이 소프트웨어는 80 USD입니다.

Liquidcity CSS cleaner 는 정규식을 사용하여 한 페이지의 스타일을 확인하는 PHP 스크립트입니다. HTML 코드에서 사용할 수없는 클래스를 알려줍니다. 이 솔루션을 테스트하지 않았습니다.

Deadweight 는 CSS 범위 도구입니다. 스타일 시트 세트와 URL 세트가 제공되면 실제로 사용되는 선택기 및 "안전하게"삭제할 수있는 목록을 판별합니다. 이 도구는 루비 모듈이며 rails 웹 사이트에서만 작동합니다. 사용하지 않는 선택기는 CSS 파일에서 수동으로 제거해야합니다.

헬륨 CSS는 웹 사이트의 많은 페이지에서 사용되지 않는 CSS를 발견하기위한 자바 스크립트 도구입니다. 먼저 테스트하려는 페이지에 javascript 파일을 설치해야합니다. 그런 다음 청소를 시작하려면 헬륨 기능을 호출해야합니다.

UnusedCSS.com은 사용하기 쉬운 인터페이스를 갖춘 웹 응용 프로그램입니다. 사이트의 URL을 입력하면 CSS 선택기 목록이 나타납니다. 각 선택기마다 숫자는 선택기가 몇 번이나 사용되는지 나타냅니다. 이 서비스에는 몇 가지 제한이 있습니다. @import 문은 지원되지 않습니다. 새로운 클린 CSS 파일을 구성하고 다운로드 할 수 없습니다.

CSSESS 는 모든 사이트에서 사용하지 않는 CSS 선택기를 찾는 데 도움이되는 책갈피입니다. 이 도구는 사용하기 쉽지만 깨끗한 CSS 파일을 구성하고 다운로드 할 수는 없습니다. 사용하지 않는 CSS 파일 만 나열합니다.

— megaSteve4
소스
5
unused-css.com에서는 유료 회원이 아니더라도 CSS를 다운로드 할 수 없으며 최저 요금은 한 달에 29 달러부터 시작합니다. 나에게 서비스를 위해 조금 비싸 보인다
— georgiecasey
1
purifycss github.com/purifycss/purifycss 를 믹스에 추가 합니다. 무료이며 매우 인기가 있으며 (github의 별에 따라) 단일 페이지 앱과 함께 작동합니다.
— Dmitry Gonchar
21

Google Page Speed 는 당신을 위해 그렇게 할 수 있습니다 (실제로 어떤 CSS가 사용되지 않는지를 알려주는 것 이상으로 많은 일을합니다). FireFox에서는 FireBug 애드온으로 사용할 수 있습니다. 그런 다음 온라인 버전도 있습니다.

— 살만 A
소스
8

C # 의 더 나은 CSS 축소 기는 중복 스타일을 덤프합니다.

Dust-Me를 이것과 함께 사용하고 싶을 수도 있습니다.

현재 dust-me에 보이지 않는 내용이 있으면 필요한 스타일을 버릴 수 있습니다.

편집 : 링크가 끊어졌지만 archive.org에 페이지와 코드가 모두 있습니다.

— mjc
소스
7

CSS 사용법

실제로 사용되는 CSS 규칙을보기위한 Firebug 확장

CSS 사용은 사용하지 않는 CSS 스타일 규칙을 알 수있는 Firebug 용 확장 (Firebug를 설치해야 함)입니다. 사용하고 사용하지 않는 CSS를 식별합니다. 불필요한 부분을 제거 할 수있는 부분을 알려줍니다. CSS 파일을 가능한 한 가볍게 유지하려면이 애드온을 반드시 사용해야합니다.

— 솜 나트 물 루크
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.