스타일 시트의 적용과 속도에 대해서 질문 드려요~~~ 너무 궁금해요

Question

스타일 시트의 적용과 속도에 대해서 질문 드려요~~~ 너무 궁금해요

조회수 710회

css

style

sheet

stylesheet

0

싫어요

종종 html과 함께 css스타일 시트를 구현하다보면 div혹은 페이징 작업을 할때
css가 적용되는 순서에 대해서 궁금했어요
css가 적용되는것이 위에서 아래로 구현되는것 인가요?
페이지의 스타일 시트도 큰틀부터 잡고 세세한 부분에 스타일을 넣는게 페이지 불러오는데 더 효율적인가요?
예를 들자면 하나의 div를 구현할때 div의 position을 지정해 준 뒤에 div의 border와 padding, margin을 지정해 준 뒤에 그 내부에 위치할 요소들에 대한 스타일을 text-align등 으로 구현해주는게 효율적이지 않을까 해서요.
아니면 스타일 시트가 구현 속도에 영향을 주지 않을까요?

(•́ ✖ •̀)
알 수 없는 사용자

댓글 입력

score 3 · Accepted Answer

CSS 프로퍼티가 적용되는 순서

크게 CSS 우선순위 라고 이해하고 이야기해보면 아래와 같습니다. 아래의 정리는 이해하기 쉽게 요약한 것이고, CSS 우선순위를 확인하여 그 원리를 알 수 있습니다.

먼저 선택자 또는 !important선언에 따라 우선순위가 다릅니다. 대괄호 안의 점수는 우선순위 포인트라고 이해합니다.

!important 〉 #id {100} 〉 .class {10} 〉 tag {1} 〉 * {0}

또, 세밀하게 작성한 선택자가 우선순위가 높습니다.

.tree .apple { color: blue; } /* 우선순위 ↓ */
.tree .fruits .apple { color: red; } /* 우선순위 ↑ */

또한 나중에 선언된 프로퍼티가 우선순위가 높습니다.

.apple {
    color: blue; /* 우선순위 ↓ */
    color: red; /* 우선순위 ↑ */
}

더 정확한 우선순위의 정보는 CSS 우선순위를 확인하세요.

CSS 프로퍼티의 순서가 퍼포먼스에 미치는 영향.

이것 먼저 말씀드리면, 프로퍼티 순서는 퍼포먼스 성능에 크게 영향을 주지 않습니다. (적어도 제가 아는 한은요.) 많은 경우, 프로퍼티의 순서를 균일하게 하는 이유는 코드 가독성의 측면에서 더 효율적으로 협업할 수 있기 때문입니다.

하지만, 순서 이외에는 css를 통해서 애니메이션을 사용할 때는 성능에 크게 영향을 줍니다. Google에 검색해보면 크게 Reflow, Repaint를 하는 요소들을 피하거나 JS를 적절히 사용하라고 권합니다. 또한 불필요하게 선택자를 복잡하게 사용하지 않음으로 성능을 향상 시킬 수 있다고 합니다. 아래와 같은 식으로 말이죠.

/* BAD */
.nav-global .nav-item .nav-link .ic-home {
    fill: black;
}

/* GOOD */
.nav-global .ic-home {
    fill: black;
}