La combinaison de styles

Question

J'ai longtemps voulu être en mesure d'inclure une classe de style dans une autre. Par exemple

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

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

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

Il est évident que ceci est un exemple dépouillé, mais le point essentiel est que toutes ces balises d'ancrage dans #message ne devraient pas avoir des classes explicites ou ids. Pour le moment dupliquer soit la taille de la police dans chaque classe qui en a besoin ou ajouter des classes à des choses qui ne seraient autrement pas besoin. Et comme je veux contrôler facilement la taille de la police d'un endroit, je commence habituellement ajouter des classes.

Une autre solution consiste à séparer la définition de « #message a » dans cet exemple (ci-dessous). Cela fonctionne bien pour les petits projets, mais pour les grands projets est en fait ce que ma solution moins favorisée. Il rend la maintenance du site très difficile si vous avez de nombreuses classes fendit et dispersés dans des fichiers volumineux de style.

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

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

Alors, ma question est en deux parties: 1. Est-ce importuner d'autres personnes? 2. Est-ce que quelqu'un sait si cette fonction est / a été envisagée pour CSS3?

Modifier Ajout exemple de corps html et plus de détails ...

Le point principal est que l'ajout d'un attribut de classe aux 20 points d'ancrage ci-dessous pour définir leur taille de la police est fastidieuse.

<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>

Rappelez-vous, un objectif important est d'avoir un endroit où « -med police » est déclarée de sorte qu'il est facile à régler. Dans mon projet actuel, il y a des petites, moyennes et grandes styles de police. Je ne veux qu'une seule déclaration pour chaque sorte que je n'ai pas à chercher dans le css dire le changement 12px à 11px.

La meilleure solution est actuellement d'ajouter la classe « -med police » à tous les points d'ancrage dans le corps, et la classe « petite police » à tous les points d'ancrage dans le pied de page. Mais je préférerais faire ce que je l'ai montré à l'origine, et il suffit d'inclure la police de votre choix dans les styles pour « #message a » et « #footer a ».

Résumé: Je veux CSS pour être plus

Était-ce utile?

Nous faire parvenir

La solution

Ceci est exactement ce que le Compass cadre est bon. Sass permet des variables, ce qui rend le codage / le maintien de feuilles de style très facile et une expérience agréable.

Answer 1

Ceci est exactement ce que le Compass cadre est bon. Sass permet des variables, ce qui rend le codage / le maintien de feuilles de style très facile et une expérience agréable.

Answer 2

Non, ça ne me gêne pas, parce que vous pouvez utiliser plusieurs classes pour un élément et les deux se correspondent:

.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>

Personnellement, je trouve cela une solution beaucoup plus polyvalent au problème. Par exemple, dans jQuery (ou dans un autre cadre), vous pouvez ajouter et supprimer ces classes - le plus souvent, vous allez ajouter un « sélectionné » classe ou quelque chose qui pourrait faire quelque chose comme point culminant une cellule de table, et quand quelqu'un clique pour basculer hors tension, vous retirez simplement la classe « sélectionnée ». Uber-élégant OMI.

En réponse à vos modifications, tout ce que vous avez à faire pour enlever le CSS de tous vos liens A serait de faire quelque chose comme ceci:

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

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

Lorsque le symbole> signifie « est un enfant de »

ou, plus généralement (mais ce serait aussi correspondre à une A l'intérieur même #message et quoi que ce soit plus profond - les moyens d'espace « est un descendant de »)

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

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

Answer 3

Jetez un oeil à SASS, ce qui pourrait faire ce que vous voulez. Il permet aux structures CSS imbriquées, qui peuvent ensuite être convertis en CSS. Je pense.

Answer 4

À mon avis, le fait que vous ne pouvez pas faire cela est parfaitement OK parce que votre CSS doit rester aussi straightfoward que possible. Sur le plus grand avantage de CSS, comme mentionné dans la référence XSLT de Micheal Kay (ouais xstl ... Je sais), est que le CSS est très simple et très facile à comprendre.

Je n'ai pas regarder plusieurs endroits pour connaître les effets de style de mettre une classe sur une étiquette (peut-être bien mais quand même).

Pour moi, ce serait un pas pour le numéro 1. Et comme pour 2, il a été discuté et je ne pense pas que ce sera une partie de la norme.

Answer 5

CSS n'est pas un langage de programmation, il n'a jamais été destiné à être et (à ce stade) ne sera jamais. ce que vous parlez a été discuté beaucoup de fois avant de W3C et WHATWG

oh et pour répondre à 1), il ne me gêne pas

Answer 6

1. Non, il ne marche pas me embêter, IE6 me énerve:)

2. Il serait une caractéristique utile d'avoir, en particulier dans un cadre de css, cependant, nous ne sommes encouragés à amalgamer tous nos css en un seul fichier maintenant pour « l'optimisation ». Je nai entendu des rumeurs sur une telle fonctionnalité dans CSS3, mais il reste encore du chemin à parcourir sur cette spécification encore, alors qui sait, il pourrait le faire si vous faites assez de bruit maintenant!