BS 프로젝트의 CSS 아키텍처_필요한 CSS만 로드_경험 교환

먼저 이 아키텍처의 장점에 대해 이야기해 보겠습니다.
1. 무거운 CSS 작성 작업이 서로 영향을 주지 않고 쉽게 배포될 수 있습니다.
2. 구조가 명확하고 유지관리 및 수정이 쉽습니다.
3. 각 웹페이지는 필요한 CSS만 로드합니다.

요약하자면 개발 효율성 향상, 유지 관리 효율성 향상, 웹페이지 로딩 효율성 향상입니다.

위의 CSS 구조 다이어그램을 설명하겠습니다.

사진 중앙에 있는 5개의 검은색 아이콘은 웹페이지를 나타내고, 위쪽의 아이콘은 마스터 페이지, 아래쪽의 4개 아이콘은 하위 페이지를 나타냅니다. VS를 사용하는 사람이라면 ASP의 include와 동일한 마스터 페이지의 역할을 알고 있을 것입니다. 공통 부분은 마스터 페이지로 만들고, 독립된 부분은 서브 페이지로 만들어 개발 효율성을 높입니다.

사진 상단의 녹색 상자는 전역 CSS 부분으로, 마스터가 호출하여 모든 하위 페이지에 적용되는 스타일 폴더에 저장됩니다.

그림 상단의 파란색 점선 상자는 단일 CSS 부분으로, 각 하위 페이지에는 고유한 CSS 파일을 저장하는 해당 폴더가 있습니다. styles/x 폴더에 저장됩니다. 해당 C# 파일에 의해 제어됩니다. 다른 하위 페이지를 열 때 마스터는 현재 페이지의 CSS를 로드합니다.

사진 좌측 하단의 빨간색 박스는 테마 부분으로, 글로벌 스타일과 사진을 저장하는 데 사용됩니다. 마스터 페이지가 아닌 서브 페이지에서 로드된다는 점만 제외하면 녹색 상자와 기능은 동일합니다. 이 부분이 녹색박스와 병합되어도 상관없습니다.

다음으로, 그 수많은 CSS 파일의 용도는 무엇인지 소개하겠습니다.

—Adm/styles
—Basic.css 전역 기본 스타일
—Layout.css 전역 레이아웃 스타일(크기, 위치 등)
—General.css 전역 아름다운 스타일(색상, 그림) 등)
—Adm/styles/GroupManager 폴더(예)
—Group_Layout.css 그룹 페이지별 레이아웃 스타일
—Group_General.css 그룹 페이지별 아름다운 스타일

CSS를 너무 많이 호출하면 더 많은 서버 요청이 발생합니다. 해결 방법은 아래에 첨부되어 있습니다.