---

layout: default

---

<div class="heading" id="toc">

<h2>목차</h2>

<div class="section toc">

<div class="col">

<h4><a href="#html">HTML</a></h4>

<ul>

<li><a href="#html-syntax">문법</a></li>

<li><a href="#html-doctype">HTML5 문서 타입</a></li>

<li><a href="#html-lang">언어 속성</a></li>

<li><a href="#html-encoding">문자열 인코딩</a></li>

<li><a href="#html-ie-compatibility-mode">인터넷 익스플로러 호환 모드</a></li>

<li><a href="#html-style-script">CSS/자바스크립트 인클루드</a></li>

<li><a href="#html-practicality">실용성 vs 순수성</a></li>

<li><a href="#html-attribute-order">태그 속성 순서</a></li>

<li><a href="#html-boolean-attributes">불리언 태그 속성</a></li>

<li><a href="#html-reducing-markup">마크업 최소화</a></li>

<li><a href="#html-javascript">자바스크립트가 생성하는 마크업</a></li>

</ul>

</div>

<div class="col">

<h4><a href="#css">CSS</a></h4>

<ul>

<li><a href="#css-syntax">문법</a></li>

<li><a href="#css-declaration-order">속성 선언 순서</a></li>

<li><a href="#css-import">@import 사용 금지</a></li>

<li><a href="#css-media-queries">미디어 쿼리 위치</a></li>

<li><a href="#css-prefixed-properties">접두사가 있는 속성</a></li>

<li><a href="#css-single-declarations">단일 선언문들을 위한 규칙</a></li>

<li><a href="#css-shorthand">축약형</a></li>

<li><a href="#css-nesting">LESS와 SASS 안에서 중첩시키기</a></li>

<li><a href="#css-comments">주석</a></li>

<li><a href="#css-classes">클라스 작명</a></li>

<li><a href="#css-selectors">선택자</a></li>

<li><a href="#css-organization">구성</a></li>

<li><a href="#css-editor-prefs">에디터 설정</a></li>

</ul>

</div>

<div class="section" id="golden-rule">

<div class="col">

<h2>규칙</h2>

<p>여기서 논의하는 가이드라인 또는 당신이 정한 가이드라인을 항상 따릅니다. 무엇인가 틀렸다면 그것이 작건 크건 상관 없이 논의합니다. 이 코딩 가이드라인에 내용을 추가한다거나 참여하고 싶다면 <a href="https://github.com/mdo/code-guide/issues/new">깃헙에 이슈를 생성하세요</a>.</p>

</div>

<div class="col">

<blockquote>

<p>프로젝트 참여자들 중 누가 하든 상관 없이 코드는 마치 한 사람이 쓴 것 처럼 보여야 합니다.</p>

</blockquote>

</div>

<div class="heading" id="html">

<h2>HTML</h2>

<div class="section" id="html-syntax">

<div class="col">

<h3>문법</h3>

<ul>

<li>공백 문자 두 개를 사용하는 소프트탭을 사용하세요 &ndash; 어떤 환경에서건 동일한 렌더링 결과를 보장하는 유일한 방법입니다. (키보드의 탭 키를 눌러 사용하는 하드 탭은 기본적으로 공백문자 8개의 길이를 갖고 있습니다 &ndash; 역자 주)</li>

<li>중첩시키려는 엘리먼트들은 한 번만 들여쓰기를 해야 합니다 (공백 문자 두 개).</li>

<li>속성값을 지정할 때에는 작은 따옴표 대신 항상 큰 따옴표를 사용하세요.</li>

<li>단일 태그 엘리먼트들에서는 슬래시(<code>/</code>)를 사용하지 마세요 &ndash; <a href="http://dev.w3.org/html5/spec-author-view/syntax.html#syntax-start-tag">HTML5 스펙</a>에서는 선택 사항으로 되어 있습니다.</li>

<li>닫는 태그가 선택적인 경우에라도 생략하지 마세요 (예: <code>&lt;/li&gt;</code> or <code>&lt;/body&gt;</code>).</li>

