CSS 아키텍처 : CSS 파일 조직 - SitePoint

Tiffany Brown이 저술 한 "The Master of CSS"라는 책에서 발췌 한 발췌. 이 책은 전 세계 서점에서 구입할 수 있으며 여기에서 전자 책 버전을 구입할 수도 있습니다.

CSS 파일 조직 좋은 CSS 아키텍처의 일부는 파일 조직에 있습니다. 단일 개발자 또는 매우 작은 프로젝트의 경우 단일 파일로 충분합니다. 대규모 프로젝트의 경우 여러 레이아웃 및 컨텐츠 유형이있는 웹 사이트 또는 여러 브랜드가 동일한 디자인 프레임 워크를 공유합니다. 모듈 식 접근법을 사용하고 CSS를 여러 파일로 분할하는 것이 더 현명합니다. CSS를 여러 파일로 분할하면 작업을 팀에 쉽게 할당 할 수 있습니다. 한 개발자는 타이포그래피와 관련된 스타일에 책임이있을 수 있으며 다른 개발자는 메쉬 구성 요소 개발에 중점을 둘 수 있습니다. 팀은 작업을 합리적으로 할당하고 전반적인 생산성을 향상시킬 수 있습니다. 그렇다면 CSS를 여러 파일로 나누기위한 좋은 파일 구조는 무엇입니까? 다음은 최근 프로젝트에서 사용한 것과 유사한 구조입니다.

: 색상, 경계 또는 글꼴과 관련된 최소 진술을 재설정하고 정상화합니다 : 글꼴, 글꼴 무게, 선 높이, 크기 및 제목 및 텍스트 스타일

: 그리드를 포함한 페이지 레이아웃 및 단락 스타일 관리

: 양식 컨트롤 및 레이블의 스타일 : 목록 특정 스타일 : 테이블 특정 스타일

: 회전 목마 구성 요소에 필요한 스타일

: 아코디언 구성 요소의 스타일

