중첩 된 divs와 CSS 의미

Question

나는 이것이 주관적 질문이라는 느낌을 가지고 있지만 아마도 이미 이것을 표준화하려고 시도한 interwebs의 어딘가에있을 것입니다. 그리고 나는 단지 그것을 인식하고 있지 않습니다. 여기있다).

참고 : .css 파일 자체 제작과 관련된 제안만을 찾고 있으므로 오류 또는 생략 된 요소 속성을 무시하십시오. 두 방법 모두 작동합니다. 그러나 개인적으로 .css B가 더 낫다는 것을 선호하지만 부모가 클래스 이름을 변경하는 중첩 된 div로 작업하는 경우 유지 관리가 어려울 수 있습니다.

예를 들어 div 컨테이너 안에 들어있는 페이지에 간단한 양식이 있다고 가정 해 보겠습니다. 이 양식에는 2 개의 입력란과 1 개의 텍스트 입력란 (제목, 메시지)이 있습니다. 더 "의미 론적으로 올바른"CSS는 다음과 같은 형태를 동반하는 것

:

<div id="contact"> 
<form action="/index.php/forms/contact" method="POST"> 
    <label for="txt_replyto">From:</label><input type="text" id="txt_replyto"></input> 
    <label for="txt_replyto">Subject:</label><input type="text" id="txt_subject"></input> 
    <label for="txt_replyto">Message:</label><textarea id="txt_msg"></textarea> 
</form> 

(.CSS A)

<style> 
div#contact { width: 350px; } 
div#contact form { width: 100%; } 
div#contact label { float: left; width: 20%; text-align: right; } 
div#contact input { margin-left: 1%; width: 79%; float: left; } 
div#contact textarea { margin-left: 1%; width: 79%; float: left; } 
</style> 

또는

(. CSS B)

<style> 
div#contact  { width: 350px; } 
div#contact form  { width: 100%; } 
div#contact form label { float: left; width: 20%; text-align: right; } 
div#contact form input { margin-left: 1%; width: 79%; float: left; } 
div#contact form textarea { margin-left: 1%; width: 79%; float: left; } 
</style> 

이런 종류의 항목에 대한 사전 정의 된 표준이 있습니까 (Google이 많이 양보하지 않았습니까?), 아니면 개인적으로 선호합니까?

편집 : Thar. Jack의 알림을 기반으로 업데이트 됨 :)

Answer 1

"사전 정의 된 표준"유형이 있는지 여부는 알 수 없습니다. 그러나, 나의 CSS 전부에서 나는 항상 가 덜이라는 사고 방식을 따른다. 이것이 내가 권하고 싶은 것입니다 : 당신의 결과를 얻기 위해 최소한의 양질의 깨끗하고 수용 가능한 코드를 작성하십시오.

두 가지 옵션은 쉽게 읽을 수 있으며 변경해야 할 때/쉽게 변경 될 수 있으며 의미 상 정확합니다. 나는 그 시점에서 개인적인 선호에 이르게된다고 생각합니다. 두 번째 옵션이 눈에 더 정확하다고 생각되면 함께하십시오.

사이드 노트 :이 예제에서는 옵션 A를 사용하여 동일한 작업을 수행하기 위해 22 바이트를 저장합니다.이 작업은별로 좋아 보이지 않을 수도 있지만 더할 수 있습니다.

Answer 2

어쩌면 나는 너무 철학적이지만, 두 스타일 시트 모두 동일한 결과를 산출한다면 브라우저의 관점에서 의미 상 동일합니다.

우리가 인간의 가독성을 말하면, 나는 보통 "적은 코드가 더 나은 코드"원칙을 적용합니다. 나는이 경우에 하나를 생각할 수 없다.