[class * = "custom-style-"]과 ".this-class-is-default-style"사이에는 무엇이 더 비쌉니까?

Question

I는 다음과 같이, 각각 동일 코드의 약 6-7 라인을 가지고에 대한 다소 비슷한 스타일을 가지고 :

custom-style-1 { 
    font-size: 12px; 
    color: red; 
    //Here come the specifics! 
} 

custom-style-2 { 
    font-size: 12px; 
    color: red; 
    //Here come the specifics! 
} 

custom-style-3 { 
    font-size: 12px; 
    color: red; 
    //Here come the specifics! 
} 
.. 
.. 

그래서 내가 쓴 각 클래스에서 반복 속성을 제거 :

[class*="custom-style-"], 
[class*="custom-style-"] { 
    font-size: 12px; 
    color: red; 
} 

을

.this-class-is-default-style { 
    font-size: 12px; 
    color: red; 
} 

그냥 HTML 내에서 <div class="{list-here}">에 추가 :

하지만 그때는 또 다른 클래스를 작성하지 왜 생각했다.

렌더링 시간면에서 어느 것이 더 비쌉니까? 또한, 유일한 유연성이 아닌 방법 사용으로 인한 유연성 문제 또는 단점이 있습니까?

Answer 1

두 번째 방법 (class*=...없이 특정 클래스 사용)은 브라우저가 모든 클래스 속성에 대해 포함 검색을 수행 할 필요가 없으므로 아마 더 나을 것입니다. 그러나 대부분의 경우 성능 게인은 무시할 수 있어야합니다. 브라우저는 일반적인 경우로 css 클래스를 찾도록 최적화되어 있습니다.

두 번째 방법에 대한 더 중요한 점은 요소에 원하지 않는 클래스를 적용 할 가능성이 낮아지기 때문에 안전입니다. custom-style-의 이름이 매우 특별하고 고유하지 않은 경우 나중에 다른 오류가 발생할 수있는 CSS 파일의 다른 많은 클래스 이름과 유사 할 수 있습니다.

첫 번째 방법을 선택하는 경우에도 BoltClock : [class^="custom-style-"], [class*=" custom-style-"] {...}에 의해 지정된 the method을 사용하여 중복 가능성을 최소화하고 클래스 이름이 목록의 시작 또는 중간에있을 수 있다고 생각하면 좋습니다.