웹사이트 디자인을 위한 합리적인 구조의 CSS

아키텍처 CSS

현재 브라우저가 일반적으로 지원한다는 전제 하에 CSS는 전례 없는 임무를 부여받았습니다. 그러나 CSS에 더 많이 의존할수록 스타일 시트 파일은 더 크고 복잡해집니다. 이와 함께 파일 유지 관리 및 구성 문제도 발생합니다.

(옛날에는) CSS 파일 하나만 있으면 충분했습니다. 모든 규칙이 모여 있어 추가, 삭제, 수정이 쉬웠지만 요즘은 오래되었습니다. (현재) 새 웹사이트를 구축할 때 CSS를 구성하고 구조화하는 방법을 계획하는 데 시간을 투자해야 합니다.

파일 정리

CSS 시스템 구축의 첫 번째 단계는 개요를 작성하는 것입니다. (제 생각에는) CSS 구성 계획의 중요성은 웹 사이트 디렉토리 구조와 비슷합니다. (html또는 참고: 기억력을 향상하려면 과장된 단어를 사용하십시오.) 모든 경우에 적용되는 일률적인 솔루션은 없으므로 몇 가지 기본적인 조직 솔루션과 각각의 장단점에 대해 논의하겠습니다.

메인 CSS 파일

일반적으로 메인 CSS 파일을 사용하여 모든 페이지에서 공유하는 규칙을 배치할 수 있습니다. 이 파일에는 기본 글꼴, 링크, 헤더 및 기타 스타일이 포함됩니다. 기본 CSS 파일이 준비되면서 우리는 높은 수준의 조직 전략을 탐색하기 시작했습니다.

방법 1: 프로토타입 기반

가장 기본적인 전략은 아키타입 페이지를 기준으로 CSS 파일을 분리하는 것입니다. 웹사이트의 홈페이지, 서브페이지, 포트폴리오 페이지가 다르게 디자인된 경우 프로토타입 기반 전략을 사용할 수 있습니다. (이 전략에 따라) 각 페이지에는 자체 CSS 파일이 있습니다.

프로토타입의 수가 많지 않은 경우 이 방법은 간단하고 명확하며 효과적입니다. 그러나 각 프로토타입 페이지에 페이지 요소가 단계별로 위치하지 않으면 문제가 발생합니다. 서브페이지와 조합페이지에서는 특정 요소를 공유하지만 홈페이지에서는 공유하지 않는 경우

공유된 요소를 메인 CSS 파일에 넣어야 하나요? 이것은 가장 순수한 솔루션은 아니지만 일부 특정 상황에서는 작동합니다. 그러나 사이트가 거대하면 기본 CSS 파일이 빠르게 부풀어 오르게 됩니다. 이는 불필요하게 큰 파일을 가져오는 것을 방지하기 위해 파일을 분리하는 목적을 무산시킵니다.

스타일 코드 사본을 조합 페이지와 하위 페이지의 CSS 파일에 넣습니다. (이 작업을 수행하는 것은) 중복된 코드를 유지하는 것을 의미하며 분명히 우리는 이를 원하지 않습니다.

이 두 페이지에서 공유되는 새 파일을 만듭니다. 정말 좋은 것 같아요. 하지만 코드가 10줄밖에 없다면 이 10줄의 코드를 공유하기 위해 이 파일을 만들어야 할까요?(html또는 참고: 칼로 닭 죽이기?) 이 방법은 매우 순수하지만 웹 사이트가 거대하고 거기에 있는 경우 많은 페이지가 소수의 요소( html 또는 참고: 예를 들어 30쌍의 페이지가 각각 10줄의 코드를 공유하는 경우)를 공유하는 것은 매우 번거로워 보입니다.

모든 공유 요소에 대한 스타일을 포함하는 별도의 CSS 파일을 만듭니다. 이 방법은 더 간단할 수 있지만 사이트 크기와 공유 요소 수에 따라 다릅니다. 매우 짜증나는 상황이 있습니다. 큰 CSS 파일을 가져왔지만 스타일의 작은 부분만 페이지에서 사용됩니다. 이는 다시 파일을 분리하려는 원래 목적을 무효화합니다.