</ul>

</div>

<div class="col">

{% highlight html %}{% include html/syntax.html %}{% endhighlight %}

</div>

<div class="section" id="html-doctype">

<div class="col">

<h3>HTML5 문서 타입</h3>

<p>모든 HTML 페이지의 시작에 이 문서 타입을 선언함으로써, 표준 모드를 사용하게끔 강제합니다. 그렇게 하면 모든 브라우저에서 좀 더 일관적으로 렌더링을 할 수 있습니다.</p>

</div>

<div class="col">

{% highlight html %}{% include html/doctype.html %}{% endhighlight %}

</div>

<div class="section" id="html-lang">

<div class="col">

<h3>언어 속성</h3>

<p>HTML5 스펙의 정의는 아래와 같습니다:</p>

<blockquote>

<p>작성자는 문서에 쓰인 언어를 알리기 위해 <code>lang</code> 속성을 루트의 <code>html</code> 엘리먼트에 명시하는 것이 좋다. 이것은 텍스트 리더기와 같은 도구들이 어떤 언어와 발음를 써야 하는지, 어떤 번역 도구를 써야 하는지 등에 대해 내부적으로 결정할 수 있게 도와준다.</p>

</blockquote>

<p><code>lang</code> 속성에 대해 더 자세하게 알고 싶으면 <a href="http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-html-element">이 스펙을 참고하세요</a>.</p>

<p><a href="http://sitepoint.com">Sitepoint</a> 웹사이트에서 <a href="http://reference.sitepoint.com/html/lang-codes">언어 코드에 대한 리스트</a>를 볼 수 있습니다.</p>

</div>

<div class="col">

{% highlight html %}{% include html/lang.html %}{% endhighlight %}

</div>

<div class="section" id="html-ie-compatibility-mode">

<div class="col">

<h3>인터넷 익스플로러 호환 모드</h3>

<p>인터넷 익스플로러는 <code>&lt;meta&gt;</code> 태그를 통해 어떤 버전의 인터넷 익스플로러를 사용해야 하는지를 명시함으로써 문서의 호환성을 지원합니다. 딱히 특별한 상황이 아니라면 <strong>엣지 모드</strong>를 사용하여 인터넷 익스플로러에게 가장 최신 버전을 사용하라고 하면 됩니다.</p>

<p><a href="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e">이 스택 오버플로우 글</a>에서 더 많은 내용들을 확인할 수 있습니다.</p>

</div>

<div class="col">

{% highlight html %}{% include html/ie-compatibility-mode.html %}{% endhighlight %}

</div>

<div class="section" id="html-encoding">

<div class="col">

<h3>문자열 인코딩</h3>

<p>문자열 인코딩을 명시적으로 선언함으로써, 당신의 콘텐츠를 빠르고 쉽게 정확한 방법으로 렌더링할 수 있습니다. 이렇게 하면 당신의 문서에 명시한 인코딩 (일반적으로 <code>utf-8</code>)과 문서의 인코딩이 일치하는 경우 HTML 문서 안에서 문자 엔티티들을 쓰지 않아도 됩니다.</p>

</div>

<div class="col">

{% highlight html %}{% include html/encoding.html %}{% endhighlight %}

</div>

<div class="section" id="html-style-script">

<div class="col">

<h3>CSS/자바스크립트 인클루드</h3>

<p>HTML5 스펙에 따르면 일반적으로는 CSS와 자바스크립트 파일을 불러올 때 <code>type</code> 속성을 선언할 필요가 없습니다. <code>text/css</code> 와 <code>text/javascript</code> 속성값이 각각의 기본값입니다.</p>

<h4>읽어볼 만한 HTML5 스펙 링크들:</h4>

<ul>

<li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/semantics.html#the-link-element">링크 사용시</a></li>

<li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/semantics.html#the-style-element">스타일 사용시</a></li>

<li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#the-script-element">스크립트 사용시</a></li>

