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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user