Merge jqhtml class naming rules, add BEM child class check

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
root
2025-12-19 01:46:34 +00:00
parent 7781aab39f
commit 9e7269e4fc
5 changed files with 452 additions and 418 deletions

View File

@@ -285,6 +285,40 @@ HOW IT WORKS
2. It matches a valid Component subclass or Blade @rsx_id
3. The filename matches the associated file
BEM CHILD CLASSES
When using BEM notation inside component SCSS, child element class
names must preserve the component's exact PascalCase class name as
the prefix. Do NOT convert to kebab-case.
The SCSS nesting syntax compiles &__element to the parent selector
plus __element. Since the parent is .Component_Name, the result is
.Component_Name__element - and HTML must use that exact class.
Correct:
// SCSS
.DataGrid_Kanban {
&__loading { ... }
&__board { ... }
&__column { ... }
}
// HTML (jqhtml template)
<div class="DataGrid_Kanban__loading">
<div class="DataGrid_Kanban__board">
<div class="DataGrid_Kanban__column">
Wrong:
// HTML - kebab-case does NOT match compiled CSS
<div class="datagrid-kanban__loading"> // No styles applied!
<div class="datagrid-kanban__board"> // No styles applied!
This is a common mistake when following general web conventions where
BEM uses kebab-case. In RSX, component class names are PascalCase,
so BEM children must also be PascalCase.
NO EXEMPTIONS
There are NO exemptions to this rule for files in rsx/app/ or