표준 명명 CSS

CSS3가 출시되었고 많은 WEB 프론트엔드 엔지니어들이 이 기술을 활용하기 시작했습니다. CSS 작성 능력을 어떻게 평가합니까? 우리는 이를 설명하기 위해 "좋음", "보통", "끔찍함"과 같은 단어를 사용할 수 있습니다. CSS에서 가장 어려운 점은 무엇입니까? 주요 브라우저와의 호환성입니까? 코드의 단순성과 효율성입니까? 프런트엔드 엔지니어인 Wu Zhi는 다음과 같이 말했습니다. CSS는 어려운 기술이 아니며 표준화하는 방법이 어렵습니다. 명명. 프로젝트는 개인이 완료하며 엔지니어는 자신의 습관에 따라 CSS 이름을 지정할 수 있습니다. 팀워크에 있어서 불규칙한 네이밍은 갈등을 야기하여 전체 프로젝트 진행에 영향을 미칠 수 있습니다. 아래에서 Lingnan Network는 표준화된 방식으로 CSS의 이름을 지정하는 방법을 단계별로 알려드립니다.

CSS를 기능별로 나누는 방법은 다양합니다. 글꼴의 CSS를 Font.css에 저장하고, 색상을 제어하는 ​​CSS를 color.css에 저장합니다. 또는 블록으로 나눕니다. 헤더 CSS를 footer.css에 저장하고, 사이드바를 main.css에 저장합니다. 다양한 관점에는 장점과 단점이 있습니다.

Lingnan Network에서는 CSS 분할 방법인 base.css+common.css+page.css를 권장합니다. 웹사이트의 모든 스타일은 기능에 따라 기본, 공통, 페이지의 세 가지 범주로 구분됩니다. 모든 웹페이지의 최종 스타일 표현은 이 세 가지로 완성됩니다.

기본 레이어는 웹 사이트 페이지 스타일이 의존하는 가장 낮은 레이어로 비교적 안정적이며 유지 관리가 필요하지 않습니다. 일반적으로 base.css에 다음 내용을 저장합니다.

　/*css 재설정 각 브라우저에는 일부 태그 속성에 대한 기본값이 있으므로 일부 태그 속성을 균일하게 설정해야 합니다*/

body,div,dl,dt ,dd ,dl,ol,ul,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,{margin:0;padding:0; 🎜>테이블{border-collapse:collapse;border-spacing:0;}
ol ul{list-style:none;}

/*텍스트 레이아웃*/
.f12{ 글꼴- size:12px;}
.f13{font-size:13px;}
.f14{font-size:14px;}

/*Positioning*/
.tl{ text- algin:left;}
.tc{text-algin:center;}
.tr{text-algin:right;}

/*길이 높이*/
.w10 {너비 :10px;}
.h10{높이:10px;}

/*여백*/
.m10{margin:10px;}
.ml10px{여백-왼쪽: 10px;}
.p10{padding:10px;}
.pr10{padding-right:10px;}
공통 레이어는 중간 레이어에 위치하며 컴포넌트 수준의 CSS를 제공합니다. 페이지의 요소를 상대적으로 독립적인 기능과 스타일을 가진 작은 "템플릿"으로 분할할 수 있습니다. 이러한 템플릿 중 일부는 거의 반복되지 않고 일부는 대량으로 반복됩니다. common.css 스타일로 작성하세요. 웹사이트에서 반복되는 제목을 많이 사용하는 경우 다음과 같이 작성할 수 있습니다.

　.h2{font-size:14px;font-weight:bold;}

페이지 레이어는 페이지 레벨입니다. , 모든 페이지 레이어 CSS를 page.css에 저장하는 것이 좋습니다. 주석은 페이지에 따라 추가하고 유지 관리를 용이하게 하기 위해 블록으로 작성할 수 있습니다. 예:

/*회사 소개*/
.about-text{font-size:12px;}

/*연락처 정보*/
.contact-text{ 글꼴 -size:14px;}
기본 레이어는 유지 관리할 필요가 없습니다. 공통 레이어는 크게 수정되지 않습니다. 페이지 레이어 코드는 여러 엔지니어가 공동으로 개발할 수 있습니다. 충돌을 피하기 위해 이름을 사용할 수 있습니다. CSS 이름 지정은 낙타 이름 지정 및 밑줄 이름 지정으로 표준화될 수 있습니다. 낙타 명명법: 두 번째 단어부터 시작하여 각 단어의 첫 글자를 대문자로 표기합니다. dropMenu, subNavMenu와 같은 밑줄 명명법: 대시 또는 밑줄 _로 구분됩니다(예: drop-menu, sub_nav_menu).

여러 엔지니어가 프로젝트를 완료하는 경우 각 사람에게 독립적인 네이밍 ID를 할당할 수 있습니다. 예를 들어, Lingnan Network는 linknan이라고 합니다. 이름 시작 부분에 .ln-artice li와 같이 독립적인 이름 지정 ID로 두 문자를 할당할 수 있습니다. 이렇게 하면 반복되는 이름 지정으로 인한 충돌을 피할 수 있습니다.