Readable CSS

정보: 읽기 쉬운 CSS

스타일 시트에 공백(space)과 코멘트(comments)를 추가함으로써 더 읽기 쉽게 만들 수 있습니다. 같은 스타일 규칙이 다른 방식으로 선별된 엘리먼트들에 적용될 때, 선별자들을 함께 모아 그룹을 만들수도 있습니다.

공백(white space)

공백은 스페이스, 탭 그리고 새로운 라인(new lines)를 말합니다. 스타일 시트를 읽기쉽게 만들기 위해서 공백을 첨가할 수 있습니다.

샘플 CSS 파일은 현재 한 라인당 한 규칙(rule)을 가지고 있습니다, 그리고 거의 최소한의 공백을 가지고 있습니다. 복잡한 스타일 시트에서는 이런 레이아웃이 읽기 어려울 뿐만아니라 스타일 시트의 유지도 어렵게 만들 것입니다.

레이아웃(layout)의 결정은 보통 개인의 선호도에 의하지만, 스타일 시트가 공동 프로젝트의 부분이라면, 프로젝트는 아마도 그 자신의 규칙(conventions)을 가지고 있을 것입니다.

.carrot {color: orange; text-decoration: underline; font-style: italic;}

.carrot
{
color: orange;
text-decoration: underline;
font-style: italic;
}

.carrot {
  color: orange;
  text-decoration: underline;
  font-style: italic;
}

.carrot
    {
    color           : orange;
    text-decoration : underline;
    font-style      : italic;
    }

/* style for initial letter C in first paragraph */
.carrot {
  color:            orange;
  text-decoration:  underline;
  font-style:       italic;
  }

/* color for headings */
h1, h2, h3 {color: navy;}

액션: 코멘트 붙이고 레이이웃을 개선하기

CSS파일을 편집해서 아래 규칙들을 가지게 하세요(순서는 상관없습니다):

strong {color: red;}
.carrot {color: orange;}
.spinach {color: green;}
#first {font-style: italic;}
p {color: blue;}

논리적으로 보이도록 재 배열하고 생각하기에 가장 좋아 보이는 곳에 공백과 코멘트들을 첨가해서 더 읽기 쉽게 만들어 보세요.

파일을 저장하고 브라우저의 디스플레이을 리프레쉬(refresh)해서 위에서 변경한 것들이 스타일 시트가 작동하는 방식에는 아무 영향이 없다는 것을 확인하세요: