•  12-09-2019
  •  | 
  •  

문제

나는 오랫동안 원하는 것을 포함할 수 있 스타일은 클래스에서 다른입니다.예를 들어

med-font {
  font-size:12px;
}

#message a {
  style: med-font;
  color: blue;
  ...
}

/* lots of other styles, some of which use med-font */

분명히 이 옷을 벗었다 하지만,중요한 점은 모든 사람들 앵커 태그 내#메시지할 필요는 없을 명시적인 클래스 또는 id 입니다.지금 내가 어느 중복된 글꼴 크기 각 클래스에서는 필요하거나 클래스를 추가하는 것들이 그렇지 않으면 필요합니다.이후 나는 쉽게 제어하는 글꼴 크기는 한 장소에서,나는 일반적으로 추가하기 시작됩니다.

다른 솔루션을 분의 정의"#메시지는"이 예에서(아래).이에 대한 확인을 작동하는 작은 프로젝트이지만,대규모 프로젝트 이것은 실제로 나는 적어도 선호하는 솔루션입니다.그것은 사이트 유지 보수에 매우 어려운 경우 많은 클래스가 있어 주위에 흩어져 있는 큰 스타일을 파일이 있습니다.

med-font, #message a {
  font-size:12px;
}

#message a {
  color: blue;
  ...
}

그래서 제 질문은 두 부분으:1.은 이 성가시게 다른 사람들은?2.가 이 기능은 고 CSS3?

편집: 추가 예제의 html 몸과 더 많은 정보...

주요 요점은 클래스를 추가하는 특성을 20 닻을 설정하는 아래의 글꼴 크기가 지루한 수 있습니다.

<div id="username" class="med-font">schickb</div>
<div id="message">
  <div id="part1">
    <a href="whatever">text</a>
    <!--lots more tags and say 6 anchors -->
  </div>
  <div id="part2">
    <a href="foo">text</a>
    <!--lots more tags and say 8 anchors -->
  </div>
</div>
<div id="footer"> <!-- footer anchors should be a smaller font-size -->
    <a href="boo">lala</a> 
    <p class="med-font">Company Name</p>
    <!-- other tags and 3 more anchors -->
</div>

기억,중요한 목표는 하나의 장소는"med-font"선언되도록 조정하기 쉽습니다.에 나의 실제적인 프로젝트를,작은 중형,대형 글꼴 스타일입니다.나는 단지 하나의 선언을 위한 각 그래서 나는 검색하지 않아도를 통해 css 말을 변경 12px 을 11px.

최고의 솔루션은 추가"med-font"클래스를 모든 앵커,신체 그리고"작은"글꼴 등을 앵커에서 바닥글이 있습니다.하지만 내가 많은 오히려 내가 무엇을 보여 원래,단순히 포함하고 원하는 글꼴 스타일"#메시지는"그리고"#footer a"입니다.

요약: 내가 원하는 CSS 수상 건

도움이 되었습니까?

해결책

이것이 바로 무엇입니다 나침반 프레임 워크는 SASS는 변수를 허용하므로 스타일 코딩/유지 관리가 매우 쉽고 즐거운 경험을 제공합니다.

다른 팁

아니오,그렇지 않 나를 성가시게 사용할 수 있기 때문에 여러 개의 클래스 요소에 대한 모두와 일치합니다:

.idiot {
   color:pink;
   text-decoration:underline;
}

.annoying {
   font-weight:bold;
}

/* and if you want to get REALLY specific... */
.annoying.idiot {
   background-image('ann.jpg');
}
...

<div class="annoying idiot">
   Ann Coulter
</div>

개인적으로,나이 훨씬 더 많은 다양한 솔루션하는 문제입니다.예를 들어,jQuery(또는 다른 프레임워크),추가 및 제거할 수 있습니다 이러한 클래스--가장 일반적으로,당신을 추가할 것"selected"클래스 또는 무언가가 할 수있는 뭔가가 다음과 같 강조 표 셀,그 때 누군가를 클릭하기 전에,당신은 단지 제거""선택한 클래스입니다.Uber-한 IMO.

응답에서 당신의 편집 모든 작업을 수행해야 합니다 제거하 CSS 에서 당신의 모든 링크를 할 것을 다음과 같은 것이 가능합니다.

#message > div > a {
   font-size:12px;
}

#footer > a {
    font-size:10px;
}

어디서>기호"를 의미하는 자마다"

또는 더 일반적으로(그러나 이것도 일치하는 직접 안#메시지와 아무것도 깊은--공간"을 의미가의 자손")

#message a {
   font-size:12px;
}

#footer a {
    font-size:10px;
}

당신이 원하는 것을 할 수있는 Sass를 살펴보십시오. 중첩 된 CSS 구조를 허용하여 CSS로 변환 할 수 있습니다. 제 생각에는.

내 생각에, 당신이 이것을 할 수 없다는 사실은 당신의 CSS가 가능한 한 직선적으로 유지되어야하기 때문에 완벽하게 괜찮습니다. CSS의 가장 큰 장점은 Micheal Kay의 XSLT 참조 (예 xstl ... I Know)에서 언급 한 바와 같이 CSS는 매우 간단하고 이해하기 쉽다는 것입니다.

나는 수업을 태그에 넣는 스타일 효과를 알기 위해 여러 곳을 볼 필요가 없습니다 (아마도 여전히).

그래서 나에게 그것은 1 번의 아니오가 될 것입니다. 그리고 2의 경우, 그것은 논의되었고 나는 그것이 표준의 일부가 될 것이라고 생각하지 않습니다.

CSS는 프로그래밍 언어가 아니며 결코 의도되지 않았으며 (이 단계에서) 결코 그렇지 않을 것입니다. 당신이 말하는 것은 W3C와 Whatwg에서 전에 많은 시간에 대해 논의되었습니다.

오 그리고 대답하기 위해 1) 나를 괴롭히지 않는다

  1. 아니, 그것은 나를 괴롭히지 않는다. ie6는 나를 괴롭 힙니다 :)

  2. 특히 CSS 프레임 워크에서 유용한 기능이지만, 우리는 모든 CSS를 "최적화"를 위해 하나의 파일로 묶는 것이 좋습니다. 나는 CSS3의 그러한 기능에 대한 소문을 듣지 못했지만 아직도 그 사양을 계속 진행할 수있는 방법이 있지만, 누가 알고, 지금 충분한 소음을 만들면 그것을 만들 수 있습니다!

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top