CSS 클래스 및 ID에서 html 태그를 기억하는 것이 좋습니다.

Question

태그 이름을 선택자 안에 보관하는 경우. 예를 들어

는 : ID와 클래스가 이미 어떤 요소가 참조되는 입력 알 수 있기 때문에

#divMainContentBody { … } 

.spanImportant { … } 

이, 스타일 시트 및 마크 업 사이를 전환 할 필요성을 최소화 할 수 있습니다.

내가 this book 또한 http://answers.oreilly.com/topic/647-how-to-write-efficient-css-selectors/

가 필요하지 않은 ID 선택자

Because there is only one element in the page with a given ID, there’s 

이 조언을 발견

---

는 @ 후 Guffa의 대답 업데이트

추가 한정자를 추가 할 필요가 없습니다. 예를 들어, DIV #toc은 이 아니므로 #toc로 간소화해야합니다.

는 사용 사례를 구체적으로 클래스 선택기

Instead of qualifying class selectors for specific tags, extend 

클래스 이름을 수식하지 마십시오. 예를 들어 LI .chapter를 .li-chapter로 변경하거나 더 나은 .list-chapter로 변경하십시오.

Answer 1

이 식별자를 앞에 붙이는 것은 hungarian notation이라고하며, 사용에 결정적인 식별자의 측면에 사용됩니다.

대부분의 경우 요소 유형이 CSS의 식별자로 충분할만큼 중요하지 않다고 생각합니다. 이름을 잘 선택하면 이미 중요한 정보를 결정할 수 있습니다.

요소가 중요한 경우 식별자에 넣는 대신 선택기에서 사용할 수 있습니다. 선택기가 실제로 해당 요소로 작동 할 수 방법 :

내보기에서

div#MainContentBody { ... } 

span.Important { ... } 

Answer 2

,이 위치에 의존하는 스타일을 사용하거나 위치 기반 패턴으로 당신의 CSS를 "추세"로 우수 사례하지 않을 수 있습니다 (즉, "this는 span에만 사용할 수 있습니다", "div에만 해당됩니다") HTML 요소와 CSS 클래스간에 1 : 1 관계를 만들어야합니다.

CSS 클래스는 OO 프로그래밍과 마찬가지로 적절하게 명명되었으므로 CSS 클래스를 서로 상속 할 수 있습니다. 이를 위해 더 나은 접근 방법은 의미있는 명명 규칙 (이미 제시 한대로)을 유지하는 것입니다.하지만 모듈화되고 확장 될 수있는 클래스를 작성하십시오.

위의 결과는 스타일 시트의 동작을 계속 무시하지 않고도 다양한 방법 및 장소에서 하나의 클래스를 사용할 수 있다는 것입니다. 이렇게하면 스타일을보다 예측 가능하게 유지하고 CSS를 유지 관리 할 수 ​​있습니다.

http://wiki.github.com/stubbornella/oocss 또는 SlideShare에 대해 자세히 알아보십시오.