문제

우리는 새로운 요소가 우리 시스템에 추가 될 때마다 몇 년 동안 계속 성장하는 몇 가지 대규모 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에 대해서는 "죽은"선택기를 찾았을 것입니다.

다른 팁

거기 있습니다 먼지-선택자 Firefox 용 플러그인은 브라우저에서 렌더링 된 페이지를 통해 디렉토리를 통해가 아니라.

셀렌 CSS 선택기를 통해 페이지 테스트 및 선택 요소를 자동화 할 수 있습니다. 사이트 전체에서 일치를 축적하면 타의 추종을 불허하는 항목을 식별 할 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top