효율적인 CSS 작성법

결론

결론부터 말하자면 중복되지 않는 클래스명으로 직빵으로 css를 주는것이 제일 좋다.

1. Universal 규칙을 피해라

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

2. ID규칙에 쓸모없는 태그나 클래스를 붙이지 말아라

button#Button {…} /* 나쁨 */
.menu#Icon {…} /* 나쁨 */
#Button {…} /* 좋음*/
#Icon {…} /* 좋음 */

3. 클래스 규칙에 쓸모없는 태그를 붙이지 말아라

tag.class {…} /* 나쁨 */
.sub-menu {…} /* 좋음 */

의미가 있는 이름을 사용하는 것이 최선임.

4. 가장 명확한 규칙을 적용하라

tag > tag > tag {…} /* 나쁨 */
.c-detail {…} /* 좋음 */

성능저하의 가장 큰 이유는 Tag규칙에 속하는 규칙이 많기때문임.

클래스를 추가해주자.

5. 자손선택자를 피하라

tag tag tag {…} /* 나쁨 */ 
tag > tag > tag {…} /* 위보다는 낫지만 나쁨 */

자손 선택자는 CSS에서 속도가 가장 느린 선택자임.

6. Tag 규칙은 자식 선택자를 포함하지 말아라

tag > tag > tag {…} /* 나쁨 */

.c-detail {…} /* 좋음 */

7. 자식 선택자를 사용할 때에 주의하라

a > b > c {…} /* 나쁨 */
.c-detail {…} /* 좋음 */

가능하면 피해라.

8. 상속을 사용하라

---

ID 규칙 , Class 규칙 , Tag 규칙 , Universal 규칙

스타일 엔진은 위 4가지로 스타일 규칙을 분류한다.

키 셀렉터

마지막 선택자를 의미

a img, div > p, h1 + [title] { … }

img , p , title 이 키셀렉터가 됌.

ID 규칙 - 키셀렉터가 ID일때

Class 규칙 - 키셀렉터가 Class일때

Tag 규칙 - 키셀렉터가 ID, Class가 아니고 Tag 일때

Universal 규칙 - 위 3가지가 아닐 때

---

스타일 엔진은 키셀렉터를 시작으로 왼쪽으로 이동하면서 규칙의 적합여부를 확인함.

엘리먼트가 적합한지를 확인하는데 위 4가지 규칙을 사용하는데 규칙의 수가 적을수록 성능이 좋아짐.