STUDY/CSS

css 선택자 성능체크

수밤바 2015. 4. 16. 12:10
728x90

css작성방법중 다른의견이 있었다

내가 사용하는 방법은

.a {}

.a .a-b {}

.a .a-b .a-b-c {}

.a .a-b .a-b-c li {}

.a .a-b .a-b-c li a {}

.a .a-b .a-b-c li a span {}

.a .a-b .a-b-c li a .b  .b-a {}


이런식으로 트리구조를 갖춘 방법이였는데

클래스를 찾느라 성능이 떨어진다는 의견이 있었다

각 클래스의 이름을 특이하게 지어서 최대 4개가 넘지 않도록 해야 한다는 의견이였다.


.a {}

.a-b {}

.a-b-c li a {}

.b  .b-a {}


사실 성능에대해 생각해보진 못했다

클래스에 element 를 쓰면 전체 페이지의 elem를 찾느라 성능이 느려진다는 것은 알고있었으나

과연 트리구조로 작업을 하면 성능이 느려질까?

막연한 생각으론 더욱 빨리 찾을수 있을것 같은데..

성능과는 별개로 가독성도 훨씬 좋아져 브라우저가 클래스를 찾는데 걸리는 시간은 별개로 작업자가 클래스를 찾는시간은 훨씬 줄어들것이다. ㅜㅜ 아무튼..




'STUDY > CSS' 카테고리의 다른 글

rem 계산기  (0) 2019.07.05
css로 요소 개수 알아내기  (0) 2019.07.05
css animation 값 유동적으로 적용  (0) 2019.07.05
text-ellipsis  (0) 2015.02.10
font-face font변환  (0) 2013.11.07