hériter d'une autre classe css

J'ai un problème que je n'arrive pas à comprendre, jusqu'à maintenant, mon css a été un peu bâclée et il a toujours été un cas de hack de suite jusqu'à ce qu'il regarde, à droite, mais j'ai décidé de l'apprendre correctement et je vais essayer de catégoriser les choses autant que je le peux.

J'ai donc une mise en forme qui dispose d'une liste non ordonnée, cette liste a trois li balises, à l'intérieur de chacune de ces balises li sont deux div chaque.

Maintenant, j'ai une classe pour chacun de ces conteneurs, ils peuvent être appelés container_1 container_2 et ainsi de suite.

Maintenant, ils ont des qualités uniques pour chacun d'eux, mais ils coll également suivre un ensemble de style par exemple, les divs dans chaque li sont côte à côte, de sorte que ses ensembles de deux divs aussi ils vont également avoir des coins arrondis.

J'ai donc pensé que je pourrais faire un class rounded_corners plus float_left et float_right ainsi, au lieu de re taper le code pour arrondir les cors ou flotter quelque chose que je pourrais juste chose de référence de la classe comme ceci:

.container_1 .rounded_corners .float_left
{

}
 .container_2 .rounded_corners .float_right
{

}

Mais quand je l'utilise je lâche mon style j'ai donc utilisé une virgule et cela a permis à la porcherie;ing pour la div de revenir, mais les coins et les chars n'ont pas de travail.

Alors, où vais-je tort?

C'est mon code, j'ai pris le code qui casse la mise en page, mais si vous supprimez les commentaires, vous pouvez voir ce qui se passe.

http://jsfiddle.net/ragebunnykickass/g3Zaz/

Le nom est un peu différent, mais vous savez ce que cela signifie.

Grâce.

Juste pour référence future: les noms de Classe basée sur la comment les choses ne sont pas recommandés. Les noms de classe basée sur la ce que les choses représenter sont beaucoup mieux.
Merci pour l'astuce copain, ces noms sont seulement à des fins de test à l'instant, en général, je suis très strict avec de nommage (C'est la seule chose que je suis stricte avec haha)
Toujours bon à entendre!

OriginalL'auteur ragebunny | 2012-10-24

  1. 14

    Classes CSS ne peut pas hériter de sorte que vous avez à faire est de diviser pour autant atomique que possible. Par exemple, si vous avez un des angles arrondis de la classe et il peut être applicables aux conteneurs:

    .rounded-corners
{
   /* Your CSS to define rounded corners */
}

    Notez que vous définissez les propriétés pour les coins arrondis. Maintenant, disons que vous avez une classe de style conteneurs (par exemple avec un bon rembourrage):

    .container
{
    /* Your CSS to define a nice container */
}

    Comment les combiner? Ce ne sera pas fait en CSS, mais en HTML, dans cet exemple, la <div> hérite de deux container et rounded-corners:

    <div class="container rounded-corners">
</div>

    Maintenant, supposons que vous avez besoin coins arrondis pour un non objet conteneur:

    <div class="rounded-corners">
</div>

    C'est de cette façon CSS fonctionne. Ne pas les comparer (à cause du nom) avec des classes de langages orientés objet. Chaque classe de définir un ensemble d'attributs qui sera appliquée à tous les éléments qui appartiennent à cette classe. Dernier élément de style est le composition des attributs hérités de chaque classe que l'élément appartient à.

    NOTE: pour résumer: la réponse est oui, vous pourriez avoir à répéter du code. Vous allez avoir du mal à gérer votre code (HTML et CSS), si vous utilisez des classes comme des noms courts pour un style: vous verrez que vous avez manqué le point de séparer le contenu de style (parce qu'en HTML, vous allez définir, à l'aide d'une classe comme rounded-corners, un explicite apparence). Imaginez: le mois prochain, vous devez modifier votre site web, de style et de la mode imposer des exigences que vous avez des coins carrés. Vous devez modifier votre code HTML (sauf si vous acceptez d'avoir un rounded-corners classe pour appliquer un carré de la frontière). Beaucoup mieux si vous dites simplement container et vous laissez votre CSS pour définir (et de savoir) comment un container devrait être rendue.

    Il peut vous être applicable ou non (ça dépend de vos préférences, du goût et de l'environnement de développement), mais vous pouvez prendre un coup d'oeil à MOINS. Il est implémenté comme un JavaScript qui va analyser votre CSSs. Bien sûr, vous n'écrivez pas un pur CSS valide mais vous allez acquérir de nombreuses nouvelles fonctionnalités. Dans votre cas, vous pouvez trouver mixin sont ce dont vous avez besoin:

    .rounded-corners
{
    /* Your CSS here */
}

.float-left
{
    /* Your CSS here */
}

.container
{
    .rounder-corners
    .float-left
}
    Je vois, je pense que j'ai du mal à changer ma façon de penser, de classes, je suis habitué à l'aide de langages à objets. Aussi loin que la dernière note, dites-vous que l'utilisation d'une classe avec un nom tel que rounded_corners est mauvais parce qu'il ne veut pas expliquer ce que la classe est est je viens de l'aide class="rounded_corners" ?
    Peut-être quelque chose comme market_card_boder_style permettrait d'expliquer les choses beaucoup plus.
    non, c'est pas à cause de la signification. Essayez de répondre: "si, par exemple, l'attribut cellpadding est considéré comme mauvais (parce que vous mélanger le contenu avec style dans le HTML) alors pourquoi angles arrondis devrait être mieux? Vous écrire en HTML quelque chose au sujet de l'apparence. "conteneur" est bon (tu dis que c'est un conteneur, vous ne demandez pas comment il doit être affiché). J'ai ajouté un petit exemple sur de MOINS, prendre un coup d'oeil à elle.
    Merci beaucoup pour cette réponse, il a vraiment m'aider! Je vais avoir un coup d'oeil au MOINS. Merci encore.

    OriginalL'auteur Adriano Repetti

  2. 0

    Vous pourriez avoir un code CSS comme:

    .container_1 {

}
.rounded_corners {

}
.float_left {

}

    puis de définir une classe à l'élément HTML de cette façon:

    <div class="container_1 rounded_corners float_left">...</div>

    Donc l'élément DIV héritera de tous les styles de toutes les classes!
    Évidemment, DIV, c'est juste un exemple, vous pouvez utiliser tous les tag!

    OriginalL'auteur jan267

  3. 0

    Si je reçois bien, vous voulez un ensemble de classes pour s'appliquer à chacune des div?

    J'avais casser comme ça :

    css

    .rounded_corners {}
.float_left {}
.float_right {}
.container {}

    et dans le code html

    <li id="container_1" class="container float_left rounded_corners">...</li>
<li id="container_2" class="container float_right rounded_corners">...</li>

    etc...

    Alors là, j'ai aucun moyen de m'en utilisant le rounded_corner classe avec ma classe de conteneur dans la feuille css?
    Il n'est pas plus propre façon de faire cela, parce que mettre plusieurs classes dans la classe de l'attribut dans le code html semblent tellement bordélique à être et vous êtes toujours dit de faire les choses aussi claires et propres que possible.
    ainsi vous pouvez mettre le "rounded_corners" propriétés "dans le" container " de la classe, si tous vos contenants ont cette propriété

    OriginalL'auteur Thai