</ul>

</div>

<div class="col">

{% highlight html %}{% include html/style-script.html %}{% endhighlight %}

</div>

<div class="section" id="html-practicality">

<div class="col">

<h3>실용성 vs 순수성</h3>

<p>실용성을 잃지 않는 선에서 가능한 한 HTML 표준과 시만틱을 유지하세요. 가능한 한 복잡함을 줄이면서 최소한의 마크업을 사용하는 것이 좋습니다.</p>

</div>

<div class="section" id="html-attribute-order">

<div class="col">

<h3>태그 속성 순서</h3>

<p>HTML 태그 속성들은 코드의 가독성 향상을 위해 특정 순서로 놓는 것이 좋습니다.</p>

<ul>

<li><code>class</code></li>

<li><code>id</code>, <code>name</code></li>

<li><code>data-*</code></li>

<li><code>src</code>, <code>for</code>, <code>type</code>, <code>href</code>, <code>value</code></li>

<li><code>title</code>, <code>alt</code></li>

<li><code>aria-*</code>, <code>role</code></li>

</ul>

<p><code>class</code>는 콤포넌트의 재사용성을 높여주기 때문에 가장 먼저 오게 합니다. <code>id</code>는 좀 더 구체적이고 제한적으로 쓰이므로 두 번째로 오게 합니다.</p>

</div>

<div class="col">

{% highlight html %}{% include html/attribute-order.html %}{% endhighlight %}

</div>

<div class="section" id="html-boolean-attributes">

<div class="col">

<h3>불리언 태그 속성</h3>

<p>불리언 태그 속성은 굳이 속성값을 지정할 필요가 없습니다. XHTML에서는 속성값 지정이 필요했지만 HTML5에서는 그런 제약이 없어졌습니다.</p>

<p><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#boolean-attributes">불리언 태그 속성에 대한 WhatWG 섹션</a>에는 이렇게 나와 있습니다:</p>

<blockquote>

<p>불리언 태그 속성이 태그 안에 존재한다는 것 자체가 <code>true</code>를 의미한다. 반대로 불리언 태그 속성이 태그 안에 선언되지 않았다면 그것은 <code>false</code>를 의미한다.</p>

</blockquote>

<p>만약 태그 숙성값을 <em>반드시</em> 포함시켜야 하지만 사실은 <strong>그럴 필요가 없다면</strong>, 다음의 WhatWG 가이드라인을 따르세요:</p>

<blockquote>

<p>만약 속성값이 필요하다면 그 값은 반드시 공백문자를 포함하지 않은 빈 문자열이거나 또는 속성의 이름이어야 한다.</p>

</blockquote>

<p><strong>다시 정리하자면, 그냥 속성값을 넣지 마세요.</strong></p>

</div>

<div class="col">

{% highlight html %}{% include html/boolean-attributes.html %}{% endhighlight %}

</div>

<div class="section" id="html-reducing-markup">

<div class="col">

<h3>마크업 최소화</h3>

<p>가능하다면 항상 HTML 마크업 작성시 불필요한 부모 엘리먼트들을 피하세요. 많은 경우 리팩토링이 필요합니다. 다음의 예제를 확인해 보세요:</p>

</div>

<div class="col">

{% highlight html %}{% include html/reducing-markup.html %}{% endhighlight %}

</div>

<div class="section" id="html-javascript">

<div class="col">

<h3>자바스크립트가 생성하는 마크업</h3>

<p>자바스크립트 안에 마크업을 쓰는 것인 콘텐츠를 찾고 수정하기가 힘듭니다. 게다가 효율적이지도 않죠. 가급적이면 피하는 것이 좋습니다.</p>

</div>

<div class="heading" id="css">

<h2>CSS</h2>

<div class="section" id="css-syntax">

<div class="col">

<h3>문법</h3>

<ul>

