From deeb74e321f8ba676dce8f13809c2aace0e0c537 Mon Sep 17 00:00:00 2001
From: Chris Rebert <code@chrisrebert.com>
Date: Fri, 23 Oct 2015 17:03:32 -0700
Subject: [PATCH] Make heading class styles trump heading element styles; fixes
 #16947

[skip sauce]
[skip validator]
---
 scss/_type.scss | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/scss/_type.scss b/scss/_type.scss
index 6fc9b86ced..4a007020d6 100644
--- a/scss/_type.scss
+++ b/scss/_type.scss
@@ -21,12 +21,22 @@ h6, .h6 {
   margin-bottom: $headings-margin-bottom;
 }
 
-h1, .h1 { font-size: $font-size-h1; }
-h2, .h2 { font-size: $font-size-h2; }
-h3, .h3 { font-size: $font-size-h3; }
-h4, .h4 { font-size: $font-size-h4; }
-h5, .h5 { font-size: $font-size-h5; }
-h6, .h6 { font-size: $font-size-h6; }
+h1 { font-size: $font-size-h1; }
+h2 { font-size: $font-size-h2; }
+h3 { font-size: $font-size-h3; }
+h4 { font-size: $font-size-h4; }
+h5 { font-size: $font-size-h5; }
+h6 { font-size: $font-size-h6; }
+
+// These declarations are kept separate from and placed after
+// the previous tag-based declarations so that the classes beat the tags in
+// the CSS cascade, and thus <h1 class="h2"> will be styled like an h2.
+.h1 { font-size: $font-size-h1; }
+.h2 { font-size: $font-size-h2; }
+.h3 { font-size: $font-size-h3; }
+.h4 { font-size: $font-size-h4; }
+.h5 { font-size: $font-size-h5; }
+.h6 { font-size: $font-size-h6; }
 
 .lead {
   font-size: $lead-font-size;