CSS 작성을 최적화하는 방법

Css 작성 최적화: 1. 중첩 수준은 너무 깊어서는 안 됩니다. 일반적으로 4개 수준을 넘지 않아야 합니다. 2. 나중에 수정하는 데 도움이 되지 않는 요소 선택기를 사용하지 마세요. 3. 그룹 선택기를 사용하지 마세요. public class 및 정의 동일한 스타일이 더 편리합니다. 4. 도입되는 파일 수를 줄이고 콘텐츠 표시를 우선시해야 합니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS를 작성할 때 ID, 클래스 등의 이름 지정, 파일 구조, 공통 모듈 추출, 코드 재사용성, 가독성, 확장성 및 유지 관리성을 고려해야 합니다. 이후 단계의 유지 보수 수정. 충분히 과학적인 CSS 작성을 고려할 때 다음 측면을 고려해야 합니다.

먼저 요구사항을 분석하고 필요에 따라 헤더, 내비게이션, 사이드바, 배너 영역, 메인 콘텐츠 영역, 하단 등을 분리합니다. 필요한 것들은 재사용성이 높고 페이징, 팝업창 등 어떤 고정된 모듈에 귀속될 수 없기 때문에 전용 CSS와 js의 별도 섹션, 즉 컴포넌트화를 분리해야 합니다. 구조가 명확하여 유지보수가 용이합니다.

그런 다음 이를 다듬고 테두리, 배경, 아이콘, 글꼴, 여백, 레이아웃 방법 등과 같이 재사용성이 높은 작은 부분을 찾으세요. 많이 사용되어 코드 중복과 유지 관리의 어려움이 발생합니다. 따라서 이 부분은 일률적으로 유지관리되고 수정되어야 한다.

동시에 유지 관리와 상속 또는 계단식 적용 범위를 용이하게 하려면 코드 순서도 중요합니다. 이러한 사고 외에도 주석을 통해 코드 세그먼트 앞에 디렉토리나 이름을 추가하는 것도 유지 관리를 용이하게 할 수 있습니다.

그러면 결론적으로 다음 사항에 주의해야 합니다.

1. 중첩 수준이 너무 깊어서는 안 됩니다. 이렇게 하면 렌더링 시간이 늘어납니다. 일반적으로 4개 이하의 레이어가 가장 좋습니다.

2. 요소 선택기를 사용하지 마세요.

이유:

• 동일한 요소가 여러 번 사용될 수 있습니다. 브라우저가 순회할 때 불필요한 모든 요소를 ​​순회하게 됩니다.

• 요구 사항과 코드 구조는 언제든지 변경될 수 있으며, 다른 페이지에서 재사용되거나 콘텐츠가 이 페이지에 추가될 수 있으므로 요소 선택기를 사용하여 무언가를 잠그는 것은 나중에 수정하는 데 도움이 되지 않습니다.

3. 그룹 선택기를 사용하지 마세요.

예:

.header ul li,.content ul li,.footer ul li{border-left:1px solid red};

이 경우 공용 클래스를 추출한 다음 동일한 스타일을 정의해야 더 편리합니다.

4. 파일 소개 개수 및 순서

파일 요청 개수는 가능한 한 적어야 하며, 내용은 우선 순위대로 표시되어야 하며, 파일은 순서대로 로드되어 사용자가 더 많은 것을 볼 수 있어야 합니다. 중요한 것 먼저.

모순의 관점에서 볼 때, 스타일 이름을 지정할 때 "뉴스", "정보" 등 디자인 초안에서 유사한 스타일을 가진 서로 다른 기능을 가진 두 모듈을 내용별로 명명하는 것을 고려할 수 없습니다. 카테고리, 기능, 페이지별로 고려됩니다. 사람들이 이름과 구조를 더 쉽게 연결할 수 있도록 하세요. CSS 작성에 능숙해지면 CSS 전처리기를 사용하여 효율성을 높일 수 있습니다.

(학습 영상 공유: css 영상 튜토리얼)

위 내용은 CSS 작성을 최적화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!