CSS의 ID 선택기 이름 지정 규칙은 무엇입니까?

이번에는 CSS에서 id 선택기의 이름 지정 규칙과 CSS에서 ID 선택기 이름을 지정할 때 취해야 할 주의 사항에 대해 몇 가지 대중적인 과학을 알려 드리겠습니다. 다음은 요약입니다. 살펴보겠습니다.

대소문자 구분

은 [a-zA-Z0-9], -,만 포함할 수 있으며, -, 0-9로 시작할 수 없습니다.

CSS 이름 지정 사양에서 이름은 숫자로 시작할 수 없으며 Start만 사용할 수 있습니다. 문자, 하이픈, 밑줄을 사용하세요. 그 뒤에는 문자, 하이픈, 밑줄 또는 숫자가 올 수 있습니다.
동시에 HTML4.01 및 이전 버전에서는 엄격하지 않지만 XHTML에서는 CSS의 이름 지정이 대소문자를 구분한다는 점에 유의해야 합니다.

1. 먼저 의미론에 대해 이야기해 봅시다

소위 의미론은 이름이 성능이 아닌 내용을 설명해야 한다는 것을 의미합니다. 예는 다음과 같습니다

Check성능(권장하지 않음)

PurpleBold(보라색 굵은 글씨)

BigHeading(큰 제목)

top-left-box(왼쪽 위 상자)

underlined-and-green(밑줄 녹색)

boxLeft(왼쪽 상자)

red(빨간색)

Red는 다음의 성능을 표시합니다. Form에 포함된 요소는 표현식의 형태가 변경되므로 네이밍 시 허용되지 않습니다. 변경 시 CSS의 클래스 및 ID 이름뿐만 아니라 해당 HTML 요소의 클래스 및 ID 이름도 수정해야 합니다. 원할 때 대규모 웹 사이트를 편집하고 있는데 이러한 변경을 여러 번 수행하는 것은 매우 시간이 많이 걸리고 골치 아픈 작업입니다. 따라서 가능한 한 변화에 적응하는 네이밍을 채택해야 한다. 즉, 네이밍은 내용과 밀접한 관련이 있다.

CheckSemantic(advocated)

sidebar(sidebar)

warning(warning)

물론 때로는 이름을 적절하게 표현하는 것이 더 유연할 수도 있습니다. 예를 들어 테두리가 있는 표시 이름을 사용하여 웹 사이트의 여러 위치에 동일한 스타일을 추가할 수 있습니다.

가장 좋은 해결책은 가장 깔끔한 것도, 가장 아름다운 것도 아니라는 점을 기억하세요. 규칙을 고수하는 것보다 자신의 아이디어를 마음껏 펼치는 것이 좋습니다.

2. 허용되는 문자

최상의 규칙: 항상 문자, 숫자 또는 하이픈을 사용하고 항상 문자로 시작합니다.

클래스 및 ID 이름은 대소문자를 구분합니다.

밑줄을 사용하지 말고, 숫자나 하이픈으로 시작하지 말고, "*", "/", ""를 허용하지 마세요. 새 브라우저는 일반적이지 않은 문자 집합을 더 많이 지원하지만 모든 브라우저에 적용되는 것은 아닙니다. 호환성을 보장하려면 최선의 규칙을 따르십시오.

3. 규칙

일반적으로 규칙으로 알려진 일부 규칙 이름을 사용하면 코드 예측 가능성이 향상되어 자신과 다른 사람이 더 쉽게 이해할 수 있으며 화면 판독기와 분석기가 작동하여 SEO(검색 엔진 최적화)가 향상됩니다. )

Conventions은 WebFront-end Development Spec Manual

4. Case

Camel Case (약어의 각 문자는 동일한 Case 사용: pdfLink linkPDF)

Hyphen

5. Namespace

접두사를 추가하세요(예: wp-users). 네임스페이스를 사용하려면 팀 내에서 네임스페이스 규칙을 개발해야 합니다.

이것은 충돌을 방지하고 원본 코드와 향후 코드에 영향을 미치지 않도록 네임스페이스를 통해 코드를 격리하는 방어형 CSS에서 사용하는 기술 중 하나입니다.

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

추천 자료:

웹 페이지에서 이미지 형식을 선택하는 방법

모바일 레이아웃에서 유동 레이아웃의 원리는 무엇인가요?

요소를 수평 및 수직으로 중앙에 배치하는 인기 없는 방법

html +Css 수직 중앙 컨테이너

js에서 비교 연산자를 과학적으로 사용하는 방법

위 내용은 CSS의 ID 선택기 이름 지정 규칙은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!