CSS를 보다 효과적으로 관리하기 위해 Sofish는 아래에서 "모듈형 CSS"의 개념과 관점을 설명합니다.
CSS를 배우는 초기에 "모듈형 CSS"라는 개념을 접했지만 잘 이해하지는 못했습니다. 말하자면 그 이유는 매우 간단합니다. 거의 모든 코드가 블로그 디자인을 위한 것이고, 블로그만큼 작은 구조에서는 CSS 파일을 많이 가질 필요가 전혀 없습니다. 자체가 작고, 다양한 표현을 사용하는 페이지 템플릿이 많지 않아 관리하기가 더 편리합니다. 따라서 모듈식 CSS에 대한 나의 이해는 매우 혼란스럽고 다음 나누기 방법이 매우 합리적이라고 생각하게 만듭니다.
Reset.css // 브라우저의 기본 스타일을 재설정합니다.
layout.css //페이지 레이아웃 관리
typeset.css // 그래픽 및 텍스트 배열 및
color.css // 컬러 매칭 통합 관리
print.css //인쇄 효과 스타일
ie.css // IE용 해킹을 분리한다는 것은 사실이 아닙니다. 저는 최근에 회사의 웹사이트에 접속하게 되었습니다. 리더는 자신의 CSS 작성 사양과 일부 통합 HTML 사양을 작성해야 했습니다. 채널/페이지/스토어. 그제야 나는 위의 구분이 여전히 너무 이상주의적이라는 것을 깨달았다. 개인적으로는 다음과 같은 분할 방법을 사용할 수 있다고 생각합니다. 먼저 적어두고 CSS 파일 관리를 더 잘 해결하는 적합한 CSS 모듈식 분할 방법을 찾기 위해 이 두 가지 분할 방법을 비교해 보겠습니다
.
header.css // 헤더의 모든 스타일
Container.css // 헤더/하단을 제외한 중간 영역 스타일
footer.css // 하단 스타일
print.css
즉.css
세 가지 다른 CSS 파일이 있음을 알 수 있습니다. 첫 번째 분할 방법은 좋은 접근 방식이지만 관리가 더 번거롭습니다. "모듈식"이지만 표시되는 콘텐츠의 스타일이 분리됩니다. 그러나 각 CSS 파일의 내용을 모든 사람이 100% 이해하는 것은 불가능하므로 다음과 같은 문제가 발생할 수 있습니다.
1. 효율성 문제와 궁극적인 목표는 웹 사이트의 내용에 있는 경우 특정 영역의 내용입니다. 변경되는데 몇 번이나 걸릴 수 있나요? 모든 CSS를 변경하세요. 결과적으로 원래는 단순한 수정이었던 것이 복잡해지기 시작했습니다. 게다가, 여러 번 변경하면 뭔가를 간과하고 추가 디버깅이 필요할 수 있습니다. 이는 최종 목표의 실현을 지연시킬 뿐만 아니라 효율성에도 문제를 일으킬 수 있습니다.
2. CSS 파일을 최대한 적게 호출하세요. 대부분의 경우 웹사이트는 헤드, 미들, 바텀으로 나누어져 있으며 일반적으로 새로운 채널/페이지 등을 만들 때 헤드와 바텀은 변경되지 않습니다. 가운데 부분만 변경되었습니다. HTML과 CSS의 모듈성이 일관되지 않기 때문에 이런 방식으로 모든 CSS 파일을 호출해야 합니다. 이로 인해 서버가 더 많은 압력을 받게 됩니다. 이것은 한 측면입니다. 또 다른 측면은 새 페이지의 일부 요소가 다른 페이지와 충돌하는 경우 우선 순위 선택에 대한 많은 코드를 작성해야 할 수 있어 코드 양이 늘어날 수 있다는 것입니다. 이 중 어느 것도 우리가 원하는 것이 아닙니다. 이것이 header.css와 footer.css를 분리해야 하는 이유입니다.
3. 다자협조의 문제점 여럿이 일을 할 경우, 누군가는 위에서 네비게이션을 완성하고, 누군가는 하단의 검색창을 완성하고, 누군가는 새로 구축을 완성하는 식으로 분업이 될 수 있습니다. 중간에 있는 페이지. 이런 식으로 모든 사람이 동시에 여러 파일을 변경하고 있으며 변경하는 내용이 다릅니다. 서버에 업데이트 하려면 먼저 비교 후 업데이트를 하셔야 합니다. (물론 지금은 버전 관리 같은 소프트웨어도 있습니다. 하지만 동시에 작업을 한다면 버전도 문제입니다. 아마도 업데이트가 절대 바뀌지 않을 거라고 믿어야 합니다.)
결론:
물론 위의 분할 방법은 단순한 모델일 뿐이다. 다양한 웹사이트의 아키텍처에는 더 자세한 분류가 필요할 수 있습니다. 여기서 기억해야 할 한 가지는 모듈식 CSS를 사용하면 단순한 분할이 아닌 여러 사람 간의 관리, 수정 및 공동 작업을 용이하게 하기 위해 존재한다는 점을 항상 분명히 해야 한다는 것입니다. 제안할 사항이 있다면 CSS의 모듈성은 HTML의 모듈성과 일치해야 한다고 생각합니다. 여기서 합의된 점은 파일 분할이든 CSS 콘텐츠 분할이든 HTML의 모듈성과 일치한다는 것입니다. 이것이 우리 작업에 더 도움이 될 것입니다.
그리고 당신은 어떻게 생각하세요?