SASS 이하와 같은 사전 처리기를 사용하는 경우 색상 변수 등이있는
• 또는 파일을 포함해야 할 수도 있습니다. reset.css 이 구조에서 각 CSS 파일에는 구체적이고 좁은 범위가 있습니다. 사용될 파일 수는 웹 사이트 디자인에 필요한 시각적 패턴 또는 구성 요소 수에 따라 다릅니다.
Foundation 및 Bootstrap과 같은 CSS 프레임 워크는이 접근법을 사용합니다. 둘 다 진행률 표시 줄, 범위 입력, 닫기 버튼 및 툴팁에 별도의 파일을 사용하여 매우 세심합니다. 이를 통해 개발자는 프로젝트에 필요한 구성 요소 만 포함 할 수 있습니다.
• 참고 : 모드 라이브러리 이러한 방식으로 CSS를 여러 파일로 분할하는 것과 밀접한 관련이있는 개념은 스키마 라이브러리입니다. Anna Debenham의 "Pattern Library의 초보자"는이 주제에 대한 훌륭한 소개입니다. typography.css 파일 수 개발 중에 여러 CSS 파일을 사용 하더라도이 양식의 브라우저에 모든 파일을 제공하지는 않습니다. 필요한 HTTP 요청 수는 웹 사이트로드 속도를 늦출 것입니다. 대신, 우리는 작은 CSS 파일 를 생산 환경에서 사용하기 위해 여러 개의 큰 파일에 연결합니다.
• 이 맥락에서 연결은 여러 파일을 단일 CSS로드로 결합하는 것을 의미합니다.

  명령문 또는 여러 @import 요소가 필요하지 않습니다. 현재 브라우저는 한 번에 다운로드 할 수있는 파일 수에 제한이 있습니다. 연결을 사용하여 네트워크 요청 수를 줄여서 사용자에게 컨텐츠를 더 빨리 전달할 수 있습니다. link 일반적으로 웹 개발 프레임 워크는 Ruby on Rails와 같은 자산 관리 기능의 일부로 연결을 처리합니다. 일부 컨텐츠 관리 시스템은 핵심 기능 또는 애드온과 동일합니다. 9 장에 설명 된 사전 처리기도 연결을 쉽게 만듭니다. 사전 처리기 나 개발 프레임 워크가 워크 플로의 일부인 경우 운영 체제에 사용할 수있는 연결 유틸리티가있을 가능성이 높습니다.

  Mac OS X 또는 Linux의 경우

  유틸리티를 사용하여 파일에 연결하십시오.

  Windows를 사용하는

  ? cat 유틸리티를 사용해보십시오 :

  당신은 또한 자신의 연결 스크립트를 Bash, PHP, Python 또는 선택한 기타 스크립팅 언어로 작성할 수 있습니다.

  cat file1.css file2.css > combined-output-file.css

  참고 : CSS 최적화 <🎜 🎜> 연결은 CSS 최적화의 측면입니다. 불필요한 문자와 공백을 제거하기 위해 파일을 최소화하는 것도 중요합니다. 3 장에서는 최소화 도구를 소개합니다.

  그래서 얼마나 많은 파일을 사용해야합니까? 이것은 까다로운 곳입니다. 현재 모범 사례는 페이지 렌더링에 필요한 최소 CSS 인 Critical Path CSS를 식별하고 type 요소를 사용하여 페이지에 포함시키는 것입니다. 다른 CSS 파일은 JavaScript를 사용하여로드해야합니다. Addy Osmani의 프레젠테이션 "CSS Performance Tools"는이 기술과이를 구현하는 데 사용할 수있는 일부 도구에 대한 훌륭한 개요를 제공합니다. Filament Group의 Loadcss도 참조하십시오.

  컨텐츠가 SPDY 또는 HTTP/2 프로토콜을 사용하여 제공되면 연결이 불필요 할 수 있습니다. HTTP/1.1을 사용하여 브라우저는 다음 요청이 끝날 때 자산을 다운로드합니다. 이 모델에서는 네트워크 요청 수를 줄이면 웹 사이트 성능이 향상 될 수 있습니다. 따라서 요청 수를 줄이는 것은 실질적인 이점이 없습니다. 그러나 페이지를 렌더링하는 데 필요한 것보다 더 많은 바이트를 보내는 데 드는 비용이 있습니다. William Chan의 "HTTP/2 노트 및 트레이드 오프"는 이것을 자세히 설명합니다. 가장 좋은 방법은 서버가 HTTP/2 서비스를 제공하는지 확인하고, 그렇다면 더 많은 사용자가 실제로 자산 분할 및 페이지에 필요한 자산 만로드하여 혜택을받을 수 있는지 확인하거나 이전 방법을 계속 사용하는 것입니다. 성능 최적화 방법에 대해 더 많이 배우고 싶다면 Sitepoint의 Book Lean Site는 유용한 리소스입니다.

  type file1.css file2.css > combined-output-file.css

  CSS 파일 조직에 대한 자주 질문

  내 CSS 파일을 가장 잘 정리하는 방법은 무엇입니까?

  CSS 파일을 구성하는 가장 좋은 방법은 프로젝트의 크기와 복잡성에 크게 의존합니다. 소규모 프로젝트의 경우 단일 CSS 파일만으로도 충분할 수 있습니다. 그러나 대규모 프로젝트의 경우 CSS를 여러 파일로 분할하는 것이 좋습니다. 이것은 구성 요소 또는 스타일의 페이지를 기반으로 수행 할 수 있습니다. 예를 들어 헤더, 바닥 글 및 기본 컨텐츠에 대한 CSS 파일을 별도로 만들 수 있습니다. 따라서 코드를 더 쉽게 유지 관리하고 디버그 할 수 있습니다.

  내 CSS 코드를 간단하고 질서있게 유지하는 방법은 무엇입니까?

  CSS 코드를 단순하고 순서대로 유지하는 것은 유지 관리에 필수적입니다. 몇 가지 모범 사례에 따라이를 수행 할 수 있습니다. 먼저 의견을 사용하여 CSS의 각 부분의 역할을 설명하십시오. 둘째, 관련 스타일을 결합하십시오. 셋째, 수업 및 ID에 일관된 이름 지정 컨벤션을 사용하십시오. 마지막으로, 스타일 시트를 관리하는 데 도움이되는 SASS 이하의 CSS 전 처리기를 사용하는 것을 고려하십시오.

  CSS 전 처리기 란 무엇이며 CSS 파일을 구성하는 데 어떻게 도움이됩니까?

  SASS 및 LESS와 같은 CSS 전 처리기는 CSS 기능을 확장하는 스크립팅 언어입니다. 이를 통해 변수, 중첩 규칙, 믹스 인 및 기능을 사용할 수 있으므로 CSS를 크게 단순화하고 유지 관리하기 쉽습니다. 전처리 기는 브라우저가 이해할 수있는 표준 CSS로 코드를 컴파일합니다.

  CSS 모듈을 사용하여 CSS를 구성하는 방법은 무엇입니까?

  CSS 모듈은 CSS를보다 모듈화하고 재사용 할 수있는 방법입니다. CSS 모듈의 경우 응용 프로그램의 각 구성 요소에는 고유 한 CSS 파일이 있습니다. 한 구성 요소의 CSS를 변경하면 다른 구성 요소에 영향을 미치지 않기 때문에 스타일 관리가 더 쉬워집니다. CSS 모듈을 사용하려면 Webpack 또는 Parcel과 같은 빌드 도구가 필요합니다.

  CSS 파일 조직에서 의견의 역할은 무엇입니까?

  주석은 CSS 파일 구성에서 중요한 역할을합니다. 그들은 당신과 다른 개발자들이 CS의 각 부분의 역할을 이해하도록 도울 수 있습니다. 여러 CSS 파일이있을 수 있으므로 대규모 프로젝트에서 특히 중요합니다. 주석을 사용하여 디버깅 중에 CSS의 특정 부분을 일시적으로 비활성화하는 데 사용될 수 있습니다.

  CSS 프레임 워크를 사용하여 CSS를 구성하는 방법은 무엇입니까?

  Bootstrap 및 Foundation과 같은 CSS 프레임 워크는 웹 사이트 스타일에 사용할 수있는 Write-Pre-CSS를 제공합니다. 또한 CSS가 쉽게 유지할 수 있도록 통일 된 구조를 제공합니다. 그러나 CSS 프레임 워크를 사용하면 대부분의 기능을 사용하지 않으면 웹 사이트에 불필요한 팽만감이 추가 될 수 있습니다.

  CSS에서 일관된 명명 규칙의 중요성은 무엇입니까?

  CSS의 일관된 명명 규칙을 통해 코드를보다 쉽게 ​​읽고 이해할 수 있습니다. 또한 코드를 업데이트하거나 디버깅해야 할 때 특정 스타일을보다 쉽게 ​​찾을 수 있습니다. BEM (블록, 요소, 수정 자), OOCSS (객체 지향 CSS) 및 SMACSS (확장 가능 및 모듈 식 CSS 아키텍처)와 같은 몇 가지 명명 규칙을 따를 수 있습니다.

  CSS 변수를 사용하여 CSS를 구성하는 방법은 무엇입니까?

  CSS 변수 (사용자 정의 속성이라고도 함)를 사용하면 CSS 전체에서 재사용을위한 특정 값을 저장할 수 있습니다. 이를 통해 CSS를 크게 단순화하고 유지하기 쉽습니다. 예를 들어, 웹 사이트의 기본 색상을 변수로 저장하고 해당 색상이 필요할 때 사용할 수 있습니다.

  CSS 파일 조직에서 CSS 재설정의 역할은 무엇입니까?

  CSS 재설정은 CSS의 시작 부분에서 적용되는 일련의 스타일이며 브라우저 애플리케이션의 기본 스타일을 재설정하는 데 사용됩니다. 이를 통해 웹 사이트가 다른 브라우저에서 일관되게 보이도록합니다. CSS 재설정은 또한 각 요소에 대한 브라우저 스타일을 다시 작성할 필요가 없기 때문에 CSS를보다 쉽게 ​​관리 할 수 ​​있도록합니다.

  CSS 보풀 도구를 사용하여 CSS를 정리하는 방법은 무엇입니까?

  스타일 린트 및 CSSLINT와 같은 CSS 보풀 도구를 사용하면 오류를 잡고 일관된 코딩 스타일을 시행하여 CSS를 구성하는 데 도움이됩니다. 개발 워크 플로에 통합되어 CSS를 작성할 때 자동으로 확인할 수 있습니다. 이렇게하면 CSS를 더 쉽게 작성하는 데 도움이 될 수 있습니다.

위 내용은 CSS 아키텍처 : CSS 파일 조직 - SitePoint의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!