CSS 스타일 시트 기획 및 관리 경험 요약_경험 교류

테이블 레이아웃을 완전히 버리고 xhtml+CSS를 사용하여 웹사이트를 구축한 지 1년이 넘었습니다. 1년 넘게 연습한 끝에 어느 정도 경험이 쌓이고 이를 요약해서 이제 이 글을 쓰게 됐다. xhtml+CSS를 사용하여 웹 사이트를 구축하는 과정에서 중요한 문제가 있습니다. 바로 웹 사이트의 CSS 스타일 시트를 계획하고 관리하는 것입니다.

나의 CSS 관리 진화 역사

처음 CSS를 사용하여 웹 사이트 스타일을 제어할 때는 CSS 관리 계획에 대해 잘 몰랐습니다. 제가 작성한 CSS는 기본적으로 필요에 따라 작성되었습니다. 처음에는 아무 문제가 없다고 생각했지만 점점 더 많은 것이 추가되고 변경 사항이 점점 더 지저분해졌습니다. 댓글도 있었지만 결국에는 여전히 나에게 도움이 되었습니다. 보기만 해도 머리가 아프다. 그 당시에는 웹사이트의 모든 CSS가 계획 없이 하나의 파일에 있었고 순서도 그다지 규칙적이지 않았기 때문에 HTML 페이지에서 클래스 이름만 찾은 다음 수천 개 중에서 원하는 것을 검색할 수 있었습니다. CSS 코드 줄입니다.

잠시 고민하고 정리한 끝에 사이트의 CSS 스타일 시트에 대한 사전 계획을 세웠습니다. 스타일 시트는 처음에 세 가지 영역으로 나뉩니다.

예제 소스 코드 [www.52css.com]
기본 스타일 시트
레이아웃 스타일 시트
클래스 스타일 시트
　여기서 " " 기본 스타일 시트"는 전역 본문, 스타일 등과 같은 몇 가지 일반적인 사항을 설명하는 데 사용됩니다. "레이아웃 스타일 시트"는 전체 페이지의 프레임 레이아웃에 속하는 고유 ID 레이아웃을 설명하는 데 사용됩니다. 스타일 시트" "는 나머지 클래스의 스타일을 설명하는 데 사용됩니다. 이러한 스타일은 재사용 가능한 스타일과 일반적으로 특수 페이지에 한 번 또는 몇 번만 나타나는 스타일로 구분됩니다.

이 방법에 따른 레이아웃은 효율성을 많이 향상시키지만, 이 방법은 중소 규모 웹사이트에만 적합합니다. 적어도 여러 사람이 공동으로 작업하는 경우에는 대규모 웹사이트의 애플리케이션이 여전히 약간 얇습니다. 최상의 결과를 얻을 수 없습니다. 따라서 아래에 요약된 상대적으로 완전한 CSS 관리 계획 모델이 있습니다.

더 완벽한 CSS 스타일 시트 관리 모드

1단계: 개인 또는 팀은 DIV 다이어그램을 사용하여 메인 페이지의 레이아웃을 계층적으로 그려야 합니다. 이 DIV 다이어그램은 디자인 프로토타입의 기초입니다. 페이지에서 향후 수정 및 업그레이드를 위한 유지 관리 문서 생성을 용이하게 하기 위해 페이지의 기본 모듈에서 사용되는 ID 이름과 클래스 이름을 표시합니다.

Step2: CSS 구조를 나누어 글로벌 CSS와 각 모듈 CSS를 구성합니다. html 페이지에서 전역 CSS를 참조하고, 전역 CSS에서 각 모듈의 CSS를 참조합니다.

예제 소스코드 [www.52css.com]
global.css를 글로벌 CSS로 생성하고, 글로벌 CSS에 "* { … } body { … }"와 같은 글로벌 스타일을 정의합니다.
"@import url("xxx.css");"를 통해 전역 스타일의 모듈 CSS를 소개합니다.
모듈 CSS 분할에 관해서는 워드프레스와 유사한 CSS 분할 방식을 선호합니다. 일반적으로 다음과 유사한 구조로 구분됩니다.

예제 소스 코드 [www.52css.com ]
layout.css /* 전체 사이트 레이아웃 */
public.css /* 공개 조합 스타일 */
header.css /* 페이지 헤더 영역 스타일 */
sidebar.css /* 사이드바 영역 스타일 * /
main.css /* 기본 영역 스타일 */
footer.css /* 하단 영역 스타일 */
index.css /* 홈페이지 영역별 스타일 */
form .css /* Form Class 스타일 */
#header, #footer 및 기타 레이아웃의 기본 위치 및 스타일 디자인 등 웹사이트 전체의 레이아웃을 담당하는 것은layout.css임을 설명합니다. 일부 공통 스타일 정의의 경우 클래스는 클래스 =”navbar 글꼴12px”에서 사용될 수 있기 때문에 이 방법은 공백 분리 방법을 사용하여 여러 클래스 스타일을 적용하므로 일반적으로 사용되거나 특수 항목에서 수정해야 하는 일부 공통 클래스를 정의할 수 있습니다. 로컬 미세 조정을 용이하게 하는 상황; header.css, sidebar.css, footer.css와 같은 모듈은 헤더, 사이드바 및 하단 모듈에 해당하는 CSS 스타일 시트입니다. 모듈은 특정 요구에 따라 추가되거나 삭제될 수 있습니다. 웹사이트; index.css는 홈페이지의 일부 고유 요소에 대한 CSS입니다. CSS를 디자인할 때 일반적으로 홈페이지는 CSS에서 가장 복잡한 페이지입니다. 홈페이지의 고유 CSS 요소를 분류하여 배치해야 하며, @import 없이 index.css를 도입할 수도 있습니다. 홈페이지에 별도로 넣어서 참고할 수 있습니다. form.css는 양식 요소의 스타일 시트입니다. 어렵지는 않지만 제어하기가 여전히 번거롭습니다. 쉬운 제어를 위해 별도로 CSS 파일에 넣으십시오. 물론 다른 유사한 요소를 이 방법으로 처리할 수도 있습니다.

3단계: 각 스타일 시트 파일에 스타일을 작성합니다.​