객체지향 CSS FAQ

원문: http://wiki.github.com/stubbornella/oocss/faq (번역 시 버전 28)
번역: 이종

OOCSS에서 "객체"를 정의하는 방법은 무엇입니까?

객체는 JAVA의 클래스와 유사하며 OO 특성을 유지합니다.

CSS 객체는 4가지 부분으로 구성됩니다:

1. 하나 이상의 DOM 노드의 HTML일 수 있습니다.
2. 래퍼 노드의 클래스 이름에서 시작하는 CSS 스타일 선언
3. 표시 및 표시를 위한 배경 이미지 및 스프라이트 구성 요소와 유사합니다.
4. 객체와 관련된 JavaScript 동작, 리스너 또는 메서드

각 CSS 클래스가 반드시 자체 개체는 아니지만 래퍼 클래스의 구성 요소일 수 있으므로 이는 혼란스러울 수 있습니다. 예를 들어:

<div 클래스="모드">
<div 클래스="내부">
<div class="hd">블록 헤드</div>
<div class="bd">블록 몸체</div>
<div class="ft">블록 풋</div>
</div>
</div>

객체는 mod 클래스를 가진 모듈입니다. 4개의 구성 요소 노드 포함(2개의 블록(내부 및 본체)과 2개의 선택적 블록(머리 및 발)을 포함하여 모듈과 독립적일 수 없음)

OOCSS는 어떻게 성능을 향상합니까?

OOCSS는 두 배의 성능 이점을 제공합니다.

1. 재사용 가능성이 높은 CSS 코드로 CSS 코드가 거의 필요하지 않습니다. 즉, 다음을 의미합니다.
   • 파일 크기가 작아서 전송 속도가 빨라집니다.
   • 사이트 페이지에서 호출되는 CSS 코드의 비율이 증가함에 따라 브라우저에서 재사용되거나 캐시될 것으로 예상됩니다.
2. 브라우저에 관한 한 다시 그리기 및 레이아웃 계산이 적습니다.
   • 단일 페이지에서 더 많은 CSS 규칙이 재사용될수록 렌더링 엔진이 "계산된 값"에 소비하는 시간이 줄어듭니다.
   • 수동으로 추가된 "확장" 클래스는 더 적은 수의 규칙을 재정의합니다. 이는 엔진이 규칙을 적용하는 데 더 적은 작업을 수행함을 의미합니다.

ID를 사용하여 콘텐츠 스타일을 지정하시겠습니까?

이는 동일한 페이지(또는 캐시가 잘되는 동일한 사이트)에서 객체를 재사용할 때 성능이 "공짜"인 것입니다. ID를 사용하여 스타일을 작성하는 것은 동일한 페이지에서 한 번만 사용할 수 있습니다. @cgriego (twitter) 싱글톤과 비교했는데 매우 정확하다고 생각합니다. 매우 구체적인 헤더 메뉴와 같이 ID를 사용하여 스타일을 정의하려는 상황이 있을 수 있습니다. 이 경우 ID를 사용하여 특수 요소를 샌드박스화하고 여기의 코드가 사이트의 다른 부분에 영향을 미치지 않도록 할 수 있습니다. 클래스보다 ID를 선택하기 전에 두 번 생각하십시오. 사이트가 성장함에 따라 다른 사람들이 CSS에서 구축된 HTML로 무엇을 할지 예측하기가 정말 어렵습니다. 선택의 여지가 있다면 확장성을 최대한 고려하세요.

템플릿의 머리, 몸체, 발에서 ID를 제거하려고 합니다. 어떤 사람들은 여러 집이 있을 수 있습니다. 사이트의 여러 머리글과 바닥글은 추측하기 어렵지만 그렇게 생각하는 디자이너가 있을 것이라고 확신하므로 ID가 사라질 가능성이 높습니다. (그렇게 원활하지는 않습니다. 원본 기사를 읽어보세요. 누군가는 여러 개의 주요 콘텐츠 영역을 가질 수 있습니다. 여러 사이트 머리글과 바닥글은 상상하기가 더 어렵지만, 그런 것을 꿈꾸는 디자이너가 있을 것이라 장담하는데, 따라서 ID가 사라질 가능성이 매우 높습니다.)

반면에 ID 후크는 연결에 적합합니다. HTML에 넣되 스타일을 작성하는 데 사용하지 마세요.

소스: 99css