[PLAN] Drupal CSS Modernization Initiative

Created on 15 December 2021, over 2 years ago
Updated 25 January 2024, 5 months ago

With IE finally being removed from Drupal core ( 🌱 [meta] Remove support for IE11 Active ), we finally get a chance to modernize Drupal’s CSS.

This includes things like

  • CSS Custom Properties (aka CSS variables)
  • Use of CSS Grid
  • Use of CSS Logical Properties
  • :is() and :where() selectors
  • Selector arguments within :not()
  • Proper CSS resets for things like settings tray and contextual links though the all: revert property and value.

Drupal’s CSS Custom Properties will be a new API in core

The biggest and most important thing is CSS Custom Properties (aka CSS variables). We need to decide the following

  • When and where to implement them
  • How to name them
  • How much to abstract them
  • Can we mark certain custom properties as internal? Should we? How?
  • The process of deprecating custom properties. Can we use JavaScript to read them and then trigger deprecation warnings?
  • How does this fit into the bigger picture of backwards compatibility for markup and CSS?

Because of Drupal’s “ Easy Upgrades Forever ”, we need to get this right the first time. Properly implemented, CSS custom properties have the potential to dramatically ease the themer’s workload. However, because themes will become reliant on these custom properties, we have to be very intentional about the implementation, as we may not get a second chance.

Opportunities

We have tons of opportunities for improvements here.

Dangers

  • Potential to overcomplicate the CSS
  • Potential to over-abstract the variables

What we need

  • Core committer buy in
  • Core committer time – there’s a LOT to do here, and not much time before Drupal 10 comes out.
  • Some awesome developers to help out and submit patches / MRs

Want to help?

Great!

  • Comment here, and share your thoughts.
  • Join us in the #CSS channel in Drupal Slack!

Related Issues

🌱 Plan
Status

Active

Version

10.0

Component
CSS 

Last updated 2 days ago

Created by

🇺🇸United States mherchel Gainesville, FL, US

Live updates comments and jobs are added and updated live.
  • CSS

    It involves the content or handling of Cascading Style Sheets.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.69.0 2024