Mozilla UI에서 효율적인 CSS 작성

다음 문서에서는 Mozilla UI에서 CSS 파일을 최적화하는 데 적용되는 규칙을 설명합니다. 첫 번째 부분은 Mozilla 스타일 시스템 분류 규칙에 대한 일반적인 논의입니다. 시스템에 대한 이러한 이해를 바탕으로 다음 섹션에는 이 스타일 시스템의 실질적인 이점을 활용하는 쓰기 스타일에 대한 지침이 포함되어 있습니다.

스타일 시스템이 규칙을 분류하는 방법

스타일 시스템은 규칙을 네 가지 광범위한 범주로 나눕니다. 이러한 클래스는 규칙 일치를 위해 가장 먼저 고려되기 때문에 이해하는 것이 중요합니다. 다음 단락에서는 "기본 선택자"라는 용어가 사용됩니다. 기본 선택기는 선택기의 가장 오른쪽 부분(상위 항목이 아닌 일치할 요소)을 나타냅니다. 예를 들어, 다음 규칙에서:

img, div > p, h1 + [제목] {}

기본 선택기는 "img", "p" 및 "[title]"입니다.

ID 규칙

ID 선택기를 기본 선택기로 사용하는 규칙입니다.

예를 들어:

• 버튼#backButton { } /* ID 카테고리에 대한 규칙*/
• #urlBar[type="autocomplete"] { } /* ID 카테고리 규칙*/
• treeitem > treerow > treecell#myCell:active { } /* ID 범주에 대한 규칙*/

수업 규칙

규칙에 기본 선택자로 지정된 클래스가 있는 경우 이 클래스로 분류됩니다.

예를 들어:

• Button.toolbarButton { } /* 클래스 기반 규칙*/
• .fancyText { } /* 클래스 기반 규칙*/
• menuitem > .menu-left[checked="true"] { } /* 클래스 기반 규칙*/

태그 규칙

기본 선택자가 ID나 클래스가 아닌 경우 다음 클래스는 태그 카테고리일 가능성이 높습니다. 규칙에서 태그를 기본 선택자로 지정하면 이 카테고리로 분류됩니다.

예를 들어:

• td { } /* 태그 기반 규칙*/
• treeitem > treerow { } /* 태그 기반 규칙*/
• input[type="checkbox"] { } /* 태그 기반 규칙*/

전역 규칙

위의 카테고리 외에도 모든 것이 이 카테고리에 속합니다.

예를 들어:

• [hidden="true"] { } /* 전역 규칙*/
• *{} /* 전역 규칙*/
• tree > [collapsed="true"] { } /* 전역 규칙*/

스타일 시스템이 규칙과 일치하는 방식

스타일 시스템은 가장 오른쪽 선택기부터 시작하여 규칙에 맞게 왼쪽으로 이동합니다. 스타일 시스템은 규칙이 일치하거나 오류로 인해 일치가 중단될 때까지 왼쪽에 일치하는 선택기를 계속 유지합니다.

규칙 분류의 첫 번째 단계는 기본 선택기 범주를 기반으로 발생합니다. 이 분류의 목적은 시간이 많이 걸리는 일치가 필요하지 않은 규칙을 필터링하는 것입니다. 이는 상당한 성능 향상에 중점을 둡니다. 특정 요소에 대해 일치해야 하는 규칙이 적을수록 스타일이 더 빨리 렌더링됩니다. 예를 들어 요소에 ID가 있으면 요소 ID와 일치하는 ID 규칙만 검색됩니다. 요소의 클래스와 일치하는 클래스 규칙만 검색됩니다. 태그와 일치하는 태그 규칙만 검색됩니다. 전역 규칙은 항상 검색됩니다.