<li>공백 문자 두 개를 사용하는 소프트탭을 사용하세요 &ndash; 어떤 환경에서건 동일한 렌더링 결과를 보장하는 유일한 방법입니다. (키보드의 탭 키를 눌러 사용하는 하드 탭은 기본적으로 공백문자 8개의 길이를 갖고 있습니다 - 역자 주)</li>

<li>선택자를 그룹핑하는 경우, 한 줄에 하나씩 각각의 선택자를 놓습니다.</li>

<li>가독성을 높이기 위해 여는 중괄호 앞에 하나의 공백 문자를 놓습니다.</li>

<li>닫는 중괄호는 새로운 줄에 놓습니다.</li>

<li>각각의 선언에서 <code>:</code> 뒤에는 공백 문자 하나를 포함시킵니다.</li>

<li>각각의 선언은 한 줄에 하나씩 하도록 합니다. 그렇게 함으로써 좀 더 정확한 에러를 확인할 수 있습니다.</li>

<li>모든 선언은 마지막에 세미콜론 (<code>;</code>)으로 끝냅니다. 맨 마지막 선언에서는 선택사항이지만, 세미콜론이 없을 경우 에러가 나기 쉽습니다.</li>

<li>콤마로 나뉜 속성값들은 각각의 콤마 뒤에 공백 문자를 하나 포함시킵니다. (예: <code>box-shadow</code>)</li>

<li><code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code> 또는 <code>rect()</code> 속성값들 <em>안에서는</em> 콤마로 나뉜다고 하더라도 공백 문자를 포함시키지 않습니다. 이것은 (공백 문자 있는 콤마로 나눈) 다중 속성값들과 (공백 문자 없는 콤마로 나눈) 다중 색상값들을 구분하기 위한 목적입니다.</li>

<li>속성값들과 색상값들에 소숫점이 필요할 경우 <code>0.</code>를 사용하지 않습니다.을 표현하지 않습니다. (예: <code>0.5</code> 대신 <code>.5</code> 또는 <code>-0.5px</code> 대신 <code>-.5px</code>).</li>

