CSS 이름 내에 계층 구조를 포함해야합니까?

CSS 이름 내의 계층 구조를 포함하는 측면에서 '우수 사례'란 무엇입니까?CSS 이름 내에 계층 구조를 포함해야합니까?

<div class="foo"> 
<div class="$className2"> 
<div class="$className3">123 
</div> 
</div> 
</div>

한다 $ className2가 접두어로 'foo-'를 포함, 및 $ className3가 접두어로 모두 'foo-'와 $ className2 포함 : EG 우리는 다음과 같은 HTML이 있다고 가정 :,? 또는 부모 클래스 이름이 하위 클래스 이름에 포함되지 않아야합니까?

출처

2011-09-23 archmeta

매우 간단하게 클래스 이름을 재사용 하시겠습니까? 아니면 같은 종류의 구조가 아닌 곳에서도 클래스 이름을 재사용 하시겠습니까? 그렇지 않으면 부모에 의해 그것을 제한 할 필요가 없습니다. 그러나 그렇다면 부모 노드 선택자를 포함시켜 어떤 하위 요소가 무엇인지 명시 적으로 표시하는 것이 좋습니다.

출처

2011-09-23 18:53:43

상위 클래스의 이름을 포함 할 필요가 없습니다. CSS 선택기는 필요한 모든 상위 서식을 처리합니다.

클래스는 사용중인 콘텐츠 유형을 설명해야합니다. 예를 들어,

<div class="sidebar"> 
<div class="error"> 
</div> 
</div>

사이드 바 클래스에 관계없이 오류 클래스와 관련된 서식을 지정하려고 할 가능성이 있습니다. 사이드에 고유 한 오류 클래스에 대한 서식을 원하는 경우, CSS를 선택기에 대한 것을 처리 할 수있는 당신

.sidebar > .error

또는

나는 대부분의 시간을

.sidebar .error

출처

2011-09-23 18:55:36

한 가지 자식 클래스에 밑줄을 앞에 추가하는 것입니다 - 나는 당신의 예에서 HTML에 대해 다음 CSS를 사용합니다 :이 경우

.foo { ... } 
.foo ._$className2 { .. } 
.foo ._$className3 { .. }

는 ".foo"는 "foo는 구성 요소"같은 포장 될 것이다. 그리고이 래퍼 안에서만 사용되는 모든 자식 클래스 (자체적으로 의미가 없음)에는 밑줄이 붙습니다. 이렇게하면 CSS를 깨끗하게 유지할 수 있고 페이지의 모든 요소에 요소를 적용할지 또는 특수한 상황에서 클래스를 표시할지 여부를 쉽게 확인할 수 있습니다.

출처

2011-09-23 19:13:39 Niko

CSS 이름 내에 계층 구조를 포함해야합니까?

답변

관련 문제