단일 라인 vrs. 다중선 CSS

주문자 명단에 있는 스티브 스미스가 어떻게 CSS 포맷을 선택했는지에 대한 흥미로운 기사를 가지고 있다. 기본적으로 단일선과 다중선의 두 가지 방법이 있습니다. 다중선은 일반적인 접근 방식입니다.

#wrapper {
      width:800px; 
      margin:0 auto;
}

#header {
      height:100px; 
      position:relative;
}

#feature .post {
      width:490px;
      float:left;
}

이 스타일이 제가 쓰고 좋아하는 스타일입니다. Steve의 요점은 대형 CSS 파일에서 선택기는 빠르게 스캔하기가 더 어려워진다는 것이다. 따라서 모든 선택자와 각 선택자의 속성을 한 줄에 보관하면 파일을 찾는 것이 훨씬 쉬워집니다. 이와 같이:

#wrapper            {width:800px; margin:0 auto;}
#header             {height:100px; position:relative;}
#feature .post      {width:490px; float:left;}

그의 말은 일리가 있어. 장점을 볼 수 있고 그건 단지 개인적인 취향의 문제일 뿐이야. 하지만, 저는 당분간은 일반적인 방법을 고수할 생각입니다. 만약 내가 정말 빨리 실렉터를 찾아야 한다면, 나는 항상 그냥 찾아낸다. 이 스타일의 한 비평가는 다양한 CSS 디버깅 툴이 라인 번호별로 오류를 경고하고 단일 라인 방법을 사용할 경우 오류를 찾기가 더 힘들 것이라고 지적한다. 또한, 만약 당신이 당신의 거대한 CSS 파일의 찾아보기 용이성에 대해 걱정하기 시작한다면, 이것은 CSS가 부풀어오르는 증상일 수 있으며, 당신은 그 파일을 분리하는 것을 고려해 보는 것이 좋다. 나는 그것을 하기 위한 몇 가지 다른 기술에 대해 곧 기사를 쓸 것이다.