[디자인] 효율적인 CSS 작성하기

안녕하세요. 주말동안 24시간의 20시간을 잠만 잔, 항상 잠에 굶주려 있는 프리모아의 Will 입니다. 

오늘부터 개발자, 웹디자이너 프리랜서를 위한 '실무적인 기술 Tip 정보'를 공유하고자 하는데요.

1) ID 규칙 2) Class 규칙 3) Tag 규칙 4) Universal 규칙 

* 키 선택자 : 선택자의 마지막 선택자를 의미(선택되는 엘리먼트를 가리키는)

* 아래 키 선택자는 img,p 그리고 title 이다. 

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

예제(ID 규칙)

button#backButton {…} /* 이건 ID 규칙이다. */
#urlBar[type="autocomplete"] {…} /* 이것도 ID 규칙이다. */
treeitem > treerow > treecell#myCell:active {…} /* 이것도 ID 규칙이다. */

예제 (CLASS 규칙)

button.toolbarButton {…} /* Class 규칙 */
.fancyText {…}	/* Class 규칙 */
menuitem > .menu-left[checked="true"] {…} /* Class 규칙 */

예제(TAG 규칙)

td {…} /* Tag 규칙 */
treeitem > treerow {…} /* Tag 규칙 */
input[type="checkbox"] {…} /* Tag 규칙 */

예제(UNIVERSAL 규칙)

[hidden="true"] {…} /* universal 규칙 */  
* {…}		/* universal 규칙 */
tree > [collapsed="true"] {…} /* universal 규칙 */

스타일 엔진은 키 셀렉터로부터 시작해 왼쪽으로 이동하며 엘리먼트가 규칙에 적합한지를 확인하고 적합하지 않으면 멈춥니다. 기본 개념은 규칙 필터링이며 위 4개의 규칙 카테고리를 통해 관계없는 규칙을 제거합니다. 

CSS성능을 비약적으로 향상시키는 방법은 주어진 엘리먼트가 적합한지를 확인하는데 고려해야 할 규칙의 수를 줄이는 것입니다. 

EX> 어떤 엘리먼트가 ID를 가지고 있다. 스타일 엔진은 이 엘리먼트의 ID와 같은 ID를 가지는 ID 규칙만을 적용할지 말지 확인할 것이다.  스타일 엔진은 이 엘리먼트의 class에 해당하는 Class 규칙만을 적용할지 말지 확인할 것이다. Tag 규칙도 이 엘리먼트의 태그에 해당하는 규칙만이 확인될 것이다. Universal 규칙은 모두 확인될 것이다.

1) universal 규칙을 피하라

선택자가 universal 규칙에 속하지 않는지 확인하라.

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

만약 어떤 규칙이 키 선택자로 ID 선택자를 가지면 여기에 부차적인 태그를 붙이지 말라. ID는 고유하므로 여기에 태그를 붙이는 것은 매칭 작업을 더디게 만든다. 

3) Class 규칙에 쓸모없는 태그를 붙이지 말라

class는 한 문서에서 여러번 사용되지만 태그보다 그 수가 적다. 하나의 관례는 class 이름에 적용할 태그 이름을 포함시키는 것이다. 그러나 이러면 유연성을 잃게 된다. 예를 들어, 디자인이 바뀌어 태그 이름이 달라지는 경우 class 이름을 모두 변경해야 한다. (의미가 있는 이름을 사용하는 것이 최선이다. 이것은 분리된 스타일시트를 사용하는 이유이기도 하다.)

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

성능이 저하되는 가장 큰 이유는 Tag 규칙에 속하는 규칙이 너무 많이 때문이다. 엘리먼트에 클래스를 추가함으로써 Tag 규칙에 속하는 규칙을 Class 규칙에 속하는 규칙으로 바꿀 수 있다. 이는 같은 태그를 가진 다른 규칙을 매칭하는데 낭비되는 시간을 줄여준다. 

5) 자손 선택자를 피하라 

자손 선택자는 CSS에서 가장 속도가 느린 선택자이다. 이것은 끔찍하게 느리다. 특히 Tag 규칙이나 Universal 규칙에 속할 경우에는 말할 필요조차 없다. 

흔히 자식 선택자로 대체할 수 있다. 예를 들어 자손 선택자는 속도가 너무 느려 파이어폭스 사용자 인터페이스 CSS에서 제거되었다. 당신의 웹 페이지를 이같이 변경하려는건 좋은 생각이다. 

6) TAG 규칙은 자식 선택자를 절대로 포함하지 말라

Tag 규칙에 속하는 규칙에 자식 선택자를 함께 사용하지 말라. 이것은 매칭하는데 소요되는 시간을 그 엘리먼트가 등장하는 만큼 비약적으로 증가시킨다(특히 그 규칙이 매칭될 것 같이 보일 때)

6) 자식선택자를 사용할 때에 항상 주의하라

특히 RDF 문서와 메뉴에서 자식 선택자는 자주 사용된다. REF 속성은 템플릿에서 중복되게 할 수 있다는 것을 기억하라! 이것의 이점을 살려라. RDF 속성을 자식 XUL에 대해 중복되게하고 선택자를 간소화하라. 

7) 상속을 사용하라

어떤 속성들이 상속되는지 배우고 사용하라. 예를들어, XUL 위젯은 부모의 list-style-image나 font 규칙을 자식 엘리먼트에 대해 적용한다. 자식 엘리먼트들에 대해 이 규칙을 적용하는건 시간낭비다. 

8) -moz-image-region을 사용하라

여러개의 이미지를 하나의 이미지에 담고 그것을 -moz-image-region 로 선택하는 것이 각 이미지를 각각의 파일에 넣는 것보다 훨씬 빠르다. 

원문 출처 : https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS

본 컨텐츠는 원본 컨텐츠의 내용을 함축적으로 요약 및 편집한 것으로, 원문 링크로 가시면 자세한 사례까지 볼 수 있습니다.