bem-naming
BEM Naming in Fundamental Styles
This skill explains the BEM (Block Element Modifier) methodology used in fundamental-styles and provides naming patterns with real examples.
When to Use This Skill
Use this skill when:
- The user asks "How do I name CSS classes in fundamental-styles?"
- The user asks about BEM methodology
- The user wants to understand class naming patterns
- The user asks "What does
fd-button--emphasizedmean?" - The user needs to create custom variants or understand modifier classes
- The user asks about the
fd-prefix
What is BEM?
More from sap/fundamental-styles
layout-patterns
Common UI layout patterns using fundamental-styles - login forms, dashboards, master-detail, wizards, and more
2content-density
Guide to cozy, compact, and condensed modes - when to use each density, how to apply them, and device-specific recommendations
2component-composition
How to combine fundamental-styles components correctly - required wrappers, nesting rules, and common composition patterns
2component-guidance-data
Fiori guidelines for data display components such as Table, List, Tree, Avatar, Calendar, Icons, etc
2component-guidance-forms
Fiori guidelines for form controls and input components such as Checkbox, Input, Select, Textarea, Date Picker, etc
2component-guidance-navigation
Fiori guidelines for navigation components such as Breadcrumb, Menu, Link, Shellbar, Vertical Navigation, etc
2