[css] 효율적인 CSS 작성하기

효율적인 CSS 작성하는 방법입니다.

 

Universal 규칙은 사용하지 않습니다.

 

/** Universal 규칙 예제 */


[hidden="true"] { ... }

* { ... }

div > [type="number"] { ... }

​

​

ID 규칙에 쓸모없는 태그나 클래스를 사용하지 않습니다. ID는 고유하므로 태그나 클래스를 붙이는 것은 매칭 작업을 더디게 만듭니다.

(예외: 만약 여러가지 다른 스타일을 위해 ID가 지정된 엘리먼트의 class가 동적으로 바뀌고 이 class가 ID가 지정되지 않은 다른 엘리먼트와 공유될 경우에는 클래스 선택자가 필요합니다. )

 

button#btn { ... }

button#btn.on { ... }

table#tbl { ... }

input#num[type="number"] { ... }

↓

#btn { ... }

#btn.on { ... }   /* 예외사항 */

#tbl { ... }

#num { ... }

​

​

Class 규칙에 쓸모없는 태그를 사용하지 않습니다. 가장 명확한 규칙을 적용하고, 자손 선택자를 피합니다.

class 이름에 적용할 태그 이름을 포함시키지 않습니다. 디자인이 바뀌어 태그 이름이 달라지는 경우 class 이름을 모두 변경해야하기 때문에 유연성을 잃습니다.

 

button.btn { ... }      /* 나쁨 */

.button-btn { ... }     /* 좋음 */

.default-btn { ... }    /* 최선 */

​

​

Tag 규칙은 자식 선택자를 절대로 포함하지 않습니다. 자손 선택자는 css에서 가장 속도가 느린 선택자입니다. class를 이용하는 것이 좋습니다.

 

table thead { ... }      /* 나쁨 */

table > thead { ... }    /* 나쁨 */

.tbl-header { ... }      /* 좋음 */