heredar de otra clase css

Tengo un problema que me parece que no puede averiguar, hasta ahora mi css ha sido un poco slapdash y siempre fue un caso de meterle mano hasta que se ve bien, pero me he decidido a aprender correctamente y estoy tratando de categorizar las cosas tanto como puedo.

Así que tengo un diseño que tiene una lista desordenada, esta lista tiene tres li etiquetas, dentro de cada uno de estos li etiquetas son dos div cada uno.

Ahora tengo una clase para cada uno de estos contenedores, que puede ser llamado container_1 container_2 y así sucesivamente.

Ahora tienen algunos atributos únicos para cada uno de ellos, pero que al seguir un conjunto de estilo, por ejemplo, de los divs en cada uno de los li son de lado a lado de modo que sus conjuntos de dos divs también van a tener las esquinas redondeadas.

Así que pensé que podría hacer una clase de la clase rounded_corners más float_left y float_right así que en lugar de volver a escribir el código de la ronda de los callos o flotar algo que sólo podría referencia cosa de la clase como esta:

.container_1 .rounded_corners .float_left
{

}
 .container_2 .rounded_corners .float_right
{

}

Pero cuando uso este voy a perder mi estilo así que utiliza una coma y esto permitió que el orzuelo;ing para el div para volver, pero las esquinas de carrozas y no funcionó.

Así que a donde voy mal con esto?

Este es mi código, me he tomado el código que rompe el diseño, pero si se quita el comentario que usted pueda ver lo que sucede.

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

El nombre es un poco diferente, pero usted sabrá lo que significa.

Gracias.

  • Sólo para referencia futura: los nombres de Clase basado en cómo se ven las cosas no son recomendables. Los nombres de clase basado en qué cosas representan son mucho mejores.
  • Gracias por la sugerencia amigo, estos nombres son sólo para propósitos de la prueba en el momento en que, por lo general yo soy muy estricto con los nombres (Es la única cosa que soy estricta con el jaja)
InformationsquelleAutor ragebunny | 2012-10-24

3 Kommentare

  1. 14

    Clases CSS no puede heredar lo que tenemos que hacer es dividir a ser tanto atómicas como sea posible. Por ejemplo, si usted tiene esquinas redondeadas de la clase y puede ser aplicable a los contenedores:

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

    Tenga en cuenta que SÓLO define las propiedades para las esquinas redondeadas. Ahora digamos que usted tiene una clase de estilo de los envases (por ejemplo, con un adecuado relleno):

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

    Cómo combinarlos? Esto no se hace en CSS pero en HTML, en este ejemplo, esto <div> hereda de ambos container y rounded-corners:

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

    Ahora supongamos que usted necesita esquinas redondeadas para un no objeto contenedor:

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

    Esta es la forma en CSS funciona. No se pueden comparar con ellos (porque del nombre) con clases de lenguajes orientados a objetos. Cada clase define un conjunto de atributos que se aplica a todos los elementos que pertenecen a esa clase. Elemento Final es el estilo composición de los atributos heredados de cada clase de elemento que pertenece.

    NOTA: para resumir: la respuesta es sí, puede que tenga que repetir el código. Tendrás problemas para administrar el código (HTML y CSS) si el uso de las clases de nombres cortos para un estilo de: te voy a ver te perdiste el punto para separar el contenido de estilo (porque en HTML que va a definir, mediante una clase como rounded-corners, un explícita apariencia). Imagine: el próximo mes usted tiene que cambiar su sitio web, el estilo y la moda de los requisitos de imponer usted tiene las esquinas del cuadrado. Usted tiene que cambiar su código HTML (a menos que usted acepte tener un rounded-corners clase para aplicar un cuadrado de la frontera). Mucho mejor si simplemente decir container y deja tu CSS para definir (y saber) cómo una container deben ser prestados.

    Puede ser aplicable a usted o no (depende de sus preferencias, gustos y entorno de desarrollo), pero usted puede tomar un vistazo a MENOS. Se implementa como un JavaScript que analizar su CSSs. Por supuesto, usted no escribir un puro CSS válido, pero vas a tener muchas nuevas características. En su caso, usted puede encontrar los mixins son lo que usted necesita:

    .rounded-corners
    {
        /* Your CSS here */
    }
    
    .float-left
    {
        /* Your CSS here */
    }
    
    .container
    {
        .rounder-corners
        .float-left
    }
    • Veo, creo que estoy luchando para cambiar mi forma de pensar de las clases, estoy acostumbrado a usar OO de idiomas. En cuanto a la última nota, estás diciendo que el uso de una clase con un nombre como rounded_corners es mala porque no se explica lo que la clase se termino el uso de la clase=»rounded_corners» ?
    • Tal vez algo como market_card_boder_style explicaría las cosas mucho más.
    • no, no es por el sentido. Tratar de contestar: si, por ejemplo, el atributo cellpadding se considera mal (porque se mezcla el contenido con estilo en HTML) entonces, ¿por qué esquinas redondeadas debe ser mejor? Escribir en HTML, algo de la apariencia demasiado. «contenedor» es bueno (dicen que es un contenedor, no se le pregunta cómo debe procesarse). He añadido un pequeño ejemplo acerca de MENOS, echar un vistazo a él.
    • Muchas gracias por la respuesta, realmente ha ayudarme! Voy a echar un vistazo al MENOS. Gracias de nuevo.
  2. 0

    Usted podría tener un código CSS como:

    .container_1 {
    
    }
    .rounded_corners {
    
    }
    .float_left {
    
    }

    y, a continuación, establezca una clase a un elemento HTML de este modo:

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

    Por lo que el elemento DIV heredará todos los estilos de cada clase!
    Obviamente, DIV es sólo un ejemplo, podría utilizar cada etiqueta!

  3. 0

    Si entiendo bien, quieres un conjunto de clases que se aplican a cada div?

    Me gustaría que se rompen como que :

    css

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

    y en el html

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

    etc…

    • Así que así no hay manera de que me utilizando la rounded_corner clase con mi clase de contenedor en la hoja css?
    • No hay más ordenado manera de hacer esto, porque poner a varias clases en el atributo class en el html parecen tan desordenado a ser y que siempre se dijo de hacer las cosas tan clara y limpia como sea posible.
    • bien, usted puede poner el ‘rounded_corners’ propiedades en el ‘contenedor’ de la clase, si todos los contenedores tienen esta propiedad

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea