Simplifying the CSS of Reveal.js?

[rauschma]

I absolutely love Reveal.js. The only thing giving me trouble was customizing the CSS. These are a few examples (I’ll conclude with suggestions for improvement):

At the moment, some of Reveal’s CSS is very dominant. For example, keywords in code (highlighted via highlight.js) are only bold if you force the issue via !important:

.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
  color: #333 !important;
  font-weight: bold !important;
}

You see a similar issue in pdf.css which has many occurrences of !important: https://github.com/hakimel/reveal.js/blob/master/css/print/pdf.css That’s a problem, because it overrides some other CSS and undoes customizations that work in non-PDF mode.

Summary:

• At the moment, Reveal’s CSS is relatively difficult to customize. (Caveat: I’m saying this as someone whose knowledge of CSS is limited.)
• If one relied on modern CSS features (esp. CSS), could it be restructured and simplified so that !important is needed less (or not at all)?
• Could one of the themes not have text-align: center (which does not work well on slides with more than one bullet list)? I’m overriding it as follows in my custom theme (feedback welcome), but I’m not sure I’m doing it right.

.reveal .slides {
  text-align: left;
}
.reveal .slides h1, .reveal .slides h2 {
  text-align: center;
}

[SebJansen]

Any update on this, @hakimel?

[hakimel]

Yeah – plenty of those overrides are no longer needed and could be removed. Some of the style resets, like text-shadow: 0 0 0 #000 !important, could probably be removed altogether.

I don't mind the use of !important on the .reveal and .slide containers since those are all related to laying out content so that it can be printed, but overriding specific element styles (like the pre code font-family) is limiting.

[rugk]

BTW for such style resets you mention (that are used to make the visibility the same in multiple browsers) there exist various small CSS stylesheets that are explicitly created for this job.

[hakimel]

I wasn't referring to normalizing the browser's default styles, we already use reset.css for that. I meant reset as in undoing the styles that reveal.js has set.

[albedoa]

This is probably low-priority, but there is a lot of low-hanging fruit that can be picked to make everyone's lives easier without damaging the experience for out-of-the-box users. As an example, this seems overly specific:

html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal iframe,
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal blockquote, .reveal pre,
.reveal a, .reveal abbr, .reveal acronym, .reveal address, .reveal big, .reveal cite, .reveal code,
.reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp,
.reveal small, .reveal strike, .reveal strong, .reveal sub, .reveal sup, .reveal tt, .reveal var,
.reveal b, .reveal u, .reveal center,
.reveal dl, .reveal dt, .reveal dd, .reveal ol, .reveal ul, .reveal li,
.reveal fieldset, .reveal form, .reveal label, .reveal legend,
.reveal table, .reveal caption, .reveal tbody, .reveal tfoot, .reveal thead, .reveal tr, .reveal th, .reveal td,
.reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed,
.reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup,
.reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary,
.reveal time, .reveal mark, .reveal audio, .reveal video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

If I want to put padding on a blockquote element, it's not enough to throw a class on it because .reveal blockquote, which appears only in the reset, wins out. This leads to time spent reconciling specificity in the inspector instead of creating our presentation content.

[GaryJones]

There's a related issue to the above comment - non-resetting styles are applied to elements instead of classes. That means, for example, folks are using different headings to change the font-size, which in turns means the document outline doesn't help screen reader users.

Adding classes like presentation-title (for h1) and slide-title (for h2) would help here.

[hakimel]

Two updates:

1. The reset style selectors are no longer prefixed ".reveal", making them easier to override.
2. The reset styles were moved out of reveal.css to reset.css. This makes it easy to opt out of using them altogether, depending on your use case.

[jhpratt]

Cascade layers is the best way to handle this nowadays and has been around for roughly a year.