Grouping CSS Declarations

You might have CSS that looks like this:

h1 {
    color: white;
    font-family: "Arial", sans-serif;
    font-weight: normal;
    font-size: 1.5rem;
}

.lead {
    color: white;
    font-family: "Arial", sans-serif;
    font-weight: normal;
    font-size: 1rem;
}

When you're using a pre-processor, you probably use variables to define the colors (and other things):

$text-color: white;
$font-stack: "Arial", sans-serif;

h1 {
    color: $text-color;
    font-family: $font-stack;
    font-weight: bold;
    font-size: 1.5rem;
}

.lead {
    color: $text-color;
    font-family: $font-stack;
    font-weight: normal;
    font-size: 1rem;
}

Even if there are variables available in CSS pre-processors and CSS properties available, I still like the structure to define common declarations in this way:

h1, h2, p, .lead {
    color: $text-color;
}

h1, .lead {
    font-family: $font-stack;
}

h1 {
    font-weight: bold;
    font-size: 1.5rem;
}

.lead {
    font-weight: normal;
    font-size: 1rem;
}