대형 웹 사이트 스타일링을위한 일반적인 패턴

대형 웹 사이트 용으로 CSS를 설정, 생성, 저장하는 방법에 대한 일반적인 패턴이 있습니까?대형 웹 사이트 스타일링을위한 일반적인 패턴

나는 여러 가지를 시도해 보았습니다.

레이아웃 (위치, 크기 등)을 모두 하나의 파일에 두는 동안 다른 데코레이션 (색상, 배경 등)을 사용하여 레이아웃을 적용하지 않고 쉽게 스타일을 바꿀 수있었습니다. 모든 요소가 여러 파일에 스타일이 지정되어 있으면이 작업이 매우 지루합니다.

나는 하나의 메인 CSS 파일을 가지고 다녔다. 다른 규칙을 가진 페이지는 그 규칙을위한 CSS 파일을 얻는다. 결국 똑같은 "고유 한"규칙을 가진 다른 페이지로 이어지고, 항상 중복 CSS (각 페이지는 공유 스타일이 무엇인지를 정의하는 고유 한 CSS 파일을가집니다)로 끝나기 때문에 유지 관리가 더 어려워집니다.

모든 CSS 책, 튜토리얼 또는 내가 읽은 모든 내용은 CSS의 기능과 단일 페이지 또는 작은 사이트의 컨텍스트에서 사용하는 방법을 설명합니다. 나는 그것에 대해 잘 알고 있지만, 많은 양의 불일치가있는 대형 웹 사이트의 스타일을 계획하는 방법에 대한 토론은 결코 볼 수 없습니다.

내가 따라야 할 패턴/일반적인 관행이 있습니까?

내가 예를 들어, 컨테이너에 대해 하나 개의 CSS 파일을 만들 :

출처

2010-12-07 JD Isaacks

은 무엇 내가 일반적으로 할 것은 이것이다 개별 스타일 (div, img, 링크 등)에 대한 또 다른 파일입니다.

(컨테이너 포함) 귀하의 웹 사이트 개요, 텍스트 등 귀하의 웹 사이트 콘텐츠가 그 내용을 담고 있습니다.

스타일을 의미하거나 또는 목록이 계속됩니다.

도움이 되었기를 바랍니다. 내 게시물을 매우 좋은 매뉴얼과 함께 편집하십시오. (발견하자마자).

추신. 그 책은 무료입니다.

출처

2010-12-07 16:33:23 Wesley

예를 들어 Flickr, Facebook, Twitter 등의 큰 사이트를 살펴보십시오. 속도면에서 가장 좋은 점은 하나의 CSS 파일을 사용하여 모든 것을 저장하는 것입니다. 다른 사이트에 대해 서로 다른 규칙의 측면에서
는 "모듈"디자인도 가능성이 있습니다 -

.redFontColor { 
    color: #F00; 
} 

.smallFont { 
    font-family: "Courier New", "Times New Roman", serif; 
    font-size: .7em; 
} 

.alignedLeft { 
    text-align: left; 
}

처럼 그리고

<div class="alignedLeft"> 
    This will be <span class="smallFont redFont">small and red</span> - but this text will just be <span class="redFont">red</span> 
</div>

처럼 HTML에서 사용할 꽤 많이 있습니다 이렇게가는 사이트 ;-).

출처

2010-12-07 16:37:07 thedom

항상 성능을 염두에 두어야합니다. 하나의 큰 파일을 가지는 것은 한 번만로드되고 이후에 캐시 될 수 있으므로 다른 외부 리소스를로드 할 수 있으므로 페이지로드 시간의 오버 헤드가 크게 줄어들 기 때문에 최적입니다. 분명히 큰 파일을 만들지 만 주석과 들여 쓰기를 통해 합리적인 방법으로 항목을 그룹화 할 수 있어야합니다.

또는 DEV 환경에서 이들을 별도로 유지하고 배포 전에 이들을 모두 하나의 파일로 결합하는 빌드 메커니즘을 고려할 수 있습니다. 그것은 정말로 두 세계의 장점을 제공합니다.

개별 CSS 파일에 대해 본 유일한 실제 필요성은 매체 (인쇄, 페이지 등)에 대한 테마, 접근성 및 다른 스타일입니다.당신은 항상 염두에 두어야

출처

2010-12-07 16:37:55 methodin

출처

2010-12-07 17:57:59 agbb

