Theme Differences Between Drupal 6, 7, and 8

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

More Information

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

CSS Class Changes Between D7 and D8

Menus

D7:

• Upgrading themes from 7.x to 8.x
• Change notices for themers
• Sqndr Drupal 8 Theming Guide
• The 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 and has been removed. It can be added back. See the example at https://www.drupal.org/node/2425691#comment-9629101
@todo: Replace with a reference in this documentation.