사이트마다 CSS 속성들을 얼마나 사용했는지를 알 수 있는 프로그램이 있다.
크롬에 확장프로그램을 받아서 볼 수 있다.
사용 예
테스트 사이트로 우리나라에서 많이 사용하는 포털중에 하나 네이버를 예를 들겠다.
네이버에서 이 프로그램을 실행했을 경우 나오는 화면이다.
css를 불러오는것을 체크를 하고 START DIGGING 버튼을 누르면된다.
여기서 주의할점은 CSS안에서 @import 한것은 나오지 않는다.
위의 그림처럼 속성을 얼마나 사용했는지 빈도수를 알려준다.
위의 화면은 Specificity의 계산과 또 전체 길이를 알려주는 화면이다.
CSS를 얼마나 불러오고 사용했는지를 알 수가 있다.
필자가 듣기로는 최대 불러오는 length 길이가 다섯개가 제일 좋다고는 들었다.
유지보수를 위해서 좋다고 들어서 어떤 것이 정확한 정답은 모르겠다.
그렇지만 생각을 해볼 때 확실히 많이 불러오는 것보다는 적게 불러오는 것이 좋고
어떤 페이지든 간에 CSS 속성을 변경을 하려고 할 때 짧을 수록 빨리 바꿀 수 있다는 점이 있기 때문에…
적게 불러오는 것이 틀린 말은 아닌거 같다.
CSS Dig 다운받기
공식 홈페이지:http://cssdig.com/
크롬 확장프로그램 바로 다운받으러 가기
링크를 타고 들어가면 위의 그림처럼 나올것이다.
Chrome에 추가를 해서 넣으면 바로 주소창 옆에 아이콘이 생길것이다.
그러면 위에서 설명한거처럼 어느 사이트 들어가서 CSS Dig를 실행하면
CSS Selector 길이와 속성 빈도수를 확인해볼 수 있다.
참고 사이트
CSS Dig는 아래 두가지를 이용해서 만들었다.
Specificity Calculator
이 사이트에가면 바로 속성값을 넣어서 실시간으로 확인해 볼 수있다.
Calculating a selector’s specificity
답글 남기기