CSS Chat Summary: 15 April 2021

The meeting took place here on Slack. @notlaura facilitated and @danfarrow wrote up these notes.

Housekeeping

  • Our next 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 will be at 8pm UTC on 22 April, covering issues in the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ repo with the CSS Styling tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)
  • If anyone is interested in leading this bug scrub please let us know in #core-css!

Review discussion outcomes

We reviewed the outcomes from last week’s discussions:

CSSCSS Cascading Style Sheets. deprecation path

  • Last week we discussed the two main parts of the problem:
    • Identifying deprecated CSS in a specific place e.g. deprecated.css
    • Providing external tools for 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 developers e.g. visually flagging deprecated selectors, stylelint rules
  • Deprecation should take place at selector level, not based on specific declarations
  • We agreed on using the deprecated selector .icon16 to test run the deprecation path
  • The next step is for @tellthemachines to create a ticketticket Created for both bug reports and feature development on the bug tracker. & bring it up in dev-chat

CSS class naming conventions for JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. targeting

  • Last week we agreed that js- prefix is a sensible way to identify CSS classes intended to be used via JavaScript
  • @danfarrow wondered what the transition process would look like, @notlaura observed that it’s another deprecation problem
  • We wondered if there is a current JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. deprecation path & found a related Make post
  • @lukecarbis agreed that CSS deprecation should also be mindful of JavaScript that may be using deprecated classes for targeting
  • @danfarrow speculated that searching the plugins directory for instances of each deprecated CSS class might help gauge the impact of removing that class, but we’re not really sure what that would involve
  • The next step would be to update ticket 40686 with a recommendation & also bring the topic up in dev-chat. @notlaura summarised the recommendations for the ticket:
  1. Using the .js- namespace for classes with JS hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same.
  2. These classes should not have styling attached to them, instead any JS applied styling should use stateful .is-* classes e.g. .is-hidden
  3. We need to determine a workflow for updating selectors in the JS and identify third party plugins that might rely on them for JS purposes

Open floor / CSS link share

With that we were out of time. Thanks everyone!

#core-css, #summary