CSS Chat Summary: 04 March 2021

Housekeeping

A leader is needed for next week’s (Thursday 11 March @ 21:00 UTC) coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. scrub – if you fancy doing it please let us know in SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.

In order to start the discussion on naming conventions for custom properties in wp-adminadmin (and super admin) we are asking for people to mock-up examples of how they would name the custom properties for a button
@ryelle shared her demo
- Button appearance is defined in terms of 7 body-level colour variables --color-1, --color-2 etc
- Colour variations are achieved by overriding the values of the 7 colours
@notlaura shared her demo
- Button appearance is defined by a set of custom properties using a --prefix--element--property[--modifier] naming pattern e.g. --wp-admin-color--button--bg
- Variations are achieved by overriding the button properties for specific classes e.g. .button--alert
Discussing the merits of the differing approaches @williampatton pointed out that the --element--property--modifier pattern can lead to overly verbose CSSCSS Cascading Style Sheets.. @ryelle agreed but felt that the --color-1 etc. approach is also not the right answer either
@notlaura suggested that, as buttons are particularly complicated compared to other elements, it might help to also mock-up another element in order to compare solutions

@notlaura asked about exploring naming conventions for other properties, as part of a long-term trajectory for the CSS audit. @ryelle suggested typography, linking to this Make post about establishing a consistent type scale

Requiring custom-property fallbacks would complicate the approaches being discussed, but this problem might disappear if support for IE11 is dropped, as discussed on this Make post

@notlaura concluded the discussion with the observation that we need a naming convention which is close to an element selector, but which doesn’t result in a huge number of variables, many having the same value
@ryelle‘s use of more general custom properties e.g. --wp-admin--page--background, --wp-admin--text--color could be a better approach – she will explore this further
The discussion on this topic will continue!

@ryelle shared this Trac ticket which could introduce custom property support & tooling
@peterwilsoncc asked about the possibility of setting up an npm package with admin colour sass variables, so that pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party authors could use to stay in sync. @ryelle responded that the core colours will become custom properties so the sass files will eventually be deprecated.

With that our time was up & the meeting finished. Thanks everyone!