효율적이고 깔끔한 CSS 코드의 원칙(1부)

CSS는 배우기 어렵지 않지만 대규모 프로젝트에서는 관리하기가 어렵습니다. 특히 사람들마다 CSS 작성 스타일이 조금씩 다를 때 팀 내에서 의사소통이 더 어려워집니다. 효율적이고 깔끔한 CSS 코드 원칙:

1. 전역 재설정이 아닌 재설정을 사용하세요

일부 재설정에는 재설정을 사용하는 것이 다릅니다. 브라우저 호환성을 달성하기 위한 브라우저 요소의 기본 속성입니다. 하지만 전역 재설정을 사용하지 마세요.

*{margin:0;padding:0 }

이것은 느리고 비효율적인 방법일 뿐만 아니라, 또한 이로 인해 일부 불필요한 요소의 여백과 패딩도 재설정됩니다. YUI Reset과 Eric Meyer의 사례를 참고하는 것이 좋습니다.

/**내부 및 외부 여백 지우기 **/

몸, h1, h2, h3, h4, h5, h6, hr, p,

blockquote,/* 구조 요소 구조 요소*/

dl, dt, dd, ul, ol, li,/* 목록 요소 목록 요소*/

pre,/* 텍스트 서식 지정 요소 텍스트 형식 요소*/

form, fieldset, legend, Button, input, textarea,/* 양식 요소 양식 요소*/

th, td,/* 테이블 요소 테이블 요소*/

img/* img 요소 그림 요소*/{

border:mediumnone;

margin:0;

padding:0;

}

/**기본 글꼴 설정 **/

body,button, input, select, textarea {

font:12px/1.5'宋体',tahoma, Srial, helvetica,sans-serif; }

h1, h2, h3, h4, h5, h6{font-size:100% }

em{font-style:normal;}

/**목록 요소 재설정 **/

ul, ol {list-style:none }

/**하이퍼링크 요소 재설정 **/

a; {텍스트 장식:없음;색상:#333;}

a:hover {text-장식:밑줄;색상:#F40; }

/**이미지 요소 재설정 **/

img{border:0px;}

/**테이블 요소 재설정 **/

테이블 {border-collapse:collapse;border-spacing:0 }

2. 좋은 이름 지정 습관

분명히 지저분하거나 의미가 없는 이름은 누구나 미치게 만들 것입니다. 이 코드처럼:

.aaabb{margin:2px;color:red;}

실제 프로젝트에서는 초보자라도 이런 클래스 이름을 지정하지 않을 것이라고 생각한 적이 있습니까? 이러한 코드도 매우 문제가 많습니다.

My name is Wiky

문제는 모두 변경해야 하는 경우입니다. 원래 빨간색 글꼴이 파란색으로 바뀌면 스타일은 다음과 같습니다:

.red{color:bule;}

이러한 이름 지정은 매우 혼란스럽습니다. .leftBar라는 동일한 사이드바가 있다는 것은 수수께끼입니다. 오른쪽 사이드바로 수정해야 한다면 매우 번거로운 일이 될 것입니다. 따라서 클래스나 ID의 이름을 지정하는 데 요소의 특성(색상, 위치, 크기 등)을 사용하지 마십시오. #navigation{...}, .sidebar{...}, .postwrap과 같은 의미 있는 이름을 선택할 수 있습니다. {…}

이런 방식으로 이러한 클래스나 ID를 정의하는 스타일을 어떻게 수정하더라도 이들과 HTML 요소 간의 연결은 영향을 받지 않습니다.

또 다른 상황이 있습니다. 일부 고정 스타일은 정의된 후에 수정되지 않습니다. 그러면

과 같이 이름을 지정할 때 언급한 상황에 대해 걱정할 필요가 없습니다.

.alignleft{float:left;margin-right:20px;}

.alignright{float:right;text-align:right;margin-left:20px;}

. clear{clear:both;text-indent:-9999px;}

그런 단락에서는

저는 절!

이 단락을 원래 왼쪽 정렬에서 오른쪽 정렬로 변경해야 하는 경우 클래스 이름을 alignright로 수정하기만 하면 됩니다.

3. 코드 약어

CSS 코드 약어는 코드 작성 속도를 높이고 코드 양을 간소화할 수 있습니다. 여백, 패딩, 테두리, 글꼴, 배경 및 색상 값 등을 포함하여 CSS에서 축약할 수 있는 속성이 많이 있습니다. 코드를 축약하는 방법을 배우면 원본 코드는 다음과 같습니다.

li{

글꼴 계열:Arial,Helvetica,sans-serif;

글꼴 크기:1.2em;

줄 높이:1.4em ;

padding-top:5px;

padding-bottom:10px;

padding-left:5px;

}

은 다음과 같이 축약할 수 있습니다.

li{

글꼴:1.2em/1.4emArial,Helvetica,sans-serif ;

padding:5px010px5px;

}

4. CSS 상속 사용 요소가 동일한 스타일을 사용하는 경우 상위 요소에 동일한 스타일을 정의하고 이러한 CSS 스타일을 상속하도록 하는 것이 가장 좋습니다. 이렇게 하면 코드를 잘 유지하고 코드 양을 줄일 수 있습니다. 그러면 원래 코드는 다음과 같습니다.

#container li{font-family:Georgia,serif }

#container p{font-family:Georgia,serif; ; }

#container h1{font-family:Georgia,serif }

은 다음과 같이 축약될 수 있습니다. #container {font-family:Georgia,serif; }

5. 여러 선택기 사용

공통 스타일이 있는 경우 여러 CSS 선택기를 하나로 병합할 수 있습니다. 이렇게 하면 코드가 간결해질 뿐만 아니라 시간과 공간도 절약됩니다. 예:

h1{글꼴-가족:Arial,Helvetica,sans-serif;글꼴-가중치:일반; }

h2{글꼴-가족:Arial,Helvetica,sans-serif;글꼴-가중치:일반; }

h3{font-family:Arial,Helvetica,sans-serif;font-weight:normal; }

을 병합할 수 있습니다. :

h1, h2, h3{font-family:Arial, Helvetica, sans-serif;font-weight:normal; }

효율적이고 깔끔한 CSS 코드 원칙(1부) 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!