CSS 셀렉터 스타일

Question

빠른 검색으로 여기에 아무 것도 보지 못했습니다.

다음은 쓸 CSS 선택기의 예입니다.

div#container div#h h1 { /* styles */ } 
div#container div#h ul#navi { /* styles */ } 
div#container div#h ul#navi li.selected { /* styles */ } 

나는 모든 CSS를 씁니다. 이렇게하면 스타일이 떠 다니는 것을 막을 수 있고 기술적으로 동일한 클래스 이름을 쉽게 다시 사용할 수 있습니다. 예를 들어 사이트 전체의 여러 요소에서 .selected를 사용할 수 있습니다.

스타일이 여러 요소에 사용되지 않는 한 class/id 앞에 요소 유형 (div, ul, etc)을 지정합니다. id를 사용하기 전에 요소를 지정하기도합니다. 왜냐하면 CSS를 읽을 때 요소를 쉽게 알 수 있기 때문에 오직 하나의 id 만있을 것입니다. 예를 들어 배트에서 바로 알 수 있겠지만 # 예는 글꼴 스타일이 기울임 꼴 일 가능성이 큽니다.

이것은 CSS 작성에 대한 질문이 아니며 선택자 작성에 관한 내용입니다.

나는 수년간 그것을 사용해 왔기 때문에 나는이 접근법에 대한 의견을 듣고 싶다. 나는 나의 검소함을 재평가하고있다.

주제에서 다소 떨어져 있지만 셀렉터 라이브러리 (예 : jQuery)와 같은 셀렉터도 작성합니다. 비록 jQuery의 내부를 조사해 보았지만 ID가있는 요소를 지정하는 데 성능 문제가 있는지를 확인하지 못했습니다.

Answer 1

정말 선택기가 무엇인지에 달려 있다고 생각합니다.

거의 모든 사이트에는 글꼴, 텍스트 색상, 링크 색상/호버, 줄 간격 등 사이트를 "스킨"하는 하나 이상의 스타일 시트가 있으며 이러한 선택기가 매우 구체적이지 않도록하려는 경우 . 마찬가지로 많은 페이지에서 재사용되고 항상 동일하게 보일 필요가있는 구성 요소 나 요소가있는 경우 - 바로 여기에 태그를 넣는 것처럼 - 그러면 ID를 기반으로 셀렉터를 사용하면 유지 관리가 어려워집니다.

특정 페이지의 특정 요소를 참조하는 경우 항상 선택기에서 ID를 사용합니다. 규칙이 다른 규칙과 충돌하여 규칙이 작동하지 않는 이유를 알아내는 것보다 실망하지 않는 방법은 없습니다. 규칙이 모든 것이 수업 일 경우 많은 일이 발생할 수 있습니다. 반면 ID의 목적은 고유해야하기 때문에 (#container #h) ID 중첩이 중복되는 것 같습니다. 동일한 페이지에 동일한 ID를 가진 요소가 두 개 이상있는 경우 모든 종류의 문제가 발생할 수 있습니다.

선택자가 표현되는 "구조"에 대해 약간의 아이디어를 제공 할 때 CSS를 약간 더 쉽게 이해할 수 있지만 솔직히 우려의 분리라는 생각에 반대한다고 생각합니다. #navi은 완전히 합법적 인 이유로 #h 외부로 옮겨 졌을 수 있습니다. 이제 누군가는 #navi에 대한 스타일 시트를 업데이트해야합니다.

Darrell이 주관적으로 지적했으나 내 두 센트입니다.

Answer 2

질문이 약간 주관적인 동안 나는 당신의 생각에 동의한다고 말해야 만합니다. 코드를 읽을 때 선택기가 더 명확 해지기 전에 요소를 정의하는 것이 좋으며 오류가 발생하기 쉽습니다.