Theming differences between Drupal 6, 7, 8, 9 & 10

This is a list of some of the most noteworthy changes in Drupal 8 that affect theming.

More information

1. Drupal 8 outputs semantic HTML5 markup by default (see Drupal 8 HTML5 Initiative), compared to XHTML in Drupal 6 and 7.
2. Besides jQuery v2.x Drupal 8 now includes more front-end libraries such as Modernizr, Underscore.js and Backbone.js.
3. Drupal 8's core RDFa module outputs schema.org markup.
4. Drupal 8 has improved accessibility making extensive use of WAI-ARIA attributes.
5. Drupal 8 introduces Twig, which replaces PHPTemplate as the default theme engine. This means the theme_* functions and PHP-based *.tpl.php files have been replaced by *.html.twig templates ().
6. Drupal 8 enables by default features that improve performance such as CSS and JavaScript aggregation.
7. Drupal 8 ships with new UI elements that you use in your own admin screens, including modal dialogs and drop buttons.
8. Drupal 8 ships with responsive features such as responsive themes, toolbar, images, and tables.
9. In Drupal 6 and 7 if you wanted to add CSS or JS to a particular page, you'd use the drupal_add_css() and drupal_add_js() functions, respectively. This is now replaced by attaching JS/CSS assets in the #attached property of a render array using libraries.
10. Drupal 8 drops support for IE 6, 7 and 8, enabling the use of jQuery 2.0 and other code that assumes modern HTML5/CSS3 browser support.
11. Drupal 8 does not support browsers that do not support SVG (including IE8 and Android Browser 2.3)
12. Drupal 8 contains fewer IDs than Drupal 7's CSS.
13. Drupal 8's CSS (file) structure is based on SMACSS & BEM.
14. Drupal 8's CSS uses CSS3 pseudo selectors.
15. Drupal 8 ships with Classy, a core base theme that injects classes into markup, and includes corresponding CSS. In progress: This will replace many preprocess functions and CSS files which were previously included in core modules.
16. Drupal 8 moves CSS classes from preprocess functions to Twig templates.
17. Drupal 8 uses breakpoint media queries to control how the site looks on different devices.

CSS Class Changes between D7 and D8

Menu

D7:

• Upgrading 7.x themes to 8.x
• Change notice for themers
• Sqndr's Drupal 8 theming guide
• Ultimate Guide to Drupal 8: Episode 5 - Front-End Developer Improvements

.menu li.expanded
.menu li.collapsed
.menu li.leaf
.menu li.active-trail
.menu li.first
.menu li.last

D8:

.menu-item--expanded
.menu-item--collapsed
.menu-item--active-trail
.menu-item:first-child
.menu-item:last-child

.menu-item--leaf was rarely used so it was removed. It can be added back. @see example https://www.drupal.org/node/2425691#comment-9629101
@todo replace with the link in this documentation.

The Classy Theme is removed as of Drupal 10. The functionality provided by Classy is now available via the Starterkit theme

The Classy theme was used as a base theme that provided templates with additional classes that made it easier to target specific elements with CSS. Themes that declare no base theme require building everything "from scatch". Themes using Classy as a base theme are provided with a reasonably neutral starting point so the actual styling of a theme can begin sooner.

The benefits of Classy are still available in Drupal 10, but they are now provided by the Starterkit theme. Unlike Classy, themes do not declare Starterkit as a base theme. Instead, a theme is generated with Starterkit that includes the templates that were previously provided by Classy.