문제
우리는 새로운 요소가 우리 시스템에 추가 될 때마다 몇 년 동안 계속 성장하는 몇 가지 대규모 CSS 파일을 가지고 있으며,이 파일을 참조하는 JSP 페이지 (다른 JSP 페이지 등을 추가로 포함 함).
우리는 더 이상 사용되지 않고 중복되는 많은 규칙이 있다는 것을 알고 있습니다.
새로운 도구가 계속 나옵니다. 디렉토리를 분석하고 CSS 규칙을 정리하고 최적화하는 데 도움이 될 수있는 도구가 있습니까?
해결책
까다로운 작업입니다 ... 특히 HTML DOM 컨텐츠가 어떤 식 으로든 즉시 생성되는 경우.
Dust-Me-Selectors 플러그인은 도움이되지만 페이지별로는 많은 선택기가 사용되지 않지만 NEC는 유효하지 않습니다.
청소에 도움이 된 몇 가지 트릭이 있습니다.
하나씩, 선택기가 사용되는지 확인하기 위해 즉시 발견 할 수있는 끔찍한 스타일을 삽입하십시오. 예를 들어
border:6px dashed #ffaacc;
padding:12px;
거대한 점선 핫 핑크 테두리로 렌더링하는 것은 ... "활성"선택기입니다. 대부분의 사이트/앱을 보지 않고 서핑 할 수 있다면 "죽은"것일 수 있습니다.
(CSS 코드가 "생성 된"경우 한 번에 다양한 색상으로 테스트하도록 최적화하고 생성 된 컨텐츠를 사용하여 선택기의 "ID"를 준비 할 수 있습니다)
생성 된 CSS 시스템을 사용하는 경우 또 다른 옵션 ... SAY를 설정하는 선택기에 최종 속성을 추가하는 것입니다 ... 생성 된 URL이있는 배경 이미지입니다. 예를 들어
#selector_a > .foo{
...
background-image:url('selectortest/id_123.png');
}
#selector_b .bar{
...
background-image:url('selectortest/id_124.png');
}
그런 다음 사이트/앱을 잠시 서핑 한 다음 HTTP 이미지 요청에 대한 웹 로그를 확인하십시오 ... 로그에서 요청되지 않은 생성 된 이미지 URL에 대해서는 "죽은"선택기를 찾았을 것입니다.