[DNSB]

Originally Posted by JSWolf

InDesign >These "house" CSS can be ridiculous with the amount of unused CSS. But there doesn't need to be any unused classes in the HTML.

Try this one (the only good thing I can say is that it is commented):

Spoiler:

@charset "UTF-8";
/*  blitz — CSS framework for reflowable eBooks
    Version 1.0.1 by Jiminy Panoz
    Codename: Rock the Casbah
    License: MIT (https://opensource.org/licenses/MIT)   */
/* NAMESPACES */
@namespace h "http://www.w3.org/1999/xhtml/";
@namespace epub "http://www.idpf.org/2007/ops";
/* if you need to style epub:type */
@namespace m "http://www.w3.org/1998/Math/MathML/";
/* if you need to style MathML */
@namespace svg "http://www.w3.org/2000/svg";
/* if you need to style SVG */
html {
  /* Don't use it for styling, used as selector which can take a punch if anything goes wrong above */
}
/* Begin CSS */
/* RESET */
/* So here's the trick, we must reset to manage a number of problems once and for all: 
- HTML5 backwards compatibility (EPUB 3 file in EPUB 2 app); 
- user settings (e.g. line-height on Kobo and Kindle); 
- CSS bloat (DRY); 
- KFX for which a reset using `border: 0` seems to disable support; 
- etc.
It all started as a normalize and became a reset given the magnitude of the task.                                                          
*/
article,
address,
aside,
blockquote,
canvas,
dd,
details,
div,
dl,
dt,
figure,
figcaption,
footer,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hr,
li,
main,
nav,
ol,
p,
pre,
section,
summary,
ul {
  margin: 0;
  padding: 0;
  /* RS may apply vertical padding to el such as p */
  font-size: 1em;
  /* Font size in pixel disable the user setting in legacy RMSDK */
  line-height: inherit;
  /* Kindle ignores it, Kobo needs it. If you don’t use inherit, the user setting may be disabled on some Kobo devices */
  text-indent: 0;
  font-style: normal;
  font-weight: normal;
}
/* This is absolutely necessary for backwards compatibility */
article,
aside,
figure,
figcaption,
footer,
header,
main,
nav,
section {
  display: block;
}
/* [Opinionated] Default to prevent RS from justifying all of these! */
h1,
h2,
h3,
h4,
h5,
h6,
dt,
pre {
  text-align: left;
}
/* Following EPUB 3 spec by the letter (applies to RS but let’s make sure it is respected because we never know) */
nav[epub|type~="toc"] ol {
  list-style: none !important;
}
/* [Opinionated] Default to prevent bloat in case linear="no" is rendered as linear="yes" */
nav[epub|type~="landmarks"],
nav[epub|type~="page-list"] {
  display: none;
}
a,
abbr,
b,
bdi,
bdo,
cite,
code,
data,
del,
dfn,
em,
i,
ins,
kbd,
mark,
q,
rp,
rt,
rtc,
ruby,
s,
samp,
small,
span,
strong,
sub,
sup,
time,
var {
  font-size: inherit;
  vertical-align: baseline;
  font-style: inherit;
  /* Taking nesting of inline elements into account (e.g. sup nested in em) */
  font-weight: inherit;
  /* Taking nestiog of inline elements into account (e.g. em nested in strong) */
  color: inherit;
  text-decoration: none;
}
q {
  quotes: none;
}
/* Trying to prevent blank page if element with margin-bottom at the end of xhtml */
body > :last-child,
body > section > :last-child {
  margin-bottom: 0;
}
/* PAGE LAYOUT */
@page {
  margin: 30px 30px 20px 30px;
  /* Recommended by Barnes & Noble in this old spec: https://simg1.imagesbn.com/pimages/pubit/support/pubit_epub_formatting_guide.pdf */
  padding: 0;
}
body {
  /* Designed as a class for body — We don't enforce as user setting > author */
  text-align: justify;
  adobe-hyphenate: auto;
  /* proprietary for Legacy RMSDK */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  -epub-hyphens: auto;
  hyphens: auto;
  /* before and after not in spec but iBooks support all three (-webkit-) */
  -ms-hyphenate-limit-lines: 3;
  -moz-hyphenate-limit-lines: 3;
  -webkit-hyphenate-limit-lines: 3;
  -webkit-hyphenate-limit-before: 2;
  -webkit-hyphenate-limit-after: 2;
  hyphenate-limit-lines: 3;
  /* No support except Trident (Windows) */
  -ms-hyphenate-limit-chars: 6 3 2;
  -moz-hyphenate-limit-chars: 6 3 2;
  -webkit-hyphenate-limit-chars: 6 3 2;
  hyphenate-limit-chars: 6 3 2;
  /* No support except Trident (Windows) */
  -ms-hyphenate-limit-zone: 10%;
  -moz-hyphenate-limit-zone: 10%;
  -webkit-hyphenate-limit-zone: 10%;
  hyphenate-limit-zone: 10%;
  /* No support */
  -ms-hyphenate-limit-last: always;
  -moz-hyphenate-limit-last: always;
  -webkit-hyphenate-limit-last: always;
  hyphenate-limit-last: always;
  font-size: 100%;
  line-height: 1.5;
  margin: 0;
  /* RS will override margins anyways */
  padding: 0;
  widows: 2;
  /* iBooks and Kobo support widows and orphans */
  orphans: 2;
}
/* TYPOGRAPHY */
h1,
h2,
h3,
h4,
h5,
h6,
blockquote p cite,
dt,
pre,
address,
table,
caption,
th,
td,
.align-left,
.align-center,
.align-right,
.caption,
.no-hyphens {
  adobe-hyphenate: none;
  /* proprietary for Legacy RMSDK */
  -ms-hyphens: none;
  -moz-hyphens: none;
  -webkit-hyphens: none;
  -epub-hyphens: none;
  hyphens: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
dt,
hr {
  page-break-inside: avoid;
  break-inside: avoid;
  page-break-after: avoid;
  break-after: avoid;
}
h1 {
  font-size: 1.4375em;
  line-height: 1.04347826;
  margin-top: 0em;
  margin-bottom: 2.08695652em;
}
h2 {
  font-size: 1.3125em;
  line-height: 1.14285714;
  margin-top: 2.28571429em;
  margin-bottom: 1.14285714em;
}
h3 {
  font-size: 1.125em;
  line-height: 1.33333333;
  margin-top: 1.33333333em;
  margin-bottom: 1.33333333em;
}
h4 {
  font-size: 1em;
  line-height: 1.5;
  margin-top: 1.5em;
  margin-bottom: 0em;
}
h5 {
  /* Styles */
}
h6 {
  /* Styles */
}
p {
  text-indent: 1.5em;
}
.footnote {
  font-size: 0.9375em;
  line-height: 1.6;
  margin-top: 0.75em;
  text-indent: 0;
}
blockquote {
  margin: 1.5em 5%;
}
blockquote p {
  text-indent: 0;
  font-style: italic;
}
blockquote p.par-indent{
  text-indent: 0;
  font-style: italic;
}
blockquote p i,
blockquote p em,
blockquote p cite {
  font-style: normal;
}
address {
  /* Styles */
}
/* MICRO TYPOGRAPHY */
a {
  text-decoration: underline;
  /* Note: KF8 will force this value unless you use "el.class a" */
  font-weight: bold;
  color: inherit;
  -webkit-text-fill-color: inherit;
  /* iBooks override (iOS 9 + El Capitan in night mode) */
  /* inherit = text color */
}
abbr {
  /* Note: Kindle doesn't support that */
}
i,
cite,
dfn,
em {
  font-style: italic;
}
/* Get back to normal when italic nested in italic */
i i,
i cite,
i dfn,
i em,
cite i,
cite cite,
cite dfn,
cite em,
dfn i,
dfn cite,
dfn dfn,
dfn em,
em i,
em cite,
em dfn,
em em {
  font-style: normal;
}
b,
strong {
  font-weight: bold;
}
del,
s {
  text-decoration: line-through;
}
mark {
  background-color: yellow;
  color: inherit;
}
ins {
  /* Styles */
}
small {
  font-size: 0.8125em;
}
/* Styling is improved to prevent sub from affecting line-height */
sub {
  font-size: 75%;
  line-height: 1.2;
  vertical-align: sub;
  /* Fallback */
  vertical-align: -20%;
}
/* Styling is improved to prevent sup from affecting line-height */
sup {
  font-size: 75%;
  line-height: 1.2;
  vertical-align: super;
  /* Fallback */
  vertical-align: 33%;
}
/* FIGURES + IMAGES  */
figure {
  page-break-inside: avoid;
  break-inside: avoid;
  margin: 1.5em 0;
}
figcaption,
.caption {
  font-size: 0.9375em;
  line-height: 1.6;
  margin-top: 0.75em;
  text-indent: 0;
}
img {
  width: auto;
  max-width: 100%;
  /* Note: KF8 doesn't support max-width hence "width: auto;" as fallback */
  height: auto;
  object-fit: contain;
}
/* Note: portrait image styling + figcaption is a nightmare */
/* See https://github.com/jstallent/ImagesSingleFile for the css hack */
img.portrait {
  width: auto;
  max-width: 100%;
  /* Note: KF8 doesn't support max-width hence "width: auto;" as fallback */
  height: 100%;
  /* We try to prevent blank page after */
  max-height: 95%;
  /* Max value iBooks enforces */
}
.float-left img,
.float-right img {
  width: 100%;
  /* If it’s auto, image in floating container will overflow on Kobo iOS + Kindle */
}
@supports (height: 99vh) {
  img.portrait {
    height: 99vh;
  }
}
/* LISTS */
ul,
ol {
  margin: 1.5em 0;
  padding-left: 5%;
}
ul {
  list-style-type: disc;
  list-style-position: outside;
}
ul ul {
  list-style-type: square;
}
ol {
  list-style-type: decimal;
  list-style-position: outside;
}
ol ol {
  list-style-type: lower-roman;
}
/* HORIZONTAL RULES — CONTEXT BREAKS */
hr {
  width: 25%;
  margin-left: 37.5%;
  margin-top: 1.4375em;
  margin-bottom: 1.4375em;
  height: 0;
  border: none;
  border-top: 0.125em solid currentColor;
  /* currentColor = color of text (getting around night mode) */
  opacity: 0.5;
  /* Opacity -> grayscale. If opacity is declared for too many elements in a XHTML file, performance of legacy RMSDK takes a hit */
}
/* Blank-line context change */
hr.transition {
  width: 100%;
  margin: 0;
  height: 1.5em;
  border: none;
  background: none;
  /* Note: overridden in night mode excepted when using linear-gradient */
}
/* Over-engineered asterism with an SVG background 
which is legacy RMSDK-compliant, reflows with text and 
is night-mode compatible (black asterisk + white border) */
hr.asterism {
  width: auto;
  border: none;
  margin: 1.5em 0;
  height: 1.5em;
  text-indent: 0;
  text-align: center;
  background: transparent url("../img/asterism.svg") no-repeat center;
  /* Change url if you put asterism in a folder */
  background-size: 2.5em 1.25em;
  /* RMSDK doesn't support -> won't scale but SVG viewport is OK for a wide range of font-sizes */
  overflow: hidden;
  /* Fixes legacy RMSDK bug when contents before hr are invisible */
  opacity: 0.7;
  /* Better border color match in night mode (less disruptive) */
}
/* IPUB ADDITIONS */
.par-indent {
  text-indent: 1.5em;
}
.no-indent {
  text-indent: 0;
  margin-top: 0.75em;
}
.introline {
  /* Don't use that with span if i, cite, dfn or em can be used */
  font-style: italic;
  margin-bottom: 1.5em;
}
.author {
  font-size: 1.4375em;
  line-height: 1.04347826;
  margin-top: 1.04347826em;
  margin-bottom: 3.13043478em;
  line-height: 200%;
  adobe-hyphenate: none;
  /* proprietary for Legacy RMSDK */
  -ms-hyphens: none;
  -moz-hyphens: none;
  -webkit-hyphens: none;
  -epub-hyphens: none;
  hyphens: none;
  text-indent: 0;
  /* Necessary as RS may define text-indent for p */
  text-align: center;
}
.series {
  font-size: 1.4375em;
  line-height: 1.04347826;
  margin-top: 1.04347826em;
  margin-bottom: 2.08695652em;
  adobe-hyphenate: none;
  /* proprietary for Legacy RMSDK */
  -ms-hyphens: none;
  -moz-hyphens: none;
  -webkit-hyphens: none;
  -epub-hyphens: none;
  hyphens: none;
  text-indent: 0;
  /* Necessary as RS may define text-indent for p */
  text-align: center;
}
.title {
  font-size: 1.625em;
  line-height: 0.92307692;
  /* Don't use that with span if b or strong can be used */
  font-weight: bold;
  adobe-hyphenate: none;
  /* proprietary for Legacy RMSDK */
  -ms-hyphens: none;
  -moz-hyphens: none;
  -webkit-hyphens: none;
  -epub-hyphens: none;
  hyphens: none;
  text-indent: 0;
  /* Necessary as RS may define text-indent for p */
  text-align: center;
}
@supports (padding-top: 20vh) {
  .title {
    padding-top: 20vh;
  }
}
.subtitle {
  font-size: 1.4375em;
  line-height: 1.04347826;
  margin-top: 1.04347826em;
  margin-bottom: 2.08695652em;
  adobe-hyphenate: none;
  /* proprietary for Legacy RMSDK */
  -ms-hyphens: none;
  -moz-hyphens: none;
  -webkit-hyphens: none;
  -epub-hyphens: none;
  hyphens: none;
  text-indent: 0;
  /* Necessary as RS may define text-indent for p */
  text-align: center;
}
.chapter-heading {
  margin-top: 3em;
  margin-bottom: 1.5em;
  margin-top: 0.75em;
  text-indent: 0;
}
.series-heading {
  margin-top: 1.5em;
  margin-bottom: 0.75em;
  adobe-hyphenate: none;
  /* proprietary for Legacy RMSDK */
  -ms-hyphens: none;
  -moz-hyphens: none;
  -webkit-hyphens: none;
  -epub-hyphens: none;
  hyphens: none;
  text-indent: 0;
  /* Necessary as RS may define text-indent for p */
  text-align: center;
  page-break-after: avoid;
  break-after: avoid;
}
.series-slogan {
  margin-top: 0;
  margin-bottom: 0.75em;
  adobe-hyphenate: none;
  /* proprietary for Legacy RMSDK */
  -ms-hyphens: none;
  -moz-hyphens: none;
  -webkit-hyphens: none;
  -epub-hyphens: none;
  hyphens: none;
  text-indent: 0;
  /* Necessary as RS may define text-indent for p */
  text-align: center;
  /* Don't use that with span if i, cite, dfn or em can be used */
  font-style: italic;
  page-break-after: avoid;
  break-after: avoid;
}
.title-listing {
  adobe-hyphenate: none;
  /* proprietary for Legacy RMSDK */
  -ms-hyphens: none;
  -moz-hyphens: none;
  -webkit-hyphens: none;
  -epub-hyphens: none;
  hyphens: none;
  text-indent: 0;
  /* Necessary as RS may define text-indent for p */
  text-align: center;
  margin-top: 0;
}
.quote-src {
  adobe-hyphenate: none;
  /* proprietary for Legacy RMSDK */
  -ms-hyphens: none;
  -moz-hyphens: none;
  -webkit-hyphens: none;
  -epub-hyphens: none;
  hyphens: none;
  text-indent: 0;
  /* Necessary as RS may define text-indent for p */
  text-align: right;
  margin-top: 0;
}
.left {
  adobe-hyphenate: none;
  /* proprietary for Legacy RMSDK */
  -ms-hyphens: none;
  -moz-hyphens: none;
  -webkit-hyphens: none;
  -epub-hyphens: none;
  hyphens: none;
  text-align: left;
}
.center {
  adobe-hyphenate: none;
  /* proprietary for Legacy RMSDK */
  -ms-hyphens: none;
  -moz-hyphens: none;
  -webkit-hyphens: none;
  -epub-hyphens: none;
  hyphens: none;
  text-indent: 0;
  /* Necessary as RS may define text-indent for p */
  text-align: center;
}
.center-par {
  adobe-hyphenate: none;
  /* proprietary for Legacy RMSDK */
  -ms-hyphens: none;
  -moz-hyphens: none;
  -webkit-hyphens: none;
  -epub-hyphens: none;
  hyphens: none;
  text-indent: 0;
  /* Necessary as RS may define text-indent for p */
  text-align: center;
  margin: 0;
}
.center-par-b-space {
  adobe-hyphenate: none;
  /* proprietary for Legacy RMSDK */
  -ms-hyphens: none;
  -moz-hyphens: none;
  -webkit-hyphens: none;
  -epub-hyphens: none;
  hyphens: none;
  text-indent: 0;
  /* Necessary as RS may define text-indent for p */
  text-align: center;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0.75em;
}
.center-par-t-space {
  adobe-hyphenate: none;
  /* proprietary for Legacy RMSDK */
  -ms-hyphens: none;
  -moz-hyphens: none;
  -webkit-hyphens: none;
  -epub-hyphens: none;
  hyphens: none;
  text-indent: 0;
  /* Necessary as RS may define text-indent for p */
  text-align: center;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0.75em;
}
.center-par-tb-space {
  adobe-hyphenate: none;
  /* proprietary for Legacy RMSDK */
  -ms-hyphens: none;
  -moz-hyphens: none;
  -webkit-hyphens: none;
  -epub-hyphens: none;
  hyphens: none;
  text-indent: 0;
  /* Necessary as RS may define text-indent for p */
  text-align: center;
  margin-top: 0.75em;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0.75em;
}
.center-par-tb-extra-space {
  adobe-hyphenate: none;
  /* proprietary for Legacy RMSDK */
  -ms-hyphens: none;
  -moz-hyphens: none;
  -webkit-hyphens: none;
  -epub-hyphens: none;
  hyphens: none;
  text-indent: 0;
  /* Necessary as RS may define text-indent for p */
  text-align: center;
  margin-top: 1.5em;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 1.5em;
}
.italic-par {
  /* Don't use that with span if i, cite, dfn or em can be used */
  font-style: italic;
}
.fleuron {
  width: 12%;
  margin-left: 44%;
  margin-bottom: 1.5em;
}
.fleuron img {
  width: 100%;
}
h1 + p.par-indent,
h2 + p.par-indent,
h3 + p.par-indent,
p.center-par-tb-space + p.par-indent,
p.introline + p.par-indent,
div.fleuron + p.par-indent,
hr + p.par-indent,
p.center-par-tb-extra-space + p.par-indent {
  margin-top: 0.75em;
  text-indent: 0;
}
h1 + p.par-indent:first-line,
h2 + p.par-indent:first-line,
h3 + p.par-indent:first-line,
p.center-par-tb-space + p.par-indent:first-line,
p.introline + p.par-indent:first-line,
div.fleuron + p.par-indent:first-line,
p.center-par-tb-extra-space + p.par-indent:first-line {
  /* text-transform: lowercase; */
  /* Don't rely on this property, text should be typed in uppercase (legacy RMSDK) */
  font-variant: small-caps;
  letter-spacing: 0.0625em;
  /* The two previous props are not supported in legacy RMSDK */
}
.texttop {
  margin-top: 0.75em;
  text-indent: 0;
  margin-top: 1.5em;
}
.toc-item-1 {
  margin: 0;
  margin-top: 0.75em;
  text-indent: 0;
  adobe-hyphenate: none;
  /* proprietary for Legacy RMSDK */
  -ms-hyphens: none;
  -moz-hyphens: none;
  -webkit-hyphens: none;
  -epub-hyphens: none;
  hyphens: none;
  text-align: left;
}
.toc-item-2 {
  margin-left: 5%;
  margin-top: 0.75em;
  text-indent: 0;
  adobe-hyphenate: none;
  /* proprietary for Legacy RMSDK */
  -ms-hyphens: none;
  -moz-hyphens: none;
  -webkit-hyphens: none;
  -epub-hyphens: none;
  hyphens: none;
  text-align: left;
}
.toc-item-3 {
  margin-left: 7.5%;
  margin-top: 0.75em;
  text-indent: 0;
  adobe-hyphenate: none;
  /* proprietary for Legacy RMSDK */
  -ms-hyphens: none;
  -moz-hyphens: none;
  -webkit-hyphens: none;
  -epub-hyphens: none;
  hyphens: none;
  text-align: left;
}
@supports (height: 100vh) {
  /* Can be used for containers and images 
     but Should be used in combination with .portrait if used for img */
}
/* Kindle */
/* Note: if there is nothing in those two Kindle queries, 
ADE (and possibly a ton of apps using legacy RMSDK) will crash. 
So you'd better get rid of those two queries once your EPUB file is converted to kindle mobi. */
/* Warning: Do NOT use `text-rendering: optimizeLegibility` in Kindle's styles,
it is known to create issues with some devices/apps 
(entire text is replaced with boxes (a.k.a. "missing glyph" symbol) */
@media amzn-kf8 {
  body {
    font-weight: normal;
    /* numeric font weights are problematic for KindleGen, we make sure to "reset" that in case the framework's user use numeric values. */
  }
  b,
  strong,
  .bold {
    font-weight: bold;
  }
  h1,
  h2 {
    line-height: 1.2;
    /* Minimum value Kindle supports */
  }
  .w-80 {
    width: 78%;
    /* Because Kindle developers… */
    margin: 1.5em 11%;
  }
}
@media amzn-mobi {
  body {
    font-weight: normal;
  }
  h1 {
    font-size: xx-large;
    /* Keywords offer more precision for mobi 7*/
    margin: 0 0 3em 0;
    /* mobi7 doesn’t support decimal values */
  }
  h2 {
    font-size: x-large;
    margin: 2em 0 1em 0;
  }
  h3 {
    font-size: large;
    margin: 1em 0;
  }
  h4 {
    font-size: medium;
    margin: 1em 0 0 0;
  }
  b {
    font-weight: bold;
  }
  strong {
    font-weight: bold;
  }
  .bold {
    font-weight: bold;
  }
  small {
    font-size: small;
  }
  .small-caps {
    font-size: small;
  }
  sub {
    font-size: x-small;
  }
  sup {
    font-size: x-small;
  }
  hr {
    margin: 1em 0;
  }
  .margin-top-s {
    margin-top: 1em;
  }
  .margin-top-m {
    margin-top: 2em;
  }
  .margin-top-l {
    margin-top: 3em;
  }
  .margin-top-xl {
    margin-top: 5em;
  }
  .margin-top-xxl {
    margin-top: 6em;
  }
  .hanging-indent {
    margin-left: 0;
    /* hack for negative text-indent */
  }
  .footnote {
    font-size: medium;
  }
  ul {
    margin: 1em 0;
  }
  ol {
    margin: 1em 0;
  }
  blockquote {
    margin: 1em 5%;
  }
  dl {
    margin: 1em 5%;
  }
  dt {
    margin-top: 1em;
  }
  pre {
    margin: 1em 0;
  }
  table {
    margin: 1em 0;
  }
  .float-left {
    float: none;
    /* Mobi 7 doesn’t support float */
    margin: 1em 0;
    text-align: center;
  }
  .float-right {
    float: none;
    margin: 1em 0;
    text-align: center;
  }
}
/* End CSS */