<li>16진수 값들은 모두 소문자로 표현합니다. (예: <code>#fff</code>) 소문자들이 좀 더 가독성이 높기 때문입니다.</li>

<li>가능하다면 축약형 16진수 값들을 사용합니다. (예: <code>#ffffff</code> 대신 <code>#fff</code>)</li>

<li>선택자 안에서는 속성값들에 큰따옴표를 사용합니다. (예: <code>input[type="text"]</code>) 코드의 일관성을 위해 아주 좋습니다만 <a href="http://mathiasbynens.be/notes/unquoted-attribute-values#css">몇 가지 경우에는 예외가 있기도 합니다</a>.</li>

<li><code>0</code> 값들에서는 단위를 쓰지 않습니다. (예: <code>margin: 0px;</code> 대신 <code>margin: 0;</code>)</li>

</ul>

<p>여기 쓰인 용어들이 궁금하세요? 위키피디아의 <a href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets#Syntax">CSS 문법 섹션</a>을 확인하세요.</p>

</div>

<div class="col">

{% highlight css %}{% include css/syntax.css %}{% endhighlight %}

</div>

<div class="section" id="css-declaration-order">

<div class="col">

<h3>속성 선언 순서</h3>

<p>관련 속성에 대한 선언들은 아래와 같은 순서로 묶어야 합니다:</p>

<ol>

<li>포지션 관련</li>

<li>박스 모델</li>

<li>타이포그라피</li>

<li>시각 효과</li>

</ol>

<p>포지션 관련 선언들이 가장 먼저 옵니다. 문서의 정상적인 흐름에서 엘리먼트들을 없앨 수 있고, 박스 모델 관련 스타일들을 재정의할 수 있기 때문입니다. 박스 모델이 그 다음으로 오는데, 이것은 해당 엘리먼트의 크기와 위치를 지정하기 때문입니다.</p>

<p>나머지는 이 앞의 두 섹션에 영향을 주지 않거나 해당 엘리먼트의 <em>내부</em>에서만 일어나기 때문에 나중에 배치 시킵니다.</p>

<p>모든 속성들의 리스트와 그 순서를 확인하고 싶다면 이 <a href="http://twitter.github.com/recess">Recess</a> 링크를 확인하세요.</p>

</div>

<div class="col">

{% highlight css %}{% include css/declaration-order.css %}{% endhighlight %}

</div>

<div class="section" id="css-import">

<div class="col">

<h3><code>@import</code> 사용 금지</h3>

<p><code>&lt;link&gt;</code>에 비해 <code>@import</code>는 상대적으로 느리고 추가 페이지 요청을 필요로 하기 때문에 결과적으로 예측할 수 없는 문제를 야기할 수 있습니다. <code>@import</code>의 사용을 피하는 대신 다른 방법을 써 보세요:</p>

<ul>

<li>여러 개의 <code>&lt;link&gt;</code> 엘리먼트를 사용합니다.</li>

<li>SASS 또는 LESS와 같은 전처리기를 사용해서 당신의 CSS를 하나의 파일로 만드세요.</li>

<li>Rails, Jekyll 또는 다른 환경에서 제공하는 기능들을 활용해서 당신의 CSS 파일들을 합치세요.</li>

</ul>

<p>Steve Souders가 쓴 <a href="http://www.stevesouders.com/blog/2009/04/09/dont-use-import/">이 글</a>을 읽어보시길 권합니다.</p>

</div>

<div class="col">

{% highlight html %}{% include css/import.html %}{% endhighlight %}

</div>

<div class="section" id="css-media-queries">

<div class="col">

<h3>미디어 쿼리 위치</h3>

<p>가급적이면 관련 규칙들이 모여 있는 곳에 미디어 쿼리들을 최대한 가까이 모아 놓으세요. 미디어 쿼리들을 별도의 스타일시트에 묶어 놓는다든가 문서의 맨 마지막에 놓는 것은 좋지 않습니다. 이렇게 하는 것이 오히려 나중에 까먹기 딱 좋습니다. 일반적인 설정은 다음과 같습니다.</p>

</div>

<div class="col">

{% highlight css %}{% include css/media-queries.css %}{% endhighlight %}

</div>

<div class="section" id="css-prefixed-properties">

<div class="col">

<h3>접두사가 있는 속성</h3>

<p>브라우저별 접두사가 있는 속성들을 사용할 경우 각각의 속성들을 들여쓰기 하세요. 그렇게 함으로써 해당 선언들의 값이 수직으로 정렬되어 여러 줄을 한꺼번에 수정하는 것이 가능해 집니다.</p>

<p>Textmate 에서는 <strong>Text &rarr; Edit Each Line in Selection</strong> (&#8963;&#8984;A) 기능이 있습니다. Sublime Text 2 에서는, <strong>Selection &rarr; Add Previous Line</strong> (&#8963;&#8679;&uarr;) 선택 후 <strong>Selection &rarr; Add Next Line</strong> (&#8963;&#8679;&darr;) 메뉴를 선택하면 됩니다. (모두 맥용 환경을 기준으로 언급하고 있다 &ndash; 역자 주)</p>

</div>

<div class="col">

{% highlight css %}{% include css/prefixed-properties.css %}{% endhighlight %}

</div>

<div class="section" id="css-single-declarations">

<div class="col">

<h3>단일 선언문들을 위한 규칙</h3>

<p>어떤 규칙 세트가 <strong>오직 하나의 선언만</strong>을 포함하는 경우가 있는데, 이럴 땐 가독성과 빠른 편집을 위해 줄바꿈을 제거합니다. 여러 개의 선언문을 가진 규칙 세트가 있을 때에는 당연히 줄바꿈을 해야 합니다.</p>

<p>이렇게 하는 가장 큰 목적은 에러 확인입니다. 예를 들어 CSS 검수기가 183번째 줄에 에러가 있다고 할 때, 단일 선언문에서야 금방 찾을 수 있지만, 다중 선언문에서는 줄바꿈을 하는 것이 이렇게 에러 확인을 할 때 필수 요소가 될 수 있습니다.</p>

</div>

<div class="col">

{% highlight css %}{% include css/single-declarations.css %}{% endhighlight %}

</div>

<div class="section" id="css-shorthand">

<div class="col">

<h3>축약형</h3>

<p>모든 가능한 속성값들을 명시적으로 설정해야만 하는 경우에는 축약형 선언문을 사용하지 않는 것이 좋습니다. 주로 이러한 축약형을 남용하는 속성들에는 아래와 같은 것들이 있습니다:</p>

<ul>

<li><code>padding</code></li>

<li><code>margin</code></li>

<li><code>font</code></li>

<li><code>background</code></li>

<li><code>border</code></li>

<li><code>border-radius</code></li>

</ul>

<p>축약형 속성이 나타내는 모든 값들을 모두 설정할 필요가 없을 때가 종종 있습니다. 예를 들어 HTML 문서의 헤더 영역에서는 오로지 top/bottom 마진 정도만 필요하기 때문에 이 두 속성값들만 재정의하면 되는 경우가 많습니다. 축약형 속성들을 남용하게 되면 불필요하게 재정의하는 경우가 많아 원하지 않는 부작용이 발생합니다.</p>

<p>MDN (Mozilla Developer Network)에서 발행한 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties">축약형 속성</a>이라는 글에서는 이러한 낯선 경우와 행동들에 대해 잘 정리해 놓았습니다.</p>

</div>

<div class="col">

{% highlight css %}{% include css/shorthand.css %}{% endhighlight %}

</div>

<div class="section" id="css-nesting">

<div class="col">

<h3>LESS와 SASS 안에서 중첩시키기</h3>

<p>불필요한 중첩은 피하세요. 중첩이 가능하다는 이유가 항상 그래야만 하는 것을 의미하는 것은 아닙니다. 중첩은 부모 엘리먼트 스코프 안에서만 해야 할 때 또는 여러 개의 엘리먼트들을 한꺼번에 중첩시킬 때나 필요합니다.</p>

</div>

<div class="col">

{% highlight scss %}{% include css/nesting.scss %}{% endhighlight %}

</div>

<div class="section" id="css-comments">

<div class="col">

<h3>주석</h3>

<p>코드는 당연하게도 사람이 쓰고 유지보수를 합니다. 당신의 코드에 충분한 설명이 되어 있는지, 충분한 주석이 달려 있는지, 다른 사람들에 의해 접근이 가능한지를 항상 살펴야 합니다. 좋은 주석은 그 자체만으로도 맥락과 목적을 충분히 보여줍니다. 단순히 엘리먼트라든가 클라스 이름들을 주석 처리하는 것으로만 사용하지 마세요.</p>

<p>주석의 양이 많을 경우 완전한 문장으로 주석을 쓰세요. 그리고, 일반적인 노트의 경우에는 간단한 구문 만으로도 충분합니다.</p>

</div>

<div class="col">

{% highlight css %}{% include css/comments.css %}{% endhighlight %}

</div>

<div class="section" id="css-classes">

<div class="col">

<h3>클라스 작명</h3>

<ul>

<li>클라스 이름들은 소문자와 대시 또는 하이픈(<code>-</code>)을 사용하세요. 밑줄(<code>_</code>)과 camelCase는 사용하지 않습니다. 하이픈은 관련 클라스에서 자연스러운 브레이크를 제공합니다. (예: <code>.btn</code>과 <code>.btn-danger</code>)</li>

<li>지나친 축약형은 사용하지 않는 것이 좋습니다. 예를 들어 <code>.btn</code> 정도는 <em>button</em>을 위해서는 괜찮지만 <code>.s</code>을 쓰게 되면 이것은 아무런 의미가 없습니다.</li>

<li>클라스 이름은 짧고 간결할 수록 좋습니다.</li>

<li>의미 있는 이름을 사용하세요. 표현보다는 구조라든가 목적을 나타내는 것이 좋습니다.</li>

<li>가장 가까운 부모라든가 베이스 클라스를 바탕으로 접두사를 사용하는 것도 좋습니다.</li>

<li><code>.js-*</code> 클라스은 스타일 대신 어떤 행동을 지정하는데 쓰세요. 하지만 이 클라스들은 CSS 파일 안에서 보여서는 안됩니다.</li>

</ul>

<p>SASS 또는 LESS의 변수명을 지정할 때에도 이러한 방법들은 대단히 유용합니다.</p>

</div>

<div class="col">

{% highlight css %}{% include css/class-names.css %}{% endhighlight %}

</div>

<div class="section" id="css-selectors">

<div class="col">

<h3>선택자</h3>

<ul>

<li>최적의 렌더링 성능을 위해서는 일반적인 엘리먼트에 스타일을 지정하는 대신 클라스를 사용하세요.</li>

<li>공통적으로 쓰이는 콤포넌트들에서 발생할 수 있는 속성 선택자 사용을 피하세요. (예: <code>[class^="..."]</code>) 웹 브라우저들은 이러한 것들에 의해 성능에 영향을 받습니다.</li>

<li>선택자는 가능한 짧게 하고, 각각의 선택자는 최대 세 개 정도로만 선택할 수 있게끔 하세요.</li>

<li>필요하다면 가장 가까운 부모로부터<strong>만</strong> 속성을 물려 받을 수 있게끔 하세요. (예: 접두사가 들어간 클라스명을 사용하지 않을 때)</li>

</ul>

<p>추가 정보들은 이곳에서 확인할 수 있습니다:</p>

<ul>

<li><a href="http://markdotto.com/2012/02/16/scope-css-classes-with-prefixes/">접두사를 이용한 CSS 클라스의 스코핑</a></li>

<li><a href="http://markdotto.com/2012/03/02/stop-the-cascade/">중첩을 피하라</a></li>

</ul>

</div>

<div class="col">

{% highlight css %}{% include css/selectors.css %}{% endhighlight %}

</div>

<div class="section" id="css-organization">

<div class="col">

<h3>구성</h3>

<ul>

<li>콤포넌트 그룹에 맞춰 코드를 구성하세요.</li>

<li>일관적인 상하관계에 맞추어 개발하세요.</li>

<li>공백문자를 일관적으로 사용하는 것은 방대한 양의 문서를 훑어볼 때 섹션들을 분리하는 데 많은 도움을 줍니다.</li>

<li>여러 개의 CSS 파일을 사용할 때, 페이지 대신 콤포넌트 그룹에 따라 나누세요. 페이지는 콤포넌트들이 이동하다보면 언제든 바뀔 수 있습니다.</li>

</ul>

</div>

<div class="col">

{% highlight css %}{% include css/organization-comments.css %}{% endhighlight %}

</div>

<div class="section" id="css-editor-prefs">

<div class="col">

<h3>에디터 설정</h3>

<p>당신의 에디터를 다음과 같은 세팅으로 설정하여 다른 사람들과 협업시 일관성을 해치지 않도록 하세요:</p>

<ul>

<li>소프트 탭 설정을 공백 문자 두 개로 합니다.</li>

<li>저장시 파일 마지막에 오는 불필요한 공백문자들은 제거하게끔 합니다.</li>

<li>파일 저장시 <code>utf-8</code> 인코딩으로 저장하도록 합니다.</li>

<li>파일의 맨 마지막은 줄바꿈으로 끝나게끔 합니다.</li>

</ul>

<p>이 설정들을 당신 프로젝트의 <code>.editorconfig</code> 파일에 저장 시킵니다. <a href="https://github.com/twbs/bootstrap/blob/master/.editorconfig">Bootstrap 설정파일</a>을 참고하세요. <a href="http://editorconfig.org">EditorConfig</a>를 참고하시면 더 많은 정보를 볼 수 있습니다.</p>

</div>