CSS 파일의 유지 관리성을 향상시키는 5가지 방법 요약_경험 교환

1. 스타일 분해

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

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

/*-------------------------------------------- --- -------------

[마스터 스타일시트]
프로젝트: Smashing Magazine
버전 : 1.1
마지막 변경: 05/02/08 [fixed Float bug, vf]
담당자: Vitaly Friedman(vf), Sven Lennartz(sl)
주요 용도: 잡지
--- ----- ------------------- ----- ---------*/
@import "reset.css";
@import "layout.css"
@import "colors.css"; 🎜>@import " typography.css";
@import "flash.css";
/* @import "debugging.css" */

동시에, 대규모 프로젝트의 경우 , CSS 파일을 추가할 수도 있습니다. 업그레이드 플래그 또는 일부 진단 조치는 여기에 자세히 설명되어 있지 않습니다.

2. CSS 파일 인덱스 생성

전체 CSS 파일의 구조를 빠르게 이해하기 위해서는 파일 시작 부분에 파일 인덱스를 생성해 두는 것이 좋습니다. 한 가지 가능한 방법은 트리 모양의 인덱스를 만드는 것입니다. 즉, 구조적 ID와 클래스 모두 트리의 가지가 될 수 있습니다. 다음과 같습니다:

/*---------------------------- - -------------
[레이아웃]
* 본문
+ 헤더 / #헤더
+ 콘텐츠 / #content
- 왼쪽 열 / #leftcolumn
- 오른쪽 열 / #rightcolumn
- 사이드바 / #sidebar
- RSS / #rss
- 검색 / #search
- Boxes / .box
- Sideblog / #sideblog
+ Footer / #footer
Navigation #navbar
Advertisements .ads
Content header h2
————————— — ————————————-*/
또는 다음과 같을 수도 있습니다:

/*---------------- --- ----------------------------------

[목차]
1. 본문
2. 헤더 / #header
2.1. 탐색 / #navbar
3.1. 컬럼 / # leftcolumn
3.2. 오른쪽 컬럼 / #rightcolumn
3.3. 사이드바 / #sidebar
3.3.1 RSS / #rss
3.3.2. 3. 박스 / .box
3.3.4. 사이드블로그 / #사이드블로그
3.3.5. 광고 / .ads
4. 바닥글 / #바닥글

------ -- ------------------------------------------------ -- -------*/

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

/*-------------------------------------------- --- -------------

[목차]
본문
2. . 헤더 / #header
3. 탐색 / #navbar
5. 왼쪽 열 / #leftcolumn
7. #sidebar
8. RSS / #rss
9. 검색 / #search
10. Boxes / .box
11. Sideblog / #sideblog
12. 13. 바닥글 / # 바닥글

------------------------- ----------- -------------*/



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

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

3. 색상 및 레이아웃 정의

CSS에서는 상수를 사용할 수 없지만 색상 및 레이아웃 코드를 작성할 때 여러 번 사용할 수 있는 클래스를 자주 접하게 된다고 볼 수 있습니다. CSS 상수.

CSS 상수 정의의 불확실성을 줄이는 한 가지 방법은 CSS 파일 상단의 주석에 몇 가지 정의를 넣는 것, 즉 상수를 정의하는 것입니다. 가장 간단한 응용 프로그램 중 하나는 색상표를 만드는 것입니다. 이러한 방식으로 전체 페이지의 색상을 빠르게 이해할 수 있으므로 반복 수정 중에 발생할 수 있는 실수를 피할 수 있습니다. 색상을 변경해야 할 경우 빠르게 찾을 수 있습니다.

/*-------------------------------------------- --- -------------
# [색상 코드]

# 진한 회색(텍스트): #333333
# 진한 파란색(제목, 링크) #000066
# 중간 파란색(헤더) #333399
# 연한 파란색(상단 탐색) #CCCCFF
# 중간 회색: #666666
# */

또는 레이아웃에 사용된 색상을 설명하도록 선택할 수도 있습니다. 특정 색상에 대해 해당 색상을 사용하는 블록을 나열할 수 있습니다. 물론 페이지 요소별로 색상을 나열하도록 선택할 수도 있습니다.

