왜 CSS에 중첩되지 않습니까?

Question

CSS를 구조화하는 것이 좋은 방법 같아 보입니다. 이 일을 불가능하게하는 경우가 있습니까?

나는 다음과 같은 것을 생각하고 :

table#myTable{ 
    thead{ 
     color:red; 
    } 
    tbody{ 
     color:blue; 
     td.title{ 
      background-color: green; 
     } 
    } 
} 

Answer 1

을하기 때문에 아마 아이디어를 생각 아무도를 작성하지 사양의 시간에, 또는 충분하지 않은 사람들은 도움이 될 거라 생각 했어요.

당신은하지만, SASS를 사용할 수 있습니다 : http://sass-lang.com/

예 구문 :

table.hl 
    margin: 2em 0 
    td.ln 
    text-align: right 

li 
    font: 
    family: serif 
    weight: bold 
    size: 1.2em 

Answer 2

내가 을 대답 할 수없는 CSS는이 기능을 사용하지 않는 이유. LESS (http://lesscss.org/)와 같은 시스템이 있습니다.이 시스템을 사용하면 이와 같은 구조를 작성한 다음 일반 CSS로 '컴파일'할 수 있습니다. LESS에서

중첩 예 : (링크)에서

중첩 규칙 오히려 더 적은에서, 상속을 지정하는 긴 선택 이름을 구성하는 당신보다 다른 선택기 내부 단순히 둥지 선택기 수 있습니다. 이렇게하면 상속을 명확하게하고 스타일 시트를 더 짧게 만들 수 있습니다.

#header { 
    color: red; 
    a { 
    font-weight: bold; 
    text-decoration: none; 
    } 
} 

Answer 3

CSS는 설계되고 체계화 된 방식으로 지원됩니다.

그러나이 방법으로 코드를 작성한 다음 실제 유효한 CSS (예 : LessCSS)로 처리 할 수있는 CSS 전처리 기가 있습니다.

Answer 4

당신은 여전히 ​​당신의 문서 구조에 따라 선택기를 들여 수

산발적 배경 - 이미지보다

body { 
    font-size: 1.4em; 
    color: #666; 
} 

    #Header { 
     /* stuff */ 
    } 

     #Header ul { 
      /* stuff */ 
     } 

      #Header il { 
       /* stuff */ 
      } 

    #Content { 
     /* stuff */ 
    } 

기타 : URL을 (''); 속성은 일반적으로 매우 오래 실행되지 않으며, 개발 중에 이것은 당신이 정리 유지하는데 도움이 될 수 있습니다. 나는 종종 Textmate가 내 스타일 시트를 다시 형식화하도록하기 때문에 개인적으로 들쭉날칠 수없는 CSS를 선호합니다.