CSS 파일의 유지 관리성 및 가독성 향상 가이드 페이지 1/2_Experience Exchange

따라서 잘 구조화된 코드는 유지 관리성을 크게 최적화할 수 있습니다. 아래에는 더 나은 CSS 스타일 구성 습관으로 웹 프런트 엔드 개발을 수행하기 위한 지침으로 CSS 파일의 유지 관리성을 향상시키는 4가지 팁이 나열되어 있습니다.

1. CSS 스타일 파일 분해

작은 프로젝트의 경우 코드를 작성하기 전에 페이지 구조나 페이지 내용에 따라 코드를 여러 블록으로 나누고 코멘트를 줍니다. . 예를 들어 전역 스타일, 레이아웃, 글꼴 스타일, 양식, 주석 등을 여러 다른 블록으로 분리하여 작업을 계속할 수 있습니다.

대규모 프로젝트의 경우 이는 아무런 영향을 미치지 않습니다. 이 시점에서 스타일을 여러 가지 스타일 시트 파일로 나누어야 합니다. 아래의 마스터 스타일시트는 이 접근 방식의 예이며 주요 작업은 다른 스타일 파일을 가져오는 것입니다. 이 방법을 사용하면 스타일 구조를 최적화할 수 있을 뿐만 아니라 불필요한 서버 요청을 줄이는 데도 도움이 됩니다. 파일을 분해하는 방법에는 여러 가지가 있으며 마스터 스타일시트는 가장 일반적인 방법을 사용합니다.



@import "reset.css?1.1.5";
@import "layout.css?1.1.5"
@import "colors.css?1.1 .5";
@import "typography.css?1.1.5";
@import "flash.css?1.1.5";
/* @import "debugging.css?1.1.5" ; */


동시에 대규모 프로젝트의 경우 CSS 파일에 대한 업그레이드 플래그나 일부 진단 및 기타 조치를 추가할 수도 있습니다. 이에 대해서는 여기서 자세히 설명하지 않습니다. 구현 작업 중 요약과 사고에 주의하시기 바라며, jb51.net의 관련 기사를 참고하셔도 좋습니다.

2. CSS 파일 인덱스
전체 CSS 파일의 구조를 빠르게 이해하려면 파일 시작 부분에 파일 인덱스를 생성하는 것이 좋습니다. .
가능한 방법은 트리 형태의 인덱스를 구축하는 것입니다. 구조적 ID와 클래스는 트리의 가지가 될 수 있습니다.
[레이아웃]
* 본문
+ 헤더 / #header
+ 내용 / #content
- 왼쪽 열 / #leftcolumn
- 오른쪽 열 / #rightcolumn
- 사이드바 / #sidebar
- RSS / #rss
- 검색 / #search
- 상자 / .box
- 사이드 블로그 / #sideblog
+ 바닥글 / #footer
탐색 #navbar
광고 .ads
컨텐츠 헤더 h2

또는 다음과 같을 수도 있습니다:
[컨텐츠]
1. 헤더 / #헤더
2.1. 탐색 / #navbar
3. 콘텐츠 / #content
3.1. 왼쪽 열 / #leftcolumn
3.2. 오른쪽 열 / #rightcolumn
3.3.3.1. / # rss
3.3.2. 검색 / #search
3.3.3.box
3.3.4. 사이드블로그 / #sideblog
3.3.5. 4. 바닥글 / #바닥글


또 다른 방법은 들여쓰기 없이 내용만 먼저 나열하는 것입니다. 아래 예에서 RSS 섹션으로 이동해야 하는 경우 간단한 검색만 수행하면 됩니다.

[컨텐츠]
1. 본문
2. 헤더 / #header
3. 네비게이션 / #navbar
4. 컨텐츠 / #컨텐츠
5. #leftcolumn
6. 오른쪽 열 / #rightcolumn
8. RSS / #rss
9. 검색 / .box
11. 사이드블로그 / #sideblog
12. 광고 / .ads
13. 바닥글 / #바닥글

/*--[8. RSS / #rss]--*/ #rss { ... }
#rss img { ... }

이러한 스타일 검색을 정의하면 다른 사람들이 코드를 더 쉽게 읽고 배울 수 있습니다. 대규모 프로젝트 작업 시 코드를 읽을 때 쉽게 참조할 수 있도록 검색어를 인쇄할 수도 있습니다.