Summary
Decision around CSS architecture for the shared library. Topic encompasses: CSS preprocessor (Less, Sass), conventions (BEM, utility classes, etc), design tokens, how styles should be exported, etc.
Considerations
Critical to unblock now
CSS preprocessor
- Less: WVUI, other WMF team-specific libraries, and MediaWiki use Less. Historically (in 2013), the decision was driven by better PHP implementation of Less.
- Sass: WiKit uses Sass for reasons documented in this comment.
CSS Postprocessor or native
- Note that CSS variables, a pure CSS option, are not supported in IE11 – see also T286947 for shared components lib and T285045 (for Wikit).
- The other big wants in the room are mixins (CSS @apply feature) and nesting (coming to a browser you trust with CSS Nesting module), which for now and the foreseeable future are not possible without a PostCSS plugin. And a build step.
Under these preconditions, neither a postprocessor nor native CSS seem to be a viable option for our environment right now.
Design tokens
See T288383 and its subtasks.
Important but less urgent
CSS Utility classes
See T285880 for previous discussion and more links.
CSS class naming
T255100 Consider CSS naming convention/methodology as coding guideline for Wikimedia projects
T259203 Clarify CSS naming scheme on combined components in WVUI
Style scoping
See T258774#7269395 for details on how WMDE approached this for WiKit.
Questions
Which CSS preprocessor will we use?
Design Systems Team proposal: Use Less or Sass. We have a preference for Less since it's supported and used in MediaWiki and across WMF extensions, but acknowledge that the two options have very similar feature sets.
What design token architecture will we implement?
How will we follow up on important but less urgent topics?
Design Systems Team proposal: If we have extra time we can discuss options and gather opinions at the summit. Then, we can either use the biweekly Front-End Standards Group meetings to discuss these topics further, or schedule a special meeting with those who are interested.
Decision
Participants at the summit decided to move forward with the creation of a new shared library from scratch (not WVUI or Wikit). A task force with representatives from key teams at WMF and WMDE will spearhead the creation of this new library and will make decisions around CSS architecture as part of that work. It may be possible to rely on PostCSS and new features of the CSS spec itself for desired features, rather than needing to continue depending on a specific pre-processor like LESS or SASS.