꼭 봐야 할 효율적이고 깔끔한 CSS 코드 원칙

1. 전역 재설정 사용
브라우저 요소마다 기본 속성이 다릅니다. 브라우저 호환성을 위해 브라우저 요소의 일부 기본 속성을 재설정하려면 재설정을 사용하세요. 그러나 전역 재설정을 사용하지 마십시오.
*{ margin:0; }
이는 느리고 비효율적인 방법일 뿐만 아니라 일부 불필요한 결과를 초래하기 때문입니다. 요소에는 여백과 패딩도 재설정됩니다. YUI Reset과 Eric Meyer의 사례를 참고하는 것이 좋습니다. 재설정은 정적이지 않습니다. 브라우저 호환성과 운영 편의성을 달성하려면 프로젝트의 다양한 요구 사항에 따라 적절하게 수정해야 합니다. 제가 사용하는 재설정은 다음과 같습니다:
/**내부 및 외부 여백 지우기 **/
body, h1, h2, h3, h4, h5, h6, hr, p,
blockquote,
dl, dt, dd, ul, ol, li,
pre,
form, fieldset, legend, 버튼, 입력, 텍스트 영역,
th, td,
img{
border:medium none;
여백: 0;
패딩: 0;
}
/**기본 글꼴 설정 **/
body,button, input, select, textarea {
글꼴: 12px/1.5 ,tahoma , Srial, helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 { 글꼴 크기: 100%; }
em{font-style:normal;}
/**목록 요소 재설정 **/
ul, ol { 목록 스타일: 없음 }
/**하이퍼링크 요소 재설정 **/
a { 텍스트 장식: 없음; 333; }
a:hover { 텍스트 장식: 밑줄; 색상:#F40; }
/**이미지 요소 재설정 **/
img{ border:0px;}
/**테이블 요소 재설정 * */
table { 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;
패딩 상단: 5px;
패딩 하단: 10px;
padding -left:5px;
}
은 다음과 같이 축약될 수 있습니다:
li{
글꼴: 1.2em/1.4em Arial, Helvetica, sans-serif;
padding :5px 0 10px 5px;
}
이러한 속성을 축약하는 방법에 대해 자세히 알고 싶다면 "일반적인 CSS 약어 구문 요약"을 참조하세요.
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. 여러 선택기 사용
그들은 공통된 스타일을 가지고 있습니다. 이렇게 하면 코드가 간결해질 뿐만 아니라 시간과 공간도 절약됩니다. 예:
h1{ 글꼴-가족:Arial, Helvetica, sans-serif; 글꼴-가중치:normal; }
h2{ 글꼴-가족:Arial, Helvetica, sans-serif; }
h3{ 글꼴 패밀리:Arial, Helvetica, sans-serif; 글꼴 무게:normal; }
은
h1, h2, h3{ 글꼴 패밀리:Arial, Helvetica, sans로 결합 가능 -serif ; 글꼴 두께:일반 }
6. 적절한 코드 주석
코드 주석을 사용하면 다른 사람이 자신의 코드를 더 쉽게 이해할 수 있고, 코드 주석을 합리적으로 구성하면 구조가 더 명확해집니다. 스타일 시트 시작 부분에 디렉토리를 추가하도록 선택할 수 있습니다.
그러면 코드 구조가 한 눈에 명확해지며 코드를 쉽게 찾고 수정할 수 있습니다.
코드의 주요 내용도 적절하게 나누어야 하며, 필요한 경우 코드에 주석도 달아야 팀 발전에도 도움이 됩니다.
/***    헤더  ***/
#header{ 높이:145px; 위치:상대적; }
#header h1{ 너비:324px; 여백:45px 0 20px; float:left; 높이:72px;}
/*** 콘텐츠 *** /
#content{ 배경:#fff; 너비:650px; 최소 높이:600px; 오버플로:숨김;}
#content h1{color:#F00}
#content .posts { 오버플로:숨김 ; }
#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; 위치: 상대; 오버플로: 숨김 }
/***    바닥글  ***/
#footer { 클리어:모두; 패딩:50px 5px 0; 오버플로:숨김;}
#footer h4{ color:#b99d7f; 글꼴-가족:Arial, Helvetica, sans-serif; >7. CSS 코드 정렬
코드의 속성을 알파벳순으로 정렬할 수 있으면 수정 사항을 찾는 것이 더 빠릅니다:
/*** 스타일 속성은 알파벳순으로 정렬됩니다 ***/
div{
background- 색상:#3399cc;
색상:#666;
글꼴:1.2em/1.4em Arial, Helvetica, sans-serif;
높이:300px;
여백:10px 5px;
패딩 :5px 0 10px 5px;
width:30%;
z-index:10;
}
8. CSS를 읽기 쉽게 유지
읽기 쉬운 CSS를 작성하면 스타일을 더 쉽게 찾고 수정할 수 있습니다. . 나는 다음 두 가지 경우 중 어느 것이 더 읽기 쉬운지는 자명하다고 생각합니다.
/*** 각 스타일 속성에 대해 한 줄씩 작성 ***/
div{
background-color:#3399cc;
color:#666;
글꼴: 1.2em/1.4em Arial, Helvetica, sans- serif;
높이:300px;
여백:10px 5px;
패딩:5px 0 10px 5px;
너비:30%;
z-index:10;
}
/*** 모든 스타일 속성은 같은 줄에 작성됩니다 ***/
div{ background-color:#3399cc; color:#666; 글꼴: 1.2em/1.4em Arial, Helvetica, sans-serif 높이: 300px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }
스타일 속성이 더 적은 일부 선택기의 경우 다음 줄을 작성합니다.
/*** 속성이 적은 선택기 속성은 같은 줄에 작성됩니다 ***/
div{ background-color:#3399cc; color:#666;}
이 규칙은 어렵지도 빠르지도 않지만 어떤 방식으로 작성하든 항상 코드를 일관되게 유지하는 것이 좋습니다. 속성이 많은 경우 별도의 줄에 작성하세요. 속성이 3개 미만인 경우 한 줄로 작성하시면 됩니다.
9. 더 나은 스타일 속성 값 선택 ​
CSS의 일부 속성은 효과는 비슷하지만 성능에는 차이가 있습니다.
차이점은 border: 0 으로 설정하세요. , 페이지에는 표시되지 않지만 border의 기본값에 따라 브라우저는 여전히 border-width/border-color를 렌더링합니다. 즉, 메모리 값이 사용됩니다.
그리고 border:none은 테두리를 "none"으로 설정합니다. 즉, 브라우저가 "none"을 구문 분석할 때 렌더링 작업을 수행하지 않습니다. 즉, 메모리 값을 소비하지 않습니다. 따라서 border:none;
을 사용하는 것이 좋습니다. 마찬가지로 display:none은 개체 브라우저를 숨기고 렌더링하지 않으며 메모리를 차지하지 않습니다. 그리고 가시성:숨겨진 의지.
10. @import 대신 를 사용하세요
우선 @import는 XHTML 태그에 속하지 않으며 이전 브라우저와 잘 호환되지 않으며 부정적인 특성을 가지고 있습니다. 웹사이트 성능에 영향을 미칩니다. 자세한 내용은 "고성능 웹사이트 디자인: @import를 사용하지 마세요"를 참조하세요. 따라서 @import
11. 외부 스타일 시트 사용
이 원칙은 항상 좋은 디자인 습관입니다. 유지 관리 및 수정이 더 쉬울 뿐만 아니라 더 중요한 것은 CSS 파일을 브라우저에 캐시할 수 있기 때문에 외부 파일을 사용하면 페이지 속도를 향상시킬 수 있다는 것입니다. HTML 문서에 내장된 CSS는 요청이 있을 때마다 HTML 문서와 함께 다시 다운로드됩니다. 따라서 실제 애플리케이션에서는 HTML 문서에 CSS 코드를 작성할 필요가 없습니다.

또는

대신< 외부 스타일 시트 가져오기:

12. CSS 표현식(Expression) 사용을 피하세요
CSS 표현식은 CSS 속성을 동적으로 설정하는 강력하지만 위험한 방법입니다. Internet Explorer는 버전 5부터 CSS 표현식을 지원합니다. 다음 예에서는 CSS 표현식을 사용하여 매시간 배경색을 전환할 수 있습니다.
background-color: 표현식( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" ) ;
위와 같이 표현식에는 JavaScript 표현식이 사용됩니다. CSS 속성은 JavaScript 표현식의 평가를 기반으로 설정됩니다.
표현의 문제점은 우리가 생각하는 것보다 더 자주 평가된다는 점입니다. 페이지를 표시하고 확대할 때뿐만 아니라 페이지를 스크롤할 때, 마우스를 움직여도 다시 계산됩니다. CSS 표현식에 카운터를 추가하여 표현식이 평가되는 빈도를 추적합니다. 페이지 위에서 마우스를 움직이는 것만으로 10,000개 이상의 계산을 쉽게 수행할 수 있습니다.
CSS 표현식을 사용해야 하는 경우 해당 표현식은 수천 번 평가되며 페이지 성능에 영향을 미칠 수 있다는 점을 기억하세요. 따라서 꼭 필요한 경우가 아니면 CSS 표현식을 사용하지 마세요.
13. 코드 압축
웹사이트 프로젝트를 인터넷에 배포하기로 결정한 경우 웹페이지 로드 속도를 높이기 위해 CSS를 압축하여 주석과 공백을 제거하는 것을 고려해야 합니다. 코드를 압축하려면 YUI Compressor
와 같은 일부 도구를 사용하면 CSS 코드를 간소화하고 파일 크기를 줄여 로딩 속도를 높일 수 있습니다.

위 내용은 꼭 봐야 할 효율적이고 깔끔한 CSS 코드 원칙의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!