3 레이어 OOCSS 아키텍처

Question

OOCSS 원칙 (inuit.css, smacss 등)을 따르는 3 레이어 스타일 가이드에 대한 구조/아키텍처에 대한 논의를 모색 중입니다. inuit.css에 익숙하다면 프레임 워크가 두 개의 레이어로 구성된다는 것을 알 수 있습니다. 맨 아래 레이어 (기초)는 inuit.css의 핵심을 나타냅니다. 기본적으로 결코 변경해서는 안되는 객체와 추상화. 제 2 계층은 기초 계층으로의 확장, 즉 현재의 애플리케이션에 특정한 스킨 및 테마를 포함한다. 기본 객체와 스키닝/테마를 분리하는 것과 동일한 기본 비용이 Nicole Sullivan의 OOCSS로 전달됩니다. 즉, 나는 세 가지 레이아웃 시나리오에 대한 토론을 찾고 있습니다. 첫 번째 레이어는 기본 객체를 나타냅니다. 두 번째 계층은 로컬 수준의 기본 객체에 대한 스킨/테마/확장을 나타냅니다. 세 번째 레이어는 스킨/테마/응용 프로그램 특정 수준에서 로컬 수준까지 확장됩니다.

|+Application (specific to a single application) 
|+Local (specific to a bundle of applications) 
    |+Global (non specific. Shared by any/every current future application) 

50 가지 응용 프로그램이있는 회사가 있다고 가정 해 보겠습니다. 글로벌 스타일 가이드를 상속하려면 50 개의 애플리케이션이 모두 필요합니다. 두 번째로, 50 개의 애플리케이션 중 25 개 애플리케이션을 통합해야하고 동일한 스타일 가이드를 상속해야한다고 가정합니다. 이것은 지역 수준이 될 것입니다. 마지막으로, 25 개 응용 프로그램마다 로컬 및 글로벌 가이드를 무시하는 데 필요한 특정 테마가있을 수 있습니다. 또한 SASS 전처리 기가 아키텍처에 포함되어야한다고 언급해야합니다. 각 진행 레벨은 이전에 설정된 변수를 덮어 쓸 수 있어야합니다 (예 : 전역 할당 변수 base-font-size 변수를 16px로 지정하십시오.) 로컬 응용 프로그램은 기본 글꼴 크기를 15px로 겹쳐 씁니다. 로컬 응용 프로그램 중 하나가 로컬 레벨을 기본 글꼴보다 우선합니다 12 픽셀로 -size.

호기심

사람들이 디렉토리 구조를 포맷 할 방법을 알고 내가 응답을 기대!

Answer 1

CSS는 본질적으로 구조화 된 언어이다.

당신이 순차적으로 세 가지를 포함하는 경우 예 :

<link type="text/css" rel="stylesheet" href="global.css"> 
<link type="text/css" rel="stylesheet" href="local.css"> 
<link type="text/css" rel="stylesheet" href="application.css"> 

후자 파일의 스타일은 이전 파일의 스타일보다 우선합니다.

예를 들어 에 .logo { font-size: 1.5em; }이있을 수 있습니다. .logo { font-size: 2em; }을 application.css에 넣으면 우위가됩니다.

특별한 구조가 필요하지 않습니다, 당신은 단지 두 가지를 확인해야 :

• 이 스타일을 오버라이드 (override)를, 후자의 스타일 중 하나 specific 더 많거나이 동일 선택기해야한다;
• 동일한 선택자로 덮어 쓰려면 올바른 순서의 파일이 중요합니다 (후자의 파일이 우선합니다).

당연히 SASS는 CSS 파일을 준비하는 데 사용할 수 있으며 필요에 따라 함께 병합 할 수도 있지만 복잡하지는 않습니다. 계속 간단하게, 군인!

복잡한 방식으로 가고 싶다면 SASS 제품을 사용하는 것이 좋습니다. mixins로 응용 프로그램의 CSS를 생성 할 수 있습니다. Mixins는 인수로 덮어 쓸 수있는 모든 것에 기본값을 가지고 있습니다. 또한 글로벌 프로젝트에서 Compass 확장 프로그램을 만들 것을 고려해보십시오. 그것은 당신이 템플릿에서 응용 프로그램 프로젝트를 생성하고 믹스와 물건을 제공 할 수도 있습니다.