집 > 기사 > 웹 프론트엔드 > CSS 선택기를 효율적으로 사용하는 방법

CSS 선택기를 효율적으로 사용하는 방법

php中世界最好的语言원래의: 2018-03-21 10:00:321692검색

이번에는 CSS 선택자를 효율적으로 사용하는 방법과 CSS 선택자를 효율적으로 사용하기 위한 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

처음 CSS를 작성할 때는 매우 간단하고 최대한 야성적으로 작성할 수 있다고 생각했습니다. 나중에 규칙 없이 작성하면 결과를 얻을 수 있지만 실제 개발에서는 더 쓸모 없거나 반복되는 작업이 발생할 수 있으며 CSS는 효율적이지 않다는 것을 점차 알게 되었습니다. 따라서 이후 개발 과정에서 우리는 가능한 한 효율적이고 재사용 가능한 CSS를 작성하기 위해 의도적으로 특정 규칙을 따랐습니다. 요약하면 주요 측면은 다음과 같습니다.

먼저 짧은 CSS 코드를 살펴보세요.

#menus > li { font-size: 14px; }

브라우저가 위의 규칙을 왼쪽에서 오른쪽으로 일치시킬 것이라고 추측할 수 있습니다. 우리는 브라우저가 먼저 메뉴 ID를 가진 유일한 요소를 찾는다고 가정할 것입니다. 그런 다음 스타일을 변경합니다. 직계 하위 요소 li 요소에 적용됩니다. 이게 상당히 효율적인 것 같습니다.

그러나 CSS 선택자는 실제로 오른쪽에서 왼쪽으로 일치합니다. 따라서 위의 규칙은 효율적이지 않습니다. 브라우저는 페이지의 각 li 요소를 순회하여 해당 상위 요소의 ID가 메뉴인지 확인해야 합니다.

스타일 시스템은 가장 오른쪽 선택기부터 왼쪽으로 규칙 일치를 시작합니다. 현재 선택기 왼쪽에 다른 선택기가 있는 한 스타일 시스템은 규칙과 일치하는 요소를 찾거나 불일치로 인해 종료될 때까지 계속 왼쪽으로 이동합니다.

효율적인 CSS 선택자를 작성하기 위한 일반적인 규칙은 다음과 같습니다.

1. 와일드카드 규칙 사용을 피하세요.

전통적인 의미의 와일드카드 선택자 외에도 인접한 형제 선택자, 하위 선택자, 하위 선택자를 결합합니다. 및 속성 선택기는 모두 와일드카드 규칙으로 분류됩니다. ID, 클래스 및 레이블 선택기만 사용하는 것이 좋습니다.

2. ID 선택기를 제한하지 마세요.

지정된 ID는 페이지의 하나의 요소에만 해당할 수 있으므로 추가로 한정자를 추가할 필요가 없습니다. 예를 들어 p#header는 불필요하므로 #header로 단순화해야 합니다.

3. 클래스 선택자를 제한하지 마세요

클래스 선택자를 특정 라벨로 제한하지 말고, 실제 상황에 맞게 클래스 이름을 확장하세요. 예를 들어, li.chapter를 .li-chapter 또는 더 나은 .list-chapter로 변경하세요.

4. 규칙을 최대한 구체적으로 만드세요

ol li a와 같은 긴 선택자를 작성하려고 하지 마세요. .list-anchor와 같은 클래스를 만들어 적절한 요소에 추가하는 것이 좋습니다.

5. 자손 선택자 사용을 피하세요

일반적으로 자손 선택자를 처리하는 데 드는 비용이 가장 높지만 하위 선택자를 사용하는 것도 원하는 결과를 얻을 수 있고 더 효율적입니다.

6. 태그 하위 선택기 사용을 피하세요

#menus > li > a와 같은 태그 기반 하위 선택기가 있는 경우 .menus와 같은 각 태그 요소를 연결하는 데 클래스를 사용해야 합니다. -목.

7. 하위 선택기의 모든 용도에 대해 질문하세요.

하위 선택기가 사용되는 모든 위치를 확인하고 가능하면 이를 구체적인 클래스로 바꾸세요.

8. 상속에 의존

어떤 속성이 상속될 수 있는지 이해하고 이러한 속성에 대한 규칙을 반복적으로 지정하지 마세요. 예를 들어 각 목록 요소가 아닌 목록 요소에 list-style-image를 지정합니다. 각 요소의 상속 가능한 속성에 대해 알아보려면 상속된 속성 목록을 참조하세요.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!