[css] css selector(선택자) 종류, css 성능에 미치는 영향

 

 목차

• selector(선택자)종류
• selector가 css 성능에 미치는 영향

 

CSS selector(선택자)의 종류 , css 성능에 미치는 영향

 

 

1. selector(선택자) 종류

---

일단, Steve Souder 의 Even Faster Websites에서 인용하는 css선택자 순위는 아래와 같습니다.

• id - 공통으로 사용불가 한페이지당 1개가 존재해야 합니다.
  • 사용 예: #selector 
• class - 공통으로 사용 가능하며 스타일이 같은경우 같은 클래스로 한번에 스타일링 할 수 있습니다.
  • 사용 예: .selector
• tag 태그선택자 - <p> <strong> 등등 태그 이름을 선택자로 쓸 수 있습니다.
  • 사용 예: p {...}  strong {...}
• sibling 인접선택자 -  특정 태그의 [바로 다음] 형제 요소를 선택 합니다. + 를 사용합니다. 
  • 사용 예: html <div>...</div><p>...</p>  / css div+p{...}
• child 자식선택자 - 특정 태그 안에 있는 요소를 선택 하는데. 1depth 아래 단계를 선택할 수있습니다.  예를 들어 부모님이 부모 선택자라면 자식선택자로는 1세대 밑인 저를 선택할 수 있습니다.  > 를 사용합니다.
  • 사용 예: html <ul><li>...</li></ul> / css ul > li {...}
• descendant 자손선택자 - 특정 태그 안에 있는 요소를 선택하는데 depth에 상관없이 선택할 수 있습니다. 예를들어 부모님이  부모선택자라면 자손선택자로는 저를 포함해서 저의 형제, 형제가 낳은 자식(손주) 등등 부모님 핏줄이면 다 선택 될 수 있습니다.  공백을 사용합니다. 

<div>
    <ul>
        <li>....</li>
        <li>....</li>
        <li>....</li>
    </ul>
    <ul>
        <li>....</li>
        <li>
        	<a>...</a>
        </li>
    </ul>
</div>

<style>
    div ul a {...}
    div a {...}
    div li {...}
</style>

• universal(*) 전체 선택자 - 모든 태그를 선택하는 선택자 이다.
• attribute([type='text']) : 속성 선택자 - 속성 값을 갖고있는 form 요소나 button 등에 사용할 수 잇습니다. (예: input[type="text") )
  • .selector[attr=val]:  속성  그리고 값이 100% 일치할때 선택됩니다.
  • .selector[attr^=val]: 속성의 값이 val로 시작할때 선택 됩니다.
  • .selector[attr$=val]:  속성의 값이 val로 끝날때 선택됩니다.
  • .selector[attr*=val]: 속성 값에 val이 포함되었을때 선택됩니다.
• Pseudo-classes/-element 가상선택자: 요소 선택자 뒤에 붙여서 규칙이 존재하거나 특정한 상황에 스타일을 구현할때 주로 사용합니다. 

<div class="box">
    <h1>main text</h1>
    <p>description1</p>
    <p>description2</p>
    <p>description2</p>
    <button type="button">버튼</button>
</div>

/* nth-child
            nth-child는 1부터 시작하며  괄호안에 몇번째 인지 숫자나 홀수는 2n+1 이런식으로 식을 입력합니다.
        */
        .box :nth-child(2) {
            color: red;
        }

        /* nth-of-type
            nth-of-type은 자신과 동일한 요소들만 골라지며 그중에서 몇번째 순서인 요소를 고를때 사용됩니다.
        */
        .box p:nth-of-type(2) {
            color: blue;
        }
        
        /* first-child / last-child
           특정 부모의 첫번째, 마지막 자식 요소를 선택 합니다. 
           first-of-type / last-of-type
           태그
        */
        .box p:first-child {
            /* box > h1이 첫번째 자식이기 때문에 적용 되지 않습니다. p가 첫번째 자식이 아닙니다. */
            background-color: yellow;
        }

        .box p:first-of-type {
            /* box 안에 p 타입 중 첫번째 요소가 선택됩니다. */
            background-color: yellow;
        }

        .box p:last-of-type {
            /* box 안에 p 타입 중 마지막 요소가 선택됩니다. */
            background-color: orange;
        }

        .box button:last-child {
            /* box > button이 마지막 자식 이므로 적용됩니다. */
            background-color: orange;
        }

        /* ::before, ::after */
        /* 해당 요소 안에 시작 위치에 ::before을 이용해서 추가할 수 있습니다. */
        .box::before {
            content: '';
            display: block;
            width: 30px;
            height: 30px;
            background-color: pink;
        }

        /* 해당 요소 안에 시작 위치에 ::after 이용해서 추가할 수 있습니다. */
        .box::after {
            content: '';
            display: block;
            width: 30px;
            height: 30px;
            background-color: green;
        }

 

 

2. selector(선택자)가  css 성능에 미치는 영향 

---

selector(선택자)를 구조화하는 방법에 따라서 브라우저가 css를 매칭하는데 필요한 속도가 달라집니다.

브라우저 셀렉터는 오른쪽 -> 왼쪽 으로 읽기 때문에 자식 혹은 자손에서 부모로 거쳐서 올라가게 됩니다.

 

예를 들어서 header ul {...}가 있으면 ul을 모두 찾고 그다음에 header 안에 있는 ul을 찾습니다. 

header ul li a{...} 가 있다면 위와 같은 방법으로 찾아갈 것입니다. depth가 깊어지면 깊어질 수록 매칭 비용이 증가하지만,

선택자를 매칭 시키는 속도는 굉장히 빠르므로 굳이 걱정할 필요는 없다고 합니다. 

 

즉 ,정리해보자면 selector(선택자)의 사용은 성능에 미치는 영향은 신경을 쓰지 않아도 무방할 정도로 극히 미미하다고 합니다. 

 

다만 미미하다고 해서 4depth, 5depth 로 작성하거나 * 선택자를 난무하거나 하는 상황은 속도보다는 작업편의, 협업시에 문제를 야기 시킬 수 있습니다.   협업과 추후 유지보수를 보다 효율적으로 하기 위해서 팀내 가이드 혹은 CSS방법론 등에 맞게  CSS selector(선택자)를 최적화 하는데 노력은 반드시 필요하다고 합니다!

 

 

 

참고글:

https://yceffort.kr/2021/03/improve-css-performance#css-%EC%84%A0%ED%83%9D%EC%9E%90%EC%9D%98-%EC%86%8D%EB%8F%84%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C-%EA%B1%B1%EC%A0%95%ED%95%A0-%ED%95%84%EC%9A%94%EB%8A%94-%EC%97%86%EB%8B%A4

 

 

 

잘못된 정보에 대한 피드백은 언제나 환영입니다  (´▽`ʃƪ)♡