들여 쓰기를 사용하여 CSS를 읽기 쉽도록 만드시겠습니까? 난 항상 다음과 같은 CSS 구조로 자신을 안내했습니다

Question

(CSS에서 부모와 자녀가 더 식별하기) :

#nav { } 
#nav li { } 
#nac li a { } 

이 구조하는 것은 부모와 아이가 누구 명확하게 알려줍니다.

최근 기사 (나는 CSS 트릭이라고 생각합니다.)에서 누군가 CSS가 오른쪽에서 왼쪽으로 읽혀집니다. 따라서 더 느린 태그가 많을수록 (때로는 모든 단일 태그를 쓸 필요가 없다고 생각합니다.)

그래서 이런 식으로 뭔가 할 수있다 :

# 특수 링크가 #nav의 자식

#nav { } 
#special-link { } 

. 나는 이것이 단순한 스타일 시트에서 큰 문제가 아니라는 것을 알고 있습니다. 그러나 큰 것에서 나는 부모와 자식이 누구인지 혼란 스러울 것입니다.

또 다른 해결책은 다음과 같습니다

#nav { } 
    #special-link { } 

들여 쓰기이 CSS의 딜레마 해결하려면 어떻게

?

Answer 1

내가 조기에 최적화하고 있다고 말하고 싶습니다. 나는 같은 글을 읽었고 결국이 가이드 라인은 컴퓨터가 보닛 아래에서 훨씬 적은 전력을 소비했을 때 10 년 전에 작성되었다고 말합니다. 자, 이제는 JavaScript를 사용하는 것과 비교하여별로 중요하지 않다고 생각합니다. CSS는 번개처럼 빠르게 진행됩니다. 읽을 수있는 옵션을 선택하십시오.

가독성을 희생하지 않고 더 빠르게 만들 수있는 방법 중 하나는 크리스 코 이어 (Chris Coyier)가 말했듯이, 어린이를위한 후손을 피하기위한 것입니다. 따라서 #nav li a 대신 #nav > li > a을 사용하십시오. 이렇게하면 속도가 향상되고 실제로는 더 많은 정보가 전달됩니다.

Answer 2

체크 아웃 CleverCSS - 매우 읽기 쉽다는 것을 알았지 만, 그 이유는 파이썬 개발자이기 때문일 수 있습니다. 또한, 일반적인 CSS 스타일 시트가됩니다.