Combinación de clases

Cuando varios elementos tienen un aspecto o una función similares y se repiten en la página, resulta muy útil combinar clases.

La técnica consiste en lo siguiente:

1. crear un estilo base para esos elementos;
2. definir estilos adicionales que se aplicarán cuando hagan falta;
3. asignar al elemento la clase base y una o varias clases adicionales.

Así se combinan estilos en el mismo elemento. Esto no es herencia desde un elemento padre.

Ejemplo:

Una página puede tener botones con distintas funciones: enviar formularios, borrar la información de los campos, navegar, etc.

Podemos reunir el aspecto común de todos los botones, como sus dimensiones y espacios, en una regla CSS para una clase, por ejemplo, .button.

Después creamos reglas adicionales con las propiedades que cambian entre botones, como el color de fondo. Podemos usar clases como .button-send, .button-clear y .button-navigation.

Cada botón tendrá dos clases en el código HTML: la común y la adicional.

<a class="button button-send">Enviar</a>