클래스 명명 규칙

초심자에게는 html을 작성할 때 html 태그에 스타일과 이름을 추가하는 것이 골치 아픈 일입니다. 태그 이름을 무엇으로 지정해야 할지 모르거나 그냥 아무렇게나 이름을 지정하는 것은 일상적인 개발에 매우 ​​불편합니다. 오늘은 html에 클래스 명명 규칙을 요약해 보겠습니다.

공통 클래스 키워드:

레이아웃 클래스: 헤더, 푸터, 컨테이너, 메인, 콘텐츠, 어사이드, 페이지, 섹션
Wrapping 클래스: 랩, 내부
블록 클래스 ： 지역, 블록, 상자
구조 클래스：hd, bd, ft, 위쪽, 아래쪽, 왼쪽, 오른쪽, 중간, 열, 행, 그리드, 범위
list class：목록, 항목, 필드
메인 하위 클래스 : 기본, 보조, 하위, 마이너
크기 클래스: s, m, l, xl, 대형, 소형
상태 클래스: 활성, 현재, 확인됨, 가리키기, 실패, 성공, 경고, 오류, 켜기, 끄기
Navigation 클래스: 탐색, 이전, 다음, 이동 경로, 앞으로, 뒤로, 표시기, 페이징, 처음, 마지막
Interaction 클래스: 팁, 경고, 모달, 팝, 패널, 탭, 아코디언, 슬라이드, 스크롤, 오버레이 ,
별 카테고리: rate, star
분리 카테고리: 그룹, 분리, 구분선
및 기타 카테고리: 전체, 반, 삼등, 쿼터
테이블 카테고리: 테이블, tr, td, 셀, 행
사진 카테고리: img, 썸네일, 원본, 앨범, 갤러리
언어 카테고리: cn, en
포럼 카테고리: 포럼, bbs, 주제, 포스트
방향 카테고리: 위, 아래, 왼쪽, 오른쪽
기타 의미 클래스: btn, 닫기, 확인, 취소, 전환, 링크, 제목, 정보, 소개, 추가, 아이콘, 전화번호, 날짜, 이메일, 사용자 보기.. .
키워드가 정해지면 먼저 몇 가지 간단한 규칙을 만들어 보겠습니다.
간단한 규칙 만들기:
.item-img와 같은 대시로 연결하세요.
.item-img.item-img와 같이 전문화를 나타내려면 두 개의 대시를 사용하세요. 작은 것은 .item-img 전문화
상태의 기초를 나타냅니다. 클래스는 단어를 직접 사용합니다. .active, .checked와 같은 위의 키워드를 참조하세요.
아이콘 앞에는 icon-이 붙습니다(글꼴 아이콘의 이름은 .icon-font.i-name을 사용하여 지정됩니다).
모듈 이름은 .slide, .modal, .tips, .tabs와 같은 키워드로 지정됩니다. 전문화는 .imgslide--full, .modal--pay, .tips--up, .tabs--simple
js 작업 클래스에는 js라는 접두사가 균일하게 붙어야 합니다.
.a.b.c.d
와 같이 4개 이상의 클래스를 조합하여 사용하지 마세요. 수정 키워드:
헤더를 예로 들면, 표현하기 위해 접두사를 추가할 수 있습니다. 예를 들어 블록 header.block-hd(hd는 header의 약어), 모달 header.modal-hd 및 기사 header.article-hd.
같은 제목을 페이지 제목.page-tt(제목의 약어), 블록 제목.block-tt 등으로 나눌 수도 있습니다.
마찬가지로, 이는 두 번째 질문으로 이어집니다. 특정 클래스를 전문화하려면 어떻게 해야 합니까?
특수 클래스:
위의 tt를 예로 들면 아마도 세 가지 방법이 있을 것입니다.
첫 번째 범죄: 클래스를 직접 수정하고, .page-tt를 .page-user-tt로 변경합니다(% 접두어를 사용할 수 있습니다). scss는 공유 코드를 정의합니다).
두 번째 방법: 위에서 정의한 규칙에 따라 클래스를 .page-tt.page-tt--user로 추가합니다. .page-tt를 기반으로 하는 독립 클래스입니다.
세 번째 방법: 상위 클래스를 사용하고 범위를 지정하여 .page-user .page-tt를 형성합니다.
일반적으로 우리는 두 번째와 세 번째 방법을 사용합니다. 두 방법 모두 동일한 .page-tt를 갖고 있어 기본 공통 스타일을 더 쉽게 제어할 수 있기 때문입니다.
부모 클래스를 통해 제어하는 ​​세 번째 방법에서 세 번째 논의 주제인 계층 구조

level
계층 구조의 가장 적합한 예는 다음 구조와 같은 ul>li 구조입니다.

<ul>
    <li>
        <a href="#"><img src="" alt=""></a>
        <h3><a href="#"></a></h3>
        <p></p>
    </li>
</ul>

일반적으로 레벨을 정의하는 방법에는 두 가지가 있습니다. 첫 번째는 상속이고 두 번째는 키워드입니다.

// 继承式
ul.card-list
    li.list-item
        a.item-img-link>img.item-img
        h3.item-tt>a.item-tt-link
        p.item-text

// 关键词式
ul.card-list
    li.item
        a.field-img-link>img.field-img
        h3.field-tt>a.field-tt-link
        p.field-text

위에서 볼 수 있듯이 상속 유형에서는 일반 자식 요소 뒤에 부모 요소의 마지막 단어가 옵니다. 예를 들어 li 뒤에 ul 목록이 오고, li의 자식 요소 뒤에는 li의 항목은 키워드 유형으로, 목록>항목>파일로 완전히 표현되는 레벨은 정확히 3개의 레벨을 구성합니다.
마지막으로 계층 구조는 스타일의 범위를 제어하는 ​​방법에 대한 마지막 질문으로 이어집니다.

관련 추천:

클래스와 id의 차이점은 무엇입니까

html에서 요소의 클래스 이름을 지정하는 속성 클래스

id와 클래스를 사용하는 방법 CSS 분석에서 요소 스타일의 인스턴스 제어

위 내용은 클래스 명명 규칙의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!