OOCSS 컨테이너 및 내용 분리?

Question

질문 : 두 번째 OOCSS 원칙이 실제로 유효합니까? 당신은 위치에 따라 스타일이 안하고있는 OOCSS 두 번째 원칙에 따라

: 기본적으로 https://github.com/stubbornella/oocss/wiki

에서

견적, 이것은 "거의 위치에 의존하는 스타일을 사용하지"를 의미한다. 어떤 물건을 놓을지라도 물건은 똑같이 보일 것입니다. 따라서 .myObject h2 {...}로 특정 h2를 스타일링하는 대신 h2 class = "category"와 같이 해당 h2를 설명하는 클래스를 만들고 적용하십시오.

실용적인 예를 들어 봅시다. 표준 바디 (흰색 배경)와 거대한 바닥 글 (검은 배경)으로 표준 2.0 설정이 있다고 가정 해보십시오. 몸에는 검은 색 링크가 있고 바닥 글에는 물론 흰색이 필요합니다. 이를 달성하기 위해 가장 간단하고 직관적 인 방법은 아니다 단순히 :

a{ color: #000; } 
.footer a{ color: #FFF; } 

내가 어디에 내가 먼저 클래스 만들어야 할 것 OOCSS 원칙에 따라하는 경우

.inverted{ color: #FFF; } 

그런 다음 추가로 진행을 내가 반전시키고 자하는 모든 링크에 그 클래스. 그것은 번거 로움처럼 보입니다.

스타일이 만들어지는 전체 언어의 목적이 아닙니다. 계단식? 여기에 오해가 있습니까?

Answer 1

나는 당신이 당신의 구체적인 예에서 그렇다는 의미에서 옳다고 생각합니다. 어쩌면 그것을하는 것이 더 쉬울 것입니다. 그러나 다시 한 번 첫 번째 문장을 보면 OOCSS page:

수천 페이지의 CSS를 어떻게 확장합니까?

그 맥락에서 .. 두 번째 원칙은 완벽합니다. 예를 들어 솔루션을 구현했다고 가정 해 봅시다. 회사에서 연한 회색 버튼을 만들기로 결정한 한 해를 가정 해 봅시다. 그들은 당신의 이을 계단식으로 덮여 있기 때문에 .. 모든 a 태그 흰색 될 것입니다이 경우

<!-- inside footer --> 
<a class="button lightGrey">link</a> 

: 검은 바닥 글에 검은 색 텍스트를 가지고. 우리는 단순히 기본적으로 모든 a 태그 검은 색 결정을 내린 것처럼

.footer a.button.lightGrey { 
    color: #000; /* huh? but i thought we did this before with a {color: #000;} ?*/ 
} 

(마지막 주 참조) 여기서 : 그럼 우리는 단지 솔루션 무슨 짓을 취소 할 또 다른 유구를 만들 가야합니다

을 다음 너희를

.footerLinks { color: #FFF } 

:

a{ color: #000; } 

다음 글에서 우리는 흰색으로되어 있습니다 링크의 특별한 유형을 만듭니다 나중에 링크 중 일부는 여전히 흰색입니다.우리가 .. a 태그는 기본 색상이 .. 아무것도 취소에 대해 걱정할 필요가 없습니다 여기에 다음

<a class="button lightGrey">link</a> 

및 그것 뿐이다 다음 greyLight 버튼 내에서 다른 사람들이 검은 될 것입니다. 2 년 후에 누군가가 lightGrey 버튼 내부의 링크 (OOCS의 전체 점인 바닥 글은 물론 ...)가 빨간색이어야한다고 결정하면 OOCSS 방식이됩니다.

.redLink { 
color: red; 
} 

와 HTML이 경우

<a class="button lightGrey redLink">link</a> 

우리가 .lightGrey 클래스를 가지고가는 경우에 그것은 중요하지 않습니다, 또는 우리가 바닥 글 내에서이 코드를하거나 할 수있을 것입니다 .. 그것의 모든 같은 .. 그것은 더 예측할 수 있고 재사용 가능한 코드를 생성합니다 .. OOCSS입니다. (나는 그들이 결국 공식화하고있어서 다행입니다. 게시물 btw에 대해 많은 감사를드립니다.)

마지막 주 : 순수 OOCSS하기 위해, 하나는 a 즉 a {color: #000;}의 기본 색상을 변경하지 말아야하는 것은 잘못입니다! 이 기본 (파란색) 색상 .. 사람이 그 색상을 변경하려 할 때마다의에, 그것은 남아 있어야합니다 .. 그들은 지금이 경우는 a가 더 기본처럼 그것을 즉

<a class="redLink">..</a> 

를 지정해야합니다 부모 클래스 .. 다른 모든 것들은 서브 클래스와 기본 동작 ..

업데이트를 대체합니다 - 코멘트에 응답 :

신뢰할 수있는 사이트 인수 :

을

그러한 이니셔티브는 거의 항상 평판 좋은 회사가 채택한 커뮤니티에 의해 주도되고 있습니다. 대기업에 의해 채택 될 때도 일반적으로 그러한 변화를 옹호하는 열정적 인 개발자를 통해 아래에서부터 발생합니다. 아마존에서 일할 때 옹호자였습니다. 그리고 채택 될 때조차도 그것은 일반적으로 소규모이며 org의 모든 유닛에 걸쳐 있지 않습니다. 그것은 심지어 구글과 아마존과 페이스 북 등이 항상 그런 견해 차이가있을 것입니다. 그런 규칙을 시행하는 것은 좋은 생각이 아닙니다. 그러한 마이크로 관리가 엔지니어의 창의력을 제약 할 것입니다. 위키에 팀을위한 가이드 라인이있을 수 있습니다 (즉, 아마존 킨들 터치 앱 스토어를위한 가이드 라인이있었습니다). 회사 전체에서 일하는 10,000 명의 엔지니어에 대한 규칙을 시행하는 것은 실용적이거나 바람직하지 않습니다.

OOCSS에서 가치를 발견하고 사이트에서 구현을 시작하고 동료 웹 개발자에게 옹호한다면 추세가됩니다. 결국 업계 최고의 모범 사례가됩니다.이

이 좀 봐 :
간단한 : http://jsfiddle.net/64sBg/
좀 더 상세한 : http://jsfiddle.net/64sBg/2/

당신은 등 페이스 북

예에서 볼 것으로 예상 할 수있다

너무 자세하지 않고 (나는 당신이 패턴을 볼 것이라 확신한다.) css 설명의 입도가 스타일 정의에서 중복성없이 미묘한 변화를 허용한다는 것을 알 수있다. 그래서 왼쪽 화살표 대 오른쪽 화살표를 주목하십시오 .. 또한 .red와.파란색 스타일은 이후에 테이블 등에 적용될 수 있습니다.

또한 내 CSS에 하나의 계단식 배열이 없음을 알 수 있습니다. 따라서 내 스타일을 완전히 독립적으로 적용 할 수 있습니다 (즉, 규칙 구현). 개체가 동일하게 보일 것입니다. 상관없이

마지막으로) 그것을을 어디다 ..이 .. 연쇄 당신은 확실히 예를 들어 당신의 jQuery 선택기에서 사용할 수 있습니다 .. 이을 계단식 사용 아직 없습니다 명시 적으로하지 않고, 즉 기본 (에 의해 발생 css 스타일로 설정하십시오.) .. 아래 CSS를 살펴보면 body의 글꼴 속성이 모든 버튼으로 계단식으로 표시되었음을 알 수 있습니다.

<a class="button blue dark"> 
    <div class=" arrowDownWhite rightArrow">Analytics</div> 
</a> 

<a class="button red dark"> 
    <div class=" arrowDownWhite leftArrow">Actions</div> 
</a> 

<a class="button grey light"> 
    <div class=" arrowDownRed leftArrow">options</div> 
</a> 

과 CSS :

body 
{ 
    font-family: Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif; 
    font-size: 15pt; 
} 

.button 
{ 
    padding: .5em 1em; 
    display: inline-block; 
    text-decoration: none; 
} 
.dark { 
    color: white; 
} 

.light{ 
    color: #E40E62; 
} 
.blue 
{ 
    background-color: #51C8E8; 
} 
.red 
{ 
    background-color: #E40E62; 
} 
.grey 
{ 
    background-color: #E0E0E0 ; 
} 
.arrowDownWhite 
{ 
    background-image:url(http://s2.postimage.org/ywam7ec4l/small_Arrow_Down_White.png); 
    background-repeat:no-repeat; 

} 

.arrowDownRed 
{ 
    background-image:url(http://s2.postimage.org/je5743t2d/small_Arrow_Down_Red.png); 
    background-repeat:no-repeat; 
} 

.leftArrow 
{ 
    padding-left: 1em; 
    background-position: left center; 
} 

.rightArrow 
{ 
    padding-right: 1em; 
    background-position: right center; 
} 

Answer 2

그것은 컨테이너에서 당신의 피부를 분리하는 번거 로움 가치가있다.

색상을 초월합니다. Nicole Sullivan이 그녀보다 더 나은 예를 제공했으면합니다. 나는 링크 그들 모두가 탐색 추상화의 스킨입니다

의

• 메뉴
• 탭
• 도구 모음
• 수평 및 수직 목록을 포함 23 개 웹 사이트가

필자는 모든 클래스 간의 공통 코드를 처리하기 위해 추상화 클래스를 만들었습니다. 방향을 수평에서 수직으로 변경하기위한 몇 가지 수정자를 추가했고, 또한 그 위치를 떠있었습니다. 나는 모든 색상을 추상화뿐만 아니라 적용한 스킨을 기반으로 바꿀 수있는 CSS 규칙으로 유지했습니다.

/* Object */ 

.nav 
{ 
    margin-bottom: 1.5em; margin-left: 0; padding-left: 0; list-style: none; 
} 
    /* Modifier */ 

    .nav--stack .nav__item 
    { 
     display: block; 
    } 

    .nav--right 
    { 
     float: right; 
    } 

    /* Elements */ 

    .nav__item 
    { 
     float:left 
    } 

     .nav__item__link 
     { 
      display:none; 
     } 

메뉴 스킨

은 내가 .nav 추상화는 사이드 바 메뉴처럼 보이게 만든 피부를 필요로했다. 혹시 궁금하신 점이 있으시면 padding을하지 않으 셨습니다 .nav_ 위의 _link는 피부에 따라 바뀔 수 있기 때문에 위의 링크입니다. 탭 스킨에는 2px로 설정되어 있습니다.

/* Object */ 

.menu 
{ 

} 

/* Elements */ 

    .menu .nav__item--current.nav__item__link 
    { 
     color: #fff; background: blue; 
    } 

    .menu .nav__item__link 
    { 
     padding: 4px; border-radius: 4px; 
    } 

    .menu .nav__item__link:hover 
    { 
     background: #eee 
    } 

위치 독립적 인 정보 유지 - 태그 이름이 0 개입니다. 저는 스타일리시하지 않으며 부트 스트랩처럼 .nav에있는 아이들도 않습니다. 이 코드는 dls 또는 div에서도 사용할 수 있으며 선택기 엔진이 규칙을 읽는 방식에 따라 더 나은 성능을 제공합니다.

내가 가지고있는 모든 사이트에 대해 가지고있는 물건을 벗겨내는 것의 이점은 나에게 번거로운 가치가있다.