Page MenuHomePhabricator

[SPIKE] What's going on with BEM in Vector?
Open, Needs TriagePublic

Description

BEM has been proposed multiple times in the codebase. For now we appear to be using a modified version of BEM using '-' and it's not clear why and what the benefits are.

Goals

  • Decide whether we plan to ever adopt BEM and if so what our strategy for getting there is
  • Agree on how to name classes in Vector currently and document in the codebase
  • Review existing names
  • Ensure the storybook reflects the agreed names of components that are used by designers and engineers.

If applicable

Are we following a BEM(-like) terminology in components? Example: Current 'EmphasizedSidebarAction.less' might be better expressed as 'ActionSidebarEmphasized' or 'LinkSidebarEmphasized'?

We are also using different names when describing things. Why?

https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/598811 may render this conversation unnecessary.

Event Timeline

I think the BEM name would be Sidebar__Action--Emphasized or Sidebar__Link--Emphasized with punctuation removed for file names: 'SidebarActionEmphasized', 'SidebarLinkEmphasized'.

As we are moving towards adoption of Vue.js, I find the Vue.js component naming guidelines are helpful to Mustache components as well, which go from parent->child, general->specialized:
https://vuejs.org/v2/style-guide/#Tightly-coupled-component-names-strongly-recommended