CSS 프레임워크와 CSS 모듈에 대한 나의 생각은 늘 막연했고, 그 추세를 완벽하게 따르고 있었습니다. 최근 직장에서 겪은 문제로 인해 이 문제에 주의를 기울이게 되었습니다. 나는 한 사람이 페이지 계획, 디자인, 게시 등 모든 작업을 수행하는 데 익숙합니다. 프로젝트에서 여러 사람이 공동 작업하여 짧은 시간 내에 완료해야 하는 경우 스타일 파일 계획, CSS 모듈 및 프레임워크에 대한 생각이 특히 중요합니다.
최근에 다음과 같은 질문이 저를 괴롭혔습니다. 여러 사람이 동시에 웹 사이트의 프런트 데스크에서 작업하는 경우 전체 웹 사이트의 스타일이 통일되도록 배포하는 방법, 스타일 파일 구조가 합리적인지, 중복 및 중복이 없으며 효율성이 가장 높습니까? 여러 학우들에게 상담을 받았고, 제가 얻은 답변을 정리하면 다음과 같습니다. 스타일 통일에 관해서는 먼저 스케치를 만들기 위해 함께 논의했고, 그 스케치를 바탕으로 한 사람이 표준 스타일 페이지를 만든 후 함께 작업을 시작했습니다. 나머지는 끊임없는 수정이었습니다. 제작 측면에서는 전체 사이트에 여러 가지 CSS 파일이 설정되어 있으며, 각 사람이 서로 다른 스타일 파일을 담당합니다.
말은 쉽지만 한번 실행해 보면 쉽지 않습니다. 디자인에 관해서는 아직 감히 위험을 감수하지 않습니다. 다행히도 1 단계와 2 단계 페이지가 모두 20 개가 채 안되어 한 사람이 처리 할 수 있습니다. 제작과정에 대해 알려주세요.
(1) CSS 이름 지정, 작성 순서 및 설명을 표준화합니다.
이 점의 중요성은 말할 것도 없고, 여러 가지 "강력하게 개인화된" 명명 방법이 스타일 시트에 동시에 나타나는 것이 얼마나 혼란스러울지 상상하기 어렵습니다. 이름 지정에는 text-box, text-content, text_box 또는 대문자와 소문자 "hump Case" 쓰기, textBox, textContent 등과 같은 중간 "-", "_" 기호 연결을 사용할 수 있습니다. 주석은 매우 중요합니다. 주석의 주요 범주는 머리글, 컨테이너, 바닥글과 같은 CSS 블록을 구분하는 데 사용됩니다. 선택기 내에서 주석을 달거나 일부 특수 효과에 대한 해킹 댓글을 사용하세요. 쓰기 형식에서는 가로 들여쓰기를 사용하여 계층 관계를 표시할 수 있습니다.
(2) 렌더링을 기반으로 스타일 시트의 구조 분할을 결정합니다.
일반적으로 몇 개의 파일인 CSS 파일 구조 분할에 대해 인터넷에 많은 소개가 있습니다. 그들은 그것에 능숙하며, 실행하기 전에 그것을 실천해야 합니다. 최고는 없고 가장 적합한 것만이 있다는 것을 이해하십시오. 최상의 스타일 구분은 보편적이기보다는 HTML 구조 자체에 밀접하게 의존해야 합니다.
CSS 파일의 배포는 미래의 노동 분업과 협업을 용이하게 하는 것 외에도 매우 중요한 점을 가지고 있습니다. 즉, 바이트가 작을 경우 바이트가 너무 작을 경우 최대한 압축하여 동시 연결 수를 줄일 수 있습니다. 크기가 크면 다운로드 속도가 너무 느려져 스타일 로딩에 영향을 미치는 것을 방지하기 위해 분할할 수 있습니다. 이는 사례별로 처리해야 하는 구체적인 문제입니다. 예를 들어 검색엔진, 포털 홈페이지 등 방문자가 많은 페이지의 경우 페이지 내부에 CSS를 작성하는 것이 가장 좋습니다.
CSS 스타일 구조를 미리 결정합니다.
예제 소스 코드
Reset.css /*페이지 스타일 재충전*/
header.css /*사이트 전체 헤더 스타일*/
footer.css /*전체 사이트 바닥글 스타일*/
public.css /*전체 사이트에 대한 공개 모듈 스타일*/
index.css /*홈페이지 고유 스타일*/
Container.css /*레벨 2 이하 본문 스타일*/
print.css /*인쇄 스타일*/
ie.css /*IE 해킹*/
(3) 업무 분담과 협력
무대가 설치되고 노래가 시작됩니다. 공개 텍스트 목록과 혼합된 사진 및 텍스트 목록을 모두 찾아보세요. 공용 모듈에서는 한 사람이 작성을 담당하고, 머리와 꼬리 부분에는 한 사람, 보조 페이지 프레임에는 한 사람이 마지막에 남습니다.
실제 운영에는 여전히 많은 문제가 있습니다. 코드 중복은 피할 수 없으며 최소화할 수만 있습니다. 때때로 효율적이기 위해서는 희생이 필요합니다. 위의 내용은 제가 직장에서 경험한 내용 중 일부입니다. 또한 수정하기 쉽고, 관리하기 쉽고, 여러 사람이 공동 작업하기 쉬운 CSS 모듈성의 장점을 실제로 탐구한 최초의 사례이기도 합니다. 전문가와의 논의를 기대합니다.