CSS - Propiedades de la clase de ampliación

Question

Soy bastante nuevo en CSS y me he estado orientando hasta ahora. Estoy creando estos botones como enlaces con sombras y otras cosas. Ahora hay varios de estos botones necesarios en el sitio, todo sobre los botones es el mismo, excepto algunas propiedades que cambian como el ancho y el tamaño de la fuente.

Ahora, en lugar de copiar el mismo código, una y otra vez para cada botón, hay una forma de extender el botón y agregar solo las propiedades que cambian.

Ejemplo de dos botones - css

.ask-button-display { 
background: #8BAF3B; 
border-radius: 4px; 
display: block; 
letter-spacing: 0.5px; 
position: relative; 
border-color: #293829; 
border-width: 2px 1px; 
border-style: solid; 
text-align:center; 
color: #FFF; 
width:350px; 
font-size: 20px; 
font-weight: bold; 
padding:10px; 
} 


.ask-button-submit { 
background: #8BAF3B; 
border-radius: 4px; 
display: block; 
letter-spacing: 0.5px; 
position: relative; 
border-color: #293829; 
border-width: 2px 1px; 
border-style: solid; 
text-align:center; 
color: #FFF; 
font-weight: bold; 
width:75px; 
font-size: 12px; 
padding: 1px; 
} 

Y esta es la forma en que estoy usando actualmente en mi html

<a href="/" id="ask-question-link" class="ask-button-display">Ask a Question</a> <a href="/" class="ask-button-submit" id="ask-button-submit">Submit</a> 

Así que me pregunto si hay una manera más limpia que hacer esto - como

.button { 
/* PUT ALL THE COMMON PROPERTIES HERE */ 
} 

AND THEN SOMEHOW EXTEND IT LIKE 
.button #display { 
/* THE DIFFERENT PROPERTIES OF Display BUTTON */ 
} 

.button #ask { 
/* THE DIFFERENT PROPERTIES OF Ask BUTTON */ 
} 

Pero no estoy seguro de cómo hacer esto. Gracias por sus entradas

Answer 1

Puede agregar varias clases a un elemento, por lo que tienen una clase .button que cubre todo, luego una clase .button-submit, que agrega cosas en.

Por ejemplo:

.button { 
    padding: 10px; 
    margin: 10px; 
    background-color: red; 
} 

.button-submit { 
    background-color: green; 
}​ 

Ver un jsFiddle vivo here

En su caso, el siguiente debería funcionar:

.button { 
    background: #8BAF3B; 
    border-radius: 4px; 
    display: block; 
    letter-spacing: 0.5px; 
    position: relative; 
    border-color: #293829; 
    border-width: 2px 1px; 
    border-style: solid; 
    text-align:center; 
    color: #FFF; 
    width:350px; 
    font-size: 20px; 
    font-weight: bold; 
    padding:10px; 
} 


.button-submit { 
    width:75px; 
    font-size: 12px; 
    padding: 1px; 
}​ 

Ver un jsFiddle vivo here

Answer 2

.ask-button-display, 
.ask-button-submit { 
    /* COMMON RULES */ 
} 

.ask-button-display { 

} 

.ask-button-submit { 

} 

Answer 3

Añadir una clase de botón para ambos enlaces para las partes comunes

.button { 
background: #8BAF3B; 
border-radius: 4px; 
display: block; 
letter-spacing: 0.5px; 
position: relative; 
border-color: #293829; 
border-width: 2px 1px; 
border-style: solid; 
text-align:center; 
color: #FFF; 
} 

tener en sus otras clases de las reglas que no son comunes.

Y el código HTML será

<a href="/" id="ask-question-link" class="button ask-button-display">Ask a Question</a> 
<a href="/" class="button ask-button-submit" id="ask-button-submit">Submit</a> 

Answer 4

Usted puede hacer esto ya que se puede aplicar más de una clase a un elemento. Cree su clase maestra y otras clases más pequeñas y luego simplemente aplíquelas según sea necesario. Por ejemplo:

<a href="/" id="ask-question-link" class="button submit">Ask a Question</a> <a href="/" class="ask-button-submit" id="ask-button-submit">Submit</a> 

Esto se aplicaría el botón y enviar clases que crearía mientras que le permite aplicar también a las clases por separado.

Modificar el ejemplo de código en la línea de:

.master_button { 
/* PUT ALL THE COMMON PROPERTIES HERE */ 
} 
AND THEN SOMEHOW EXTEND IT LIKE 
.button_display { 
/* THE DIFFERENT PROPERTIES OF Display BUTTON */ 
} 
.button_ask { 
/* THE DIFFERENT PROPERTIES OF Ask BUTTON */ 
} 

y aplicar como:

<a href="/" id="ask-question-link" class="master_button button_ask">Ask a Question</a> 
<a href="/" class="master_button submit" id="ask-button-submit">Submit</a> 

Answer 5

Es posible que desee ver en Sass. Con Sass básicamente puedes crear variables en tu archivo CSS y luego volver a usarlas una y otra vez.http://sass-lang.com/ El siguiente ejemplo fue tomado del sitio web oficial Sass:

$blue: #3bbfce; 
$margin: 16px; 

.content-navigation { 
    border-color: $blue; 
    color: 
    darken($blue, 9%); 
} 

.border { 
    padding: $margin/2; 
    margin: $margin/2; 
    border-color: $blue; 
} 

Answer 6

En lugar de repetir lo común "Añadir una clase de botón para el elemento" respuesta que voy a mostrar algo nuevo en el mundo extraño y loco de CSS de nueva era, o mejor conocido como SCSS!

Esta reutilización de código en hojas de estilo se puede lograr con algo llamado 'Mixin'. Lo que esto nos permite hacer es reutilizar ciertos estilos usando el atributo '@include'.

Déjeme darle un ejemplo.

@mixin button($button-color) { 
    background: #fff; 
    margin: 10px; 
    color: $color; 
} 

y luego cada vez que tenemos un botón que decir

#unique-button { 
    @include button(#333); 
    ...(additional styles) 
} 

leer más aquí: http://sass-lang.com/tutorial.html.

Corre la voz !!!

Answer 7

Es posible que desee probar esto:

.button { 
    padding: 10px; 
    margin: 10px; 
    background-color: red; 
} 

.button.submit { 
    background-color: green; 
} 
.button.submit:hover { 
    background-color: #ffff00; 
} 

esta manera se evita la repetición de la palabra y será capaz de utilizar las clases de los elementos de este tipo:

<a href="/" id="btnAsk" class="button">Ask a Question</a> 
<a href="/" id="btnSubmit" class="button submit">Submit</a> 

Véase el ejemplo de la JSFiddle (http://goo.gl/6HwroM)