이것이 바로 제가 오버랩 딜레마라고 부르는 것입니다. 조각난 CSS 규칙에는 중복되는 부분이 많으며 규칙을 구성하는 완전히 명확한 방법이 없습니다.

방법 2: 페이지 요소/블록 기반

웹사이트에서 서버측 포함을 사용하는 경우 이 방법이 매우 좋습니다. 예를 들어 헤더 포함을 사용하면 해당하는 자체 CSS 파일이 생깁니다. 바닥글이나 다른 부분에 포함하는 것도 같은 방식으로 수행할 수 있으며, 자신의 CSS 파일을 가져오기만 하면 됩니다. 이 방법은 간단하고 깔끔하지만 작은 CSS 파일이 많이 생성될 수 있습니다.

예를 들어 바닥글 스타일에 CSS 코드가 20줄만 필요한 경우 별도의 파일을 만드는 것은 가치가 없습니다. 그리고 이 방법을 사용하면 각 페이지에 여러 CSS 파일이 포함됩니다. 포함된 CSS 파일 수만큼 CSS 파일이 있기 때문입니다.

방법 3: 태그 기반

이 솔루션은 이전 솔루션과 유사하게 직관적이고 실용적입니다. 웹 사이트에 총 30페이지가 있고 그 중 10페이지에 양식이 포함되어 있는 경우 CSS 파일을 만들어 양식 스타일을 구체적으로 처리하고 이 10페이지에서만 가져올 수 있습니다. 나머지 10페이지에 표가 포함된 경우 표 스타일 등을 처리하기 위한 파일을 특별히 만듭니다.

추가 정리 팁

문서를 정리하는 주관적인 방법 외에도 인쇄, 휴대용 기기, 화면 등 다양한 미디어 유형도 고려해야 합니다. 이는 명확하게 정의되어 있지만 여전히 파일 구조를 설정할 때 고려해야 할 요소입니다. 여러 미디어 유형을 지원해야 하면 기본 CSS 파일의 일부 규칙을 다시 고려해야 할 수도 있습니다.

또한 브랜드 공동 브랜딩도 중요한 요소가 될 수 있습니다. (html또는 참고: Google과 Nike가 공동으로 출시한 joga 등) 브랜드 공동 브랜딩이 포함된 경우 다른 브랜드에 맞게 어떤 요소를 조정해야 하는지 고려해야 합니다. 예를 들어 각각 다른 CSS 파일을 사용하십시오.

흔히 간과되는 또 다른 요령이 있습니다. 중첩된 @import 문을 사용하는 것입니다. 일련의 @import 문을 포함하거나 몇 가지 CSS 규칙을 추가하여 CSS 파일을 만들 수 있습니다. 이 방법을 사용하면 웹 사이트의 기본 CSS 파일을 완전히 생성할 수 있습니다(@import를 사용하여 각 부분의 스타일 파일을 가져옵니다). 웹사이트의 각 페이지가 4~5개의 서로 다른 CSS 파일을 가져오는 경우 의심할 여지없이 이 기술 사용을 고려해야 합니다.

규칙 및 선택기 구성

파일 정리에 대해 이야기한 후, 파일의 내용을 정리하는 방법에 대해 토론해 보겠습니다. 당연히 우리는 파일을 원활하고 빠르게 탐색하여 편집하려는 선택기나 규칙을 찾고 싶습니다.

중복성 대 종속성

Dave Shea가 "중복성 대 종속성"이라는 기사에서 말했듯이 계단식 배열을 지속적으로 이해해야 합니다. 선택기를 그룹화할지(종속성을 의미) 또는 분리할지(중복성을 의미) 결정해야 합니다. 그룹화를 통해 코드를 간결하게 유지할 수 있지만 종속 관계가 설정되어 유지 관리 오버헤드가 증가합니다. 그룹화하지 않으면 파일 크기가 늘어나고 유사한 선택기의 일관성을 유지하기가 어려워집니다. 이러한 절충과 절충을 통해서만 우리는 매번 올바른 결정을 내릴 수 있습니다.