Our [[ https://www.mediawiki.org/wiki/Manual:Coding_conventions/CSS#Naming | CSS naming conventions ]] are currently relatively flexible, some might call it vague.
With two front-end lighthouse projects in the making, that both aim to adopt a (more) modular, componentized code approach:
- #Vue.js Search Case Study with outcome of possible Vue.js components library as new standard
- Vector overhaul as part of #Desktop-Improvements project. At Vector specifically this question has been asked already T253671
we should consider adopting a CSS naming convention/methodology like [[ http://getbem.com/ | BEM ]], SUITCSS, SMACSS or a derived mixture as coding guidelines in order to address growing complexity of our codebase and simplify navigation and organization of CSS rules.
==== BEM (Block Element Modifier)
Advantages:
- Works well for components
-- Modular through independent blocks
-- Flexible as in being able to be configured fine-tailored to our needs
- Has been widely popular in a number of
- Why BEM provides a great overview of [[ http://getbem.com/faq/#why-bem | decisions behind structure ]] and addresses common concerns
Disadvantages:
- Grandchildren syntax problem https://assortment.io/posts/grandchild-elements-bem-css
- Additional cognitive load when defining blocks, elements and modifiers.
-- (Opinion statement:) Code review and improved familiarity with the concept should help, also the cognitive load is on the implementor side, the code consumer, maintainer should have reduced load
=== Prior work
* ContentTranslation as far back as 2014 6be8e4937236 – would be useful to hear @santhosh's critical take, although it's still in use [[ https://en.wikipedia.org/wiki/Special:ContentTranslation#suggestions | in 2020 ]]
* Wikimedia Design Style Guide with [[ https://github.com/wikimedia/WikimediaUI-Style-Guide/blob/master/css/wmui-style-guide.dev.css#L320 | BEM-derived convention ]].
* WikimediaUI Base variables adopted [[ https://phabricator.wikimedia.org/source/wikimedia-ui-base/browse/master/wikimedia-ui-base.css$69 | modifier naming scheme ]]
=== Related (prior) discussions:
* Dream goal BEM mentioned by @Isarra in {T114071}
* https://www.mediawiki.org/wiki/Manual_talk:Coding_conventions/CSS/Archive_1#CSS_namespaces_useful? Mention of BEM
* {T160128}
* Wikimedia Page Library T163834
=== Class naming ~~horror~~ variety across products
Wikimedia Foundation projects currently feature a wild and historically grown variety of CSS naming:
- MediaWiki has a [[ https://www.mediawiki.org/wiki/Manual:Interface/IDs_and_classes | short overview of current ids/classes ]].
- Wikipedia has an outdated list showing the [[ https://en.wikipedia.org/wiki/Wikipedia:Catalogue_of_CSS_classes | status quo in all its beauty ]]
Concatenated words – `editsection` (great for internationalization), PascalCase – `NavFrame`, camelCase – `firstHeading`, kebap-case – `mw-body-content`, we got em all.
=== Examples
Current
```lang=html
<div id="siteNotice">
<div id="centralNotice" class="cn-undefined">
</div>
</div>
```
BEM
```lang=html
<div class="site-notice">
<div class="site-notice__central site-notice__central--undefined">
</div>
</div>
```