Our 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 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)
- 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 decisions behind structure and addresses common concerns
- 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
- ContentTranslation as far back as 2014 6be8e4937236 – would be useful to hear @santhosh's critical take, although it's still in use in 2020
- Wikimedia Design Style Guide with BEM-derived convention.
- WikimediaUI Base variables adopted modifier naming scheme
Related (prior) discussions:
- Dream goal BEM mentioned by @Isarra in T114071: Let's discuss the skin creation process
- https://www.mediawiki.org/wiki/Manual_talk:Coding_conventions/CSS/Archive_1#CSS_namespaces_useful? Mention of BEM
- T160128: MFA: Spike [8hr] Review CSS code conventions and improve to minimise chance of UI regressions
- Wikimedia Page Library T163834
horror variety across products
Wikimedia Foundation projects currently feature a wild and historically grown variety of CSS naming:
- MediaWiki has a short overview of current ids/classes.
- Wikipedia has an outdated list showing the 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.
<div id="siteNotice"> <div id="centralNotice" class="cn-undefined"> </div> </div>
<div class="site-notice"> <div class="site-notice__central site-notice__central--undefined"> </div> </div>
- Tasks for revising CSS in WVUI are made as needed.
- T253671 is revised as needed.