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

6. 적절한 코드 주석

코드 주석을 사용하면 다른 사람이 코드를 더 쉽게 이해할 수 있고, 코드 주석을 합리적으로 구성하면 구조가 더 명확해집니다. 스타일 시트 시작 부분에 디렉토리를 추가하도록 선택할 수 있습니다:

/*———————————
1. 헤더 재설정
3. 콘텐츠
4. 사이드바
5. 바닥글
———————————– */

이렇게 하면 코드 구조가 명확해집니다. 한눈에 코드를 쉽게 찾고 수정할 수 있습니다.

코드의 주요 내용도 적절하게 나누어야 하며, 필요한 경우 코드에 주석도 달아야 팀 발전에도 도움이 됩니다.

/* ** 헤더 ***/

#header{height:145px;position:relative; }

#header h1{width:324px;margin:45px0020px;float:left height:72px; }

/*** 콘텐츠 ***/

#content{배경:#fff;width:650px;float:left;min-height:600px;overflow :hidden;}

#content h1{color:#F00}/* 글꼴 색상 설정*/

#content .posts{overflow:hidden }

#content .recent{margin-bottom:20px;border-bottom:1pxsolid#f3f3f3;position:relative;overflow:hidden; }

 

/*** 바닥글 ***/

#footer{clear:both;padding:50px5px0;overflow:hidden;}

#footer h4{color:#b99d7f;font-family:Arial,Helvetica,sans-serif;font -size:1.1 em; }

7. CSS 코드를 정렬하세요

코드의 속성을 알파벳 순으로 정렬할 수 있으면 수정 사항 검색:

/*** 스타일 속성은 알파벳순으로 정렬됩니다 ***/

div{

background-color:#3399cc ;

색상:#666;

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

높이:300px;

여백: 10px5px;

패딩:5px010px5px;

너비:30%;

z-index:10;

}

8. CSS를 읽기 쉽게 유지

읽기 쉬운 CSS를 작성하면 스타일을 더 쉽게 찾고 수정할 수 있습니다. 다음 두 가지 경우 중 어느 경우가 더 읽기 쉬운지는 자명하다고 생각합니다.

/*** 각 스타일 속성에 대해 한 줄 작성 ***/

div{

배경색:#3399cc;

색상:# 666;

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

높이:300px;

여백:10px5px;

패딩: 5px010px5px;

너비:30%;

z-index:10;

}

/*** 모든 스타일 속성은 같은 줄에 작성됩니다 ** */

div{배경색:#3399cc;색상:#666;글꼴:1.2em/1.4emArial,Helvetica,sans-serif;높이:300px;마진:10px5px;패딩:5px010px5px;너비: 30%;z-index:10; }

스타일 속성이 더 적은 일부 선택기에 대해서는 다음 줄을 작성하겠습니다.

/*** 속성이 적은 선택기 속성은 같은 줄에 작성됩니다 ***/

div{ background-color:#3399cc;color:#666;}

이 규칙에 대해 엄격하고 빠른 규칙은 없지만, 어떤 방식으로 사용하든 내 조언은 항상 코드를 일관되게 유지하라는 것입니다. 속성이 많은 경우 별도의 줄에 작성하세요. 속성이 3개 미만인 경우 한 줄로 작성하시면 됩니다.

9. 더 나은 스타일 속성 값 선택 ​​

CSS의 일부 속성은 다른 속성 값을 사용하지만 효과는 비슷하지만

과 같이 성능에는 차이가 있습니다. 차이점은 border:0은 테두리를 0px로 설정한다는 것입니다. 페이지에는 표시되지 않지만 border의 기본값에 따라 브라우저는 여전히 border-width/border-color를 렌더링합니다. 즉, 메모리 값은 가득차 있는.

그리고 border:none은 테두리를 "none"으로 설정합니다. 즉, 브라우저가 "none"을 구문 분석할 때 렌더링 작업을 수행하지 않습니다. 즉, 메모리 값을 소비하지 않습니다. 따라서 border:none;

을 사용하는 것이 좋습니다.

마찬가지로 display:none 숨겨진 개체 브라우저는 렌더링되지 않으며 메모리를 차지하지 않습니다. 그리고 가시성:숨겨진 의지.

10. @import 대신 를 사용하세요

우선 @import는 XHTML 태그에 속하지도 않고 웹 표준에도 속하지 않습니다. 이전 브라우저와 호환되며 웹사이트 성능에 부정적인 영향을 미칩니다.

11. 외부 스타일 시트 사용

이 원칙은 항상 좋은 디자인 습관입니다. 유지 관리 및 수정이 더 쉬울 뿐만 아니라 더 중요한 것은 CSS 파일을 브라우저에 캐시할 수 있기 때문에 외부 파일을 사용하면 페이지 속도를 향상시킬 수 있다는 것입니다. HTML 문서에 내장된 CSS는 요청이 있을 때마다 HTML 문서와 함께 다시 다운로드됩니다. 따라서 실제 애플리케이션에서는 HTML 문서에 CSS 코드를 작성할 필요가 없습니다.

 

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

12 . CSS 표현식 사용 방지(Expression)

CSS 표현식은 CSS 속성을 동적으로 설정하는 강력하지만 위험한 방법입니다. Internet Explorer는 버전 5부터 CSS 표현식을 지원합니다. 다음 예에서는 CSS 표현식을 사용하여 매시간 배경색을 전환할 수 있습니다.

background-color:expression( (new Date()).getHours()%2?"#B8D4FF":" # F08A00");

위와 같이 표현식에는 JavaScript 표현식이 사용됩니다. CSS 속성은 JavaScript 표현식의 평가를 기반으로 설정됩니다.

표현식의 문제점은 우리가 생각하는 것보다 더 자주 평가된다는 점입니다. 페이지를 표시하고 확대할 때뿐만 아니라 페이지를 스크롤할 때, 마우스를 움직여도 다시 계산됩니다. CSS 표현식에 카운터를 추가하여 표현식이 평가되는 빈도를 추적합니다. 페이지 위에서 마우스를 움직이는 것만으로 10,000개 이상의 계산을 쉽게 수행할 수 있습니다.

CSS 표현식을 사용해야 하는 경우 해당 표현식은 수천 번 평가되며 페이지 성능에 영향을 미칠 수 있다는 점을 기억하세요. 따라서 꼭 필요한 경우가 아니면 CSS 표현식을 사용하지 마세요.

13. 코드 압축

웹사이트 프로젝트를 인터넷에 배포하기로 결정한 경우 웹페이지 로드 속도를 높이기 위해 CSS를 압축하여 주석과 공백을 제거하는 것을 고려해야 합니다. 코드를 압축하려면 CSS 코드를 간소화하고 로딩 속도를 높이기 위해 파일 크기를 줄일 수 있는 YUI 압축기와 같은 도구를 사용할 수 있습니다.

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