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

@Jdrewniak @Volker_E did we ever get clarity here?

I think we need to have a clearance what we really want to adopt and if we need general Foundation approval. I'd reach for it.
Elements and modifiers are helpful to quickly understand CSS without knowing HTML structure too well.

Nonetheless, I think we need to clarify if the open questions raised on T255100 apply to us!
There has been no participation by Web team on that bigger task.

Re: Goals

• Decide whether we plan to ever adopt BEM and if so what our strategy for getting there is
  • While it is generally agreed that BEM is useful/beneficial for components and is already being used in WVUI (i.e. inputs), the consensus at this time is to continue with the BEM-ish convention that is currently in use in Vector over strict adherence to the BEM approach because of the following issues:
    • Difficult to enforce BEM via linting rules.
    • Solve for the grandchild element problem - flattening grandchildren seems promising but unreasonably long class names will likely become problematic.
    • Development velocity could be held up in code reviews over class naming debates.
  • Some helpful links to track the history of BEM discussions at WMF:
    • T255100 Consider CSS naming convention/methodology as coding guideline for Wikimedia projects
    • T259203 Clarify CSS naming scheme on combined components
    • Example patches outside of Vector:
      • WVUI - 639637 Limit LESS rules nesting level
      • WikibaseMediaInfo - 556050 Use BEM-style classes for input widgets
• Agree on how to name classes in Vector currently and document in the codebase

block-element-modifier

.block {}
.block-element {}
.block-modifier {}

• Review existing names
  • T255100#7190502 provides a good overview of how the existing BEM-ish convention is used.
• Ensure the storybook reflects the agreed names of components that are used by designers and engineers.
  • Vector's storybook continues to be updated and includes recently-developed components that utilize this quasi-BEM structure.

Re: Outcome

The CSS/Less section of Reading/Web/Coding conventions has been updated with the latest status of BEM articulated here.

Will discuss with the wider team on Monday before resolving, but the notes seem to cover the goals. Thanks Clare!

Change 714432 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] Update vector menu hide dropdown class to use BEMish convention.

https://gerrit.wikimedia.org/r/714432

Change 714432 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Update vector menu hide dropdown class to use BEMish convention.

https://gerrit.wikimedia.org/r/714432