CSS 코드 명명 규칙

클래스 선택자를 사용하고 ID 선택자를 버리세요

페이지에서 ID의 고유성은 CSS를 작성하기 위해 ID를 선택자로 사용하면 재사용할 수 없음을 의미합니다.

NEC 특수 문자: "-" 하이픈

"-"은 본 사양에서 하이픈의 의미를 나타내지 않습니다.

분류 접두사 구분 기호와 확장 구분 기호 두 가지 의미만 의미합니다. 자세한 내용은 다음 특정 규칙을 참조하세요.

카테고리 명명 방법: 단일 문자 + "-"를 접두사로 사용

레이아웃(그리드)(.g-); 모듈(모듈)(.m-); ) (.u-); 기능(.f-); 스킨(.s-)

참고: 스타일의 선택기는 항상 처음 5개 범주로 시작한 다음 내부에서 하위 항목 선택기를 사용해야 합니다.

이 다섯 가지 범주가 요구 사항을 충족할 수 없는 경우 하나 이상의 추가 범주를 정의할 수 있지만 단일 문자 + "-" 접두사, 즉 .x의 명명 규칙을 준수해야 합니다. - 형식.

특수: .j-는 JS에서만 노드를 가져오는 데 사용됩니다. 스타일을 정의하는 데 .j-를 사용하지 마세요.

하위 선택자 이름 지정

단일 문자 + "-"가 앞에 붙지 않고 길이가 2 이상인 클래스 선택자를 하위 선택자로 간주하는 데 동의합니다. as: .item은 m-list 모듈입니다. 각 항목에 대해 .text는 m-list 모듈의 텍스트 부분입니다: .m-list .item{}.m-list .text{}.

의미 태그는 .m-list li{}와 같은 하위 항목 선택기가 될 수도 있습니다.

단일 문자 클래스 선택자는 허용되지 않습니다. 그 이유는 아래 "모듈 및 구성 요소의 하위 선택자를 위한 확장 클래스"에 자세히 설명되어 있습니다.

후손 선택자 방식을 사용하면 현재 모듈이나 컴포넌트에서만 적용되며 동일한 스타일 이름이 다른 모듈에서 반복될 수 있으므로 이름이 사용되었는지 여부를 고려할 필요가 없습니다. 또는 구성 요소를 서로 방해하지 않고 사용하십시오. 여러 사람이 모듈에서 공동 작업을 할 때 효과가 특히 분명합니다!

후손 선택자는 구조 트리 수준을 완전히 나타낼 필요는 없으며 최대한 짧아야 합니다.

참고: 오염 가능성이 높으므로 페이지 레이아웃에 하위 항목 선택기를 사용하지 마세요.

/* 这里的.itm和.cnt只在.m-list中有效 */
.m-list{margin:0;padding:0;}
.m-list .itm{margin:1px;padding:1px;}
.m-list .cnt{margin-left:100px;}
/* 这里的.cnt和.num只在.m-page中有效 */
.m-page{height:20px;}
.m-page .cnt{text-align:center;}
.m-page .num{border:1px solid #ddd;}

이름은 간결하면서도 의미가 있어야 합니다

/* 反对：表现化的或没有语义的命名 */
.m-abc .green2{}
.g-left2{}
/* 推荐：使用有语义的简短的命名 */
.m-list .wrap2{}
.g-side2{}

동일한 의미를 지닌 다른 클래스 이름 지정

방법: 숫자나 문자를 추가하여 구분하세요(예: .m-list, .m-list2, .m -list3) 등은 모두 목록 모듈이지만 완전히 다른 모듈입니다).

기타 예: .f-fw0, .f-fw1, .s-fc0, .s-fc1, .m-logo2, .m-logo3, u-btn, u-btn2 등

모듈과 컴포넌트의 확장 클래스 명명 방법

A, B, C,...가 동일한 타입이고 외관상 거의 차이가 없을 경우, 그중 가장 높은 발생률은 기본 클래스로 만들고, 다른 사람들은 기본 클래스의 확장으로 만듭니다.

방법: + "-" + 숫자 또는 문자(예: .m-list의 확장 클래스는 .m-list-1, .m-list-2 등입니다.)

보충: 기본 클래스 자체는 독립적으로 사용할 수 있으며(예: class="m-list"), 확장 클래스는 기본 클래스를 기반으로 사용해야 합니다(예: class="m- 목록 m-list-2").

확장 클래스가 다른 상태를 나타내는 경우 u-btn-dis, u-btn-hov, m-box-sel, m-box-hov 등으로 이름을 지정할 수 있습니다. 다음과 같이 사용하세요: class="u-btn u-btn-dis".

귀하의 웹사이트가 IE6 등의 브라우저와 호환되지 않는 경우 상태 식별 방법은 독립적인 상태 분류(.z-) 방법인 .u-btn.z-dis, .m-를 채택할 수도 있습니다. box .z-sel을 입력한 다음 class="u-btn z-dis"와 같이 사용하세요.

모듈 및 컴포넌트의 하위 선택자를 위한 확장 클래스

때때로 모듈에 유사한 항목이 있는 경우 이를 컴포넌트 및 확장으로 만들지 않으면 하위 선택자 및 확장을 사용할 수도 있습니다.

하위 항목 선택기: .m-login .btn{}.

하위 선택기 확장: .m-login .btn-1{}, .m-login .btn-dis{}.

독립적인 상태 분류(.z-) 방법인 .m-login .btn.z-dis{}를 사용한 다음 class="btn z-dis"와 같이 사용할 수도 있습니다.

참고: 이 방법은 클래스 선택기에 사용됩니다. 태그를 선택기로 직접 사용하는 경우에는 이 이름 지정 방법을 사용할 필요가 없습니다.

참고: 확장 클래스와 대규모 하위 선택자 클래스 간의 명명 규칙 충돌을 방지하기 위해 하위 선택자에는 단일 문자가 허용되지 않습니다.

예를 들어 .m-list .a{}는 허용되지 않습니다. .a를 확장해야 할 경우 .a-bb가 되어 큰 카테고리의 명명 규칙과 충돌하기 때문입니다.

그룹 선택기는 때때로 확장 메소드를 대체할 수 있습니다.

때로는 동일한 유형의 두 모듈이 매우 유사하더라도 둘 사이에 종속성이 없기를 바랄 때가 있습니다. 확장된 방법을 사용하면 선택기를 병합하여 공통 스타일을 설정할 수 있습니다.

이 방법을 사용하는 전제는 동일한 종류, 기능, 외관이 유사하며 유지 관리가 용이하도록 동일한 코드 영역에 작성한다는 것입니다.

따라서 모듈이나 구성 요소가 다른 모듈이나 구성 요소에 중첩되거나 중첩될 수 있는 경우 태그 선택기를 주의해서 사용하고, 필요한 경우 클래스 선택기를 사용하고, 명명 방법에 주의하여 .m-layer 를 사용할 수 있습니다. layerxxx, .m-list2 및 .list2xxx는 하위 선택기의 오염을 줄이기 위해 형성됩니다.