범위 내의 동적 스타일

Question

헤더, 탐색 등을 정의하는 제 3 자 스킨과 결합되는 사이트가 있습니다. 내 사이트에는 스타일 시트가 있고 타사에는 스타일 시트가 있습니다. 나는이 둘을 결합하여 예측할 수 없을만큼 거대한 엉망진창을 얻는다.

내가하고 싶은 것은 "이 스타일 시트 세트를 페이지의이 부분에 적용하고 다른 하나는이 스타일 시트에 적용하십시오"라고 말하고 싶습니다. 프레임을 사용하여이 작업을 수행하고 싶지 않습니다.

명백한 해결책은 모든 고유 한 스타일 앞에 컨테이너 ID를 붙이는 것입니다. 수백 개의 스타일이있는 대규모 사이트이기 때문에이를 수행하고 유지하는 것이 어려울 것입니다.

정말 제가하고 싶은 일은 동적으로 그렇게하는 것입니다.

하나의 옵션이 백엔드에 있으며, 스타일 시트를 구문 분석하고 각 스타일 이름 앞에 컨테이너의 ID를 추가하여 수정할 수 있습니다. 다른 하나는 javascript로 스타일 시트를 메모리로 파싱하고 제자리에서 수정하는 것입니다. 나는 프런트 엔드 옵션을 더 좋아한다.

누구나 더 나은 옵션을 생각할 수 있습니까? 말하는 일부 jquery 플러그인 $(). apply_styles_from_file();

또는 시트를 섞는 문제를 해결하는 일부 레이아웃 솔루션은 무엇입니까?

또는 적절한 스타일 시트를 구문 분석하고 수정할 수있는 신뢰할 수있는 라이브러리가 있습니까?

Answer 1

), 나는이 문제를 해결하기 위해 더 우아한 방법이 없다는 것을 결정했다. 다음의 경우,

A{} becomes .myclass A{} 
    .foo becomes .myclass foo{} 
    #thispage .bar becomes .myclass #thispage .bar{} 

나는 파일을 찾습니다 핸들러를 통해 이런 짓을 : 내가 궁극적으로 한 일은 내가 가지고있는 스타일 시트의 전체 세트를 다시 모든 정의에 클래스를 추가하는 서버 측 솔루션을 사용하는 것입니다 마지막 컴파일 이후 발견되지 않거나 수정되지 않은 경우 다시 작성합니다. 나는 펄 모듈을 CSS :: Simple을 사용하여 다시 작성했다. 광산에서 간섭없이 나는이 특별한 클래스는 자신의 스타일을 가져 외부가

<!-- header here --> 
    <div class="myclass"> 
    <!-- content here --> 
    </div> 
    <!-- footer here --> 

이제 아무것도 :

는 다음 나는 클래스의 핵심 내용을 감쌌다. 이제 제 3 자 스타일이 지배적 인 페이지 (위의 래퍼를 건너 뛰고 원하는 부분 만 래핑) 또는 내 방식이 위와 같은 페이지를 만들 수 있습니다. 헤더는 제 3 자로부터 올 수 있습니다.

이것은 끔찍하고 clunky합니다. :-(CSS의 차기 버전에는 몇 가지 컨텍스트가 있어야하지만, 작업이 완료됩니다.

Answer 2

당신이 무엇을 하든지간에 컨테이너 내의 요소에만 적용되는 컨테이너와 스타일을 가져야한다고 생각합니다. 당신이 요구하는 자바 스크립트 기반 방법을하더라도, 어떤 요소가 영향을 받을지를 정의해야합니다. 시간이 갈수록 점점 더 복잡해질 것입니다.

따라서 JS- 기반 솔루션을 피하고 대신 PHP와 같은 서버 측 언어로 이동하여 개별 뷰에 범위를 설정 한 다음 개별적으로 뷰를 렌더링 할 수 있습니다.

 <div id="main"> 
     <? render('view' => 'users.php', 'scope' => 'users'); ?> 
     <? render('view' => 'games.php', 'scope' => 'games'); ?> 
    </div> 

render 메서드는 div에 뷰를 래핑하고 범위가 지정된 컨테이너가 있는지 확인합니다. 당신은 단순히 부분 렌더링 새의 범위를 다시 선언 할 수 있습니다, 다른 게임 섹션을 추가하기로 결정한다, 나중에 그런

 <div id="main"> 
     <div class="users">Users go here.</div> 
     <div class="games">Games go here</div> 
    </div> 

: 뷰의 모습에 따라, 출력은 같은 것을 볼 수 있었다 이전 CSS와 동일한 CSS 범위를 갖습니다.

서로 관련된 스타일을 구분하는 데 도움이되도록 각 범위 (예 : users.css)를 나타내는 CSS 파일을 가질 수 있습니다.

그것은 그것을 처리하는 한 가지 방법이라고 생각합니다. 그리고 그 자리에서 내가 생각해 낼 수있는 최선의 방법입니다.

행운을 빈다. 더 나은 해결책을 찾으면 나는 그것을 듣고 싶다!

Answer 3

이와 비슷한?

#green-bg 
{ 
    background-color: green; 
} 

#red-bg 
{ 
    background-color: red; 
} 

<div id="red" class="color-selector">Apply Red Background</div> 
<div id="green" class="color-selector">Apply Green Background</div> 

<div id="content">I need a background color!</div> 

$('.color-selector').click(function() { 
    $('#content').addClass('#' + this.id + '-bg');   
}); 

나는 또한 그 속성이 요소의 요청과 일치하는 경우로드 된 스타일 시트를 "무시"어떤 방법이 믿지 않는 명명 규칙에서 해당 따로 언급해야한다.

Ex. 둘 다 h1 선언이있는 두 개의 스타일 시트가있는 경우 h1 요소는 충돌에 따라 스타일이 결정됩니다. 차별화 할 수있는 유일한 방법은 각각의 스타일 시트가 해당 속성 (예 : h1.light,)의 이름을 가지며 위에서 설명한대로 스타일 시트를 적용하는 것입니다.

Answer 4

user_made css가! important-rule을 얻으면 어떨까요?

그냥 이것에 대한

:

사용자가 허용 된 영역을 사용자 정의하고 그/그녀의 페이지 에 적용 - 뒷면에 CSS 파일이 만들어집니다 수정 된 영역에 대한 중요한-규칙을!.

작동해야하지만 갖고 싶지 않은 CSS 해킹을 거부해야합니다. 는 (구 마이 스페이스와 같은) 내 연구 후

감사