/*-------------------------------------------- --- -------------
[색상 코드]
배경: #ffffff(흰색)
내용 : #1e1e1e(연한 검정색)
헤더 h1: #9caa3b(녹색)
헤더 h2: #ee4117(빨간색)
바닥글: #b5cede(진한 검정색)

a(표준) : #0040b6(진한 파란색)
a(방문함): #5999de(하늘색)
a(활성): #cc0000(분홍색)
------------ --- ---------------------------------- -* /

에도 동일한 레이아웃 예가 있습니다.

/*-------------------------------------------- --- -------------
[타이포그래피]

본문: 1.2em/1.6em Verdana , Helvetica, Arial, Geneva, sans-serif;
헤더: 2.7em/1.3em Helvetica, Arial, "Lucida Sans Unicode", Verdana, sans-serif
입력, 텍스트 영역: 1.1em Helvetica, Verdana, Geneva, Arial, sans -serif;
사이드바 제목: 1.5em Helvetica, Trebuchet MS, Arial, sans-serif;

참고: 이후 제목 수준마다 제목이 0.4em씩 감소합니다.
-- ----- ------------------- ----- ----------*/

4. CSS 속성 서식 지정

코드를 작성할 때 몇 가지 특수 코딩 스타일을 사용하면 CSS의 가독성이 향상됩니다. 코드. 가독성이 많은 도움이 됩니다. 많은 사람들이 서로 다른 코딩 스타일을 가지고 있습니다. 어떤 사람들은 색상과 글꼴 코드를 먼저 입력하는 데 익숙하지만 다른 사람들은 부동 및 위치 지정과 같은 더 "중요한" 속성을 먼저 입력하는 것을 선호합니다. 마찬가지로 페이지 요소는 레이아웃의 구조에 따라 정렬될 수 있습니다:

body,
h1, h2, h3,
p, ul, li,
form {
border : 0;
margin: 0;
padding: 0;
}

일부 개발자는 더 흥미로운 방법을 사용합니다. 즉, 속성을 알파벳 순서로 정렬합니다. 이러한 접근 방식은 일부 브라우저에서 문제를 일으킬 수 있다는 점은 주목할 가치가 있습니다.

형식이 무엇이든 이러한 형식 지정 방법을 명확하게 정의해야 합니다. 이렇게 하면 동료들이 귀하의 코드를 읽을 때 귀하의 노력에 감사하게 될 것입니다.

5. 들여쓰기가 친구가 됩니다!

코드를 더욱 직관적으로 만들려면 한 줄을 사용하여 개요 요소의 스타일을 정의할 수 있습니다. 이 방법은 지정된 선택기에 3개 이상의 속성이 있는 경우 혼란을 야기합니다. 하지만 적당히 사용하면 같은 클래스 내에서도 차이점을 명확하게 구분할 수 있습니다.

#main-column { display: inline; float: left; width: 30em; }
#main-column h1 { 글꼴 계열: Georgia, "Times New Roman", serif; -bottom: 20px; }
#main-column p { color: #333; }

동시에 스타일 수정을 유지하는 것도 골치 아픈 문제입니다. 많은 사람들이 스타일을 수정한 후에 이를 잊어버리기 때문에 나중에 수정된 스타일로 인해 페이지 오류가 발생한 것을 발견하고 열심히 검색해야 합니다. 따라서 수정된 스타일에 대한 특별한 형식을 구성하는 것이 필요합니다. 매우 간단한 방법은 수정된 스타일을 들여쓰기하는 것입니다. 동시에 일부 주석(예: "@new")을 사용하여 표시할 수도 있습니다.

#bar sisi ul li a {
paparan: blok;
warna latar: #ccc;
bawah sempadan: 1px pepejal #999; margin: 3px 0 3px 0;
padding: 3px; /* @new */
}

Secara umumnya, hanya mencipta panduan gaya yang betul akan menjadikan helaian gaya boleh dibaca Seks. Ingat untuk mengalih keluar mana-mana panduan gaya yang tidak membantu anda memahami dokumen dan elakkan menggunakan terlalu banyak panduan gaya untuk terlalu banyak elemen. Kemudian, bekerja keras untuk fail CSS yang boleh dibaca dan diselenggara.