BEM + BEMIT Naming
Eddie uses BEM (Block Element Modifier) with BEMIT namespace prefixes:
.ed-c-button /* Block (component) */
.ed-c-button__text /* Element */
.ed-c-button--primary /* Modifier */
Namespace Prefixes
| Prefix |
Meaning |
Example |
ed- |
Global Eddie namespace |
All classes |
c- |
Component |
ed-c-button |
l- |
Layout |
ed-l-grid |
u- |
Utility |
ed-u-margin-bottom-md |
is- / has- |
State |
ed-is-active, ed-has-icon |
Recipe Prefixes
Recipe components use ed-r-c- for CSS and ed-r- for tags:
.ed-r-c-site-header /* Recipe component class */
<ed-r-site-header> /* Recipe custom element */
SCSS Conventions
Flat Structure
SCSS nesting is limited to:
- Media queries
- Pseudo-selectors and states (
:hover, ::before)
- Parent selectors (
&)
/* Good */
.ed-c-button {
padding: size(2) size(4);
&:hover {
opacity: 0.9;
}
@media (min-width: 768px) {
padding: size(3) size(6);
}
}
/* Bad — no deep nesting */
.ed-c-button {
.ed-c-button__text {
.ed-c-button__icon { ... }
}
}
Property Order
- Includes / typography
- Positioning
- Box model
- Color
- Transitions / animations
Consumer Project CSS
Consumer projects should contain zero component styles. Your app CSS should only include:
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
#app { min-height: 100vh; }
Everything else comes from Eddie.
Full Guidelines
These CSS conventions are maintained in the monorepo's docs/CODE_GUIDELINES.md. The canonical version is rendered in Storybook under Documentation:
Read Full Code Guidelines in Storybook →