우리를 최근에 나는 우리는 "CSS 컴파일"이라는 이름을 붙였습니다. 이것은 methodin이 대답 한 것과 같습니다. 우리의 컴파일 (PHP 백엔드)은 모든 모듈에 대해 하나의 컴파일 된 CSS 파일을 생성하므로 런타임에 단일 CSS 파일이로드됩니다. 이렇게하면 성능에 대해 걱정하지 않고 원하는만큼 많은 CSS 파일을 정의 할 수있는 자유가 생깁니다. 이를 위해 우리 프로젝트의 설정 파일 (예 : 로그인, 집 등 모듈 및 모든 모듈에로드 할 CSS 파일)에 module-CSS 파일 관계가 포함 된 배열 $moduleCssrelation을 정의했습니다. 스타일 아키텍처의 핵심이기 때문에 결국 자세한 내용을 설명하십시오.

이것은 우리가 사용하는 기본 CSS 계획입니다 : - 스타일의 패턴/재사용 가능한 구성 요소를 지적하고보고 자세히 공부

모든 모듈은
- 헤더 섹션, 바닥 글 섹션과 왼쪽 메뉴가 모든 모듈에 필요합니다.
- 중앙에 일부 목록의 표 형식 표시 섹션이 있고 (일반적인 머리글, 바닥 글 및 왼쪽 메뉴는 그대로 유지하는) 많은 모듈이 있으며 사용자 세부 정보 페이지, 수업 세부 정보 페이지.
디자이너 팀이 단일 파일의 모든 스타일을 우리에게 제공했습니다. 그런 다음 이전 단계에서 연구 한 스타일 패턴에 따라 단일 CSS 파일을 여러 조각으로 조각화했습니다. 단지 목록 페이지에 나타나는 구성 요소에 대한 모든 스타일의 정의를 포함하는 왼쪽 메뉴 스타일
listings.css
, 머리글, 바닥 글을 포함하는
common.css - 그래서, 우리는 같은 일부 파일을 만들었습니다.
details.css 세부 사항 페이지의 경우에만 필요하게 될 .detailsRedHeading 클래스가있는 경우 thedom이 언급 한 것처럼 여기에 정의하십시오.
추가 스타일 - 많은 모듈이 해당 스타일로 팝업해야하는 경우 또는 다른 파일에 스타일을 정의하는 대신 해당 스타일을 popups.css 안에 넣으십시오. 우리가 원하는만큼 많은 css 파일을 정의해야한다는 자유를 기억하십시오. 나중에 테마의 편의를 위해

내가 모든 장식 (색상, 배경 동안 1 개 파일에있는 모든 레이아웃 (위치, 크기 등)을 넣어 시도했습니다 "의 아이디어를 적용 적이없는
변경 , 등) 다른 "하지만 도움이된다면이 아키텍처에 추가 할 수 있습니다. common.css을 common_layout.css으로, common_design.css으로, 다른 경우도 마찬가지입니다.

또한 가능한 최대 스타일 재사용을 수행하십시오. 이 같은 스타일 선언을 피하십시오 : -

.listingsBody 
{ 
    font-family:Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif; 
    font-size: 12px; 
    .. 
    some listing page styles 
    .. 
} 

.detailsBody 
{ 
    font-family:Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif; 
    font-size: 12px; 
    .. 
    some details page styles 
    .. 
}

는 대신에이 사항을 가지고있다 -

.siteMediumFont 
{ 
    font-family:Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif; 
    font-size: 12px; 
} 

.detailsBody 
{ 
    .. 
    some details page styles 
    .. 
} 

.listingsBody 
{ 
    .. 
    some listing page styles 
    .. 
}

나는 많은 디자이너들이이 작업을 수행 할 것을 보았다. 더 복잡한 경우에 이러한 습관은 나중에 일을 정말로 어렵게 만들 수 있습니다. 컴파일에

세부 사항 : - 우리는 CSS의 변경 사항을 적용을 완료 한 후에는

, 우리는 다음과 같은 작업을 수행 컴파일 코드 실행 -

$moduleCssrelation = array("class_details"=> array("details","popups"));

배열 $moduleCssrelation 트래버스와에서 컴파일 된 파일을 생성 모든 모듈에 대한 CSS 파일 이름의 내용. 예 : class_details 모듈에 파일 details.css, popups.css이 필요한 경우 class_details에로드되는 common-details-popups.css 파일과이 두 css 파일을 필요로하는 다른 모듈을 만듭니다.

출처

2010-12-13 16:53:53

대형 웹 사이트 스타일링을위한 일반적인 패턴

답변

관련 문제