css 코딩 시 자손 트리와 후손 트리의 성능 질문드립니다
루나
관리자 페이지를 코딩하면서 생겼던 이슈 중에 하나가개발자가 개발을 입히다가 css가 겹치는 경우가 있었습니다
예를 들면table class=tabletrtdinput type=radio //td/tr/table이런 구조를 가지고 있을 때
css로.table tr td { border: 1px solid gray; }이렇게 선언했을 때
개발을 입히기 전엔 문제가 없었으나단넷이라는 플랫폼을 거치면
table class=tabletrtdtabletrtdinput class=radio //td/tr/table/td/tr/table
이렇게 td 안에 table 태그가 입혀지면서css가 두 군데 적용됩니다.
그래서 css를.tabletrtd { border: 1px solid gray; }
이렇게 table이라는 클래스의 자손인 tr의 자손인 td에만 적용되게 했더니 문제가 해결됬습니다여태까지 css는 특별한?특별한 경우 아니면 후손 트리로 작성했는데요
이번 이슈보면서 웬만하면 자손으로 작성하려 하는데요
이렇게 자손으로 작성하면 브라우저 성능상에 미비하나마 영향이 있을까요?그리고 자손 방식과 후손 방식 중 어느 것이 더 성능에 좋은지 알고 싶습니다 (__)
-
횃눈썹
큰 문제는 없습니다. 다만 자식선택자가 조금 더 느리다고는 알고있지만 큰 차이 느끼지 못하실건데요..
모든걸 다 자식선택자로 작성하시면 나중에 좀 더 복잡해질 경우도 있을거에요.
개발이 들어가는 table-cell 에는 저는 보통 단순 텍스트외의 다른 추가적인 내용이 많은것이 들어갈 경우에는
블럭요소로 개발이 붙는 영역을 잡아주고 그 안에서 style을 지정합니다..