CSS 스프라이트, 클래스 이름 지정

Question

어느 것이 더 적합합니다.

(a) 좌표를 선택하기 위해 다른 클래스와 항상 사용되는 공통 클래스 "스프라이트"를 갖거나 단순히 클래스 목록에 동일한 속성을 지정하려면?

(a) 코드가 적어지고 속도가 빨라지므로 더 이해가됩니다. 단점은 이것이 (이론적으로) 유일한 CSS 개발자가 HTML과 상호 작용할 필요성을 도입한다는 것입니다.

.sprite { background: url('[..]') no-repeat; display: block; } 
.sprite.a { background-position: [..]; } 
.sprite.b { background-position: [..]; } 

(b)에

.a, 
.b { background: url('[..]') no-repeat; display: block; } 
.sprite.a { background-position: [..]; } 
.sprite.b { background-position: [..]; } 

가 난 아무것도 잊고 건가요? 어느 것을 사용해야합니까?

Answer 1

sprite 클래스를 사용하여 배경 이미지 (그리고 모든 스프라이트가 같은 크기를 갖는 경우 크기와 같은 다른 일반적인 속성)를 선택한 다음 배경 위치 만 지정하는 추가 클래스를 선택합니다.

이것은 항상 클래스 이름을 반복 할 필요가 없기 때문에 스타일 시트를 읽기 쉽고 작게 유지합니다.