프론트 엔드 작업을 마친 후 많은 사람들은 프로젝트의 구조와 세부 사항을 잊어버립니다. 다만, 코드가 바로 완성되지는 않을 것이며, 남은 시간 동안 지속적인 유지보수 작업이 있을 예정이며, 이러한 작업이 스스로 완료되지 않을 수도 있습니다. 따라서 잘 구조화된 코드는 유지 관리성을 크게 최적화할 수 있습니다. CSS 파일의 유지 관리성을 향상시키는 5가지 방법은 다음과 같습니다. 이는 더 나은 CSS 스타일 가이드입니다.
1. 스타일을 세분화하세요
소규모 프로젝트의 경우 코드를 작성하기 전에 페이지 구조나 페이지 내용에 따라 코드를 여러 블록으로 나누고 의견을 제시하세요. 예를 들어 전역 스타일, 레이아웃, 글꼴 스타일, 양식, 주석 등을 여러 다른 블록으로 분리하여 작업을 계속할 수 있습니다.
대규모 프로젝트의 경우 이는 분명히 아무런 영향을 미치지 않습니다. 이 시점에서 스타일을 여러 가지 스타일 시트 파일로 나누어야 합니다. 아래의 마스터 스타일시트는 이 접근 방식의 예이며 주요 작업은 다른 스타일 파일을 가져오는 것입니다. 이 방법을 사용하면 스타일 구조를 최적화할 수 있을 뿐만 아니라 불필요한 서버 요청을 줄이는 데도 도움이 됩니다. 파일을 분해하는 방법에는 여러 가지가 있으며 마스터 스타일시트는 가장 일반적인 방법을 사용합니다.
/*------------------------------------------------ ------------------ [마스터 스타일시트] |
동시에 대규모 프로젝트의 경우 CSS 파일에 대한 업그레이드 플래그 또는 일부 진단 조치를 추가할 수도 있습니다. 이에 대해서는 여기서 자세히 설명하지 않습니다.
2. CSS 파일 인덱스 생성
전체 CSS 파일의 구조를 빠르게 이해하려면 파일 시작 부분에 파일 인덱스를 만들어 두는 것이 좋습니다. 한 가지 가능한 방법은 트리 모양의 인덱스를 구축하는 것입니다. 즉, 구조적 ID와 클래스가 트리의 가지가 될 수 있습니다. 다음과 같이:
| /*------------------------------------------------ ------------------ [공들여 나열한 것] * 몸 + 헤더 / #헤더 + 콘텐츠 / #콘텐츠 - 왼쪽 열 / #leftcolumn - 오른쪽 열 / #rightcolumn - 사이드바 / #sidebar - RSS / #rss - 검색 / #검색 - 상자 / .box - 사이드블로그 / #사이드블로그 + 바닥글 / #바닥글 탐색 #navbar 광고 .ads 콘텐츠 헤더 h2 ——————————————————————-*/ |
또는 다음과 같이 수행할 수도 있습니다.
/*------------------------------------------------ ------------------ [목차] ------------------------------------- ------*/ |
또 다른 방법은 들여쓰기 없이 내용을 먼저 나열하는 것입니다. 아래 예에서 RSS 섹션으로 이동해야 하는 경우 8.RSS를 검색하면 됩니다.
/*------------------------------------------------ ------------------ [목차] ------------------------------------- ------*/ /*------------------------------------------------ ------------------ |
이러한 스타일 검색을 정의하면 다른 사람들이 코드를 더 쉽게 읽고 배울 수 있습니다. 대규모 프로젝트 작업 시 코드를 읽을 때 쉽게 참조할 수 있도록 검색어를 인쇄할 수도 있습니다.