with one click
css-standards
CSS coding standards for Oh My Brand! theme. BEM methodology, custom properties, theme.json integration, responsive design, and accessibility. Use when styling blocks, templates or components.
Menu
CSS coding standards for Oh My Brand! theme. BEM methodology, custom properties, theme.json integration, responsive design, and accessibility. Use when styling blocks, templates or components.
Writes, edits, and creates dbt models following best practices. Use when user needs to create new dbt SQL models, update existing models, or convert raw SQL to dbt format. Handles staging, intermediate, and mart models with proper config blocks, CTEs, and documentation.
Apply Domain-Driven Design, Clean Architecture, CQRS, and command/query patterns to code reviews and feature design. Use when analyzing or designing code in Application, Service, Infrastructure, DataAccess, Validation, Domain, or Functions projects, or when addressing architectural concerns, layering, mapping, entities, value objects, repositories, or validators in the Rome Repair Order Service.
Analyzes and refactors code using Domain-Driven Design principles. Use when refactoring domain models, identifying DDD anti-patterns, improving domain clarity, or applying tactical/strategic DDD patterns.
Guide for DDD strategic design - analyzing domains through structured questioning, conducting stakeholder interviews (PM/domain experts/users), and producing Bounded Context analysis, Context Maps, and Ubiquitous Language. Use when user needs help understanding domain boundaries, planning domain interviews, or structuring DDD strategic artifacts.
Win competitive rounds: run a clean process, deliver value previews before asking, coordinate partners, and manage timelines. Use when you're trying to close a 'must win' deal against other funds.
End-to-end associate workflow with time-boxed gates: thesis -> sourcing -> meetings -> diligence -> memo, ending with either IC-ready memo or explicit kill decision. Use when you need to run the full pipeline for a sector or a specific deal.
| name | css-standards |
| description | CSS coding standards for Oh My Brand! theme. BEM methodology, custom properties, theme.json integration, responsive design, and accessibility. Use when styling blocks, templates or components. |
| metadata | {"author":"Wesley Smits","version":"1.0.0"} |
CSS coding standards and patterns for the Oh My Brand! WordPress FSE theme.
| File | Purpose |
|---|---|
| gallery-block.css | Complete block styling example |
| theme-json-tokens.css | WordPress design token usage |
| accessibility.css | Focus, reduced motion, contrast |
BEM (Block, Element, Modifier) naming convention:
.block → Component container
.block__element → Child element
.block--modifier → Block variation
.block__element--modifier → Element variation
| Block Type | Prefix | Example |
|---|---|---|
| Native blocks | wp-block-theme-oh-my-brand- | .wp-block-theme-oh-my-brand-gallery |
| ACF blocks | wp-block-acf- | .wp-block-acf-gallery |
/* Block */
.wp-block-theme-oh-my-brand-gallery { }
/* Elements */
.wp-block-theme-oh-my-brand-gallery__track { }
.wp-block-theme-oh-my-brand-gallery__slide { }
.wp-block-theme-oh-my-brand-gallery__button { }
/* Block modifiers */
.wp-block-theme-oh-my-brand-gallery--fullwidth { }
/* Element modifiers */
.wp-block-theme-oh-my-brand-gallery__button--prev { }
.wp-block-theme-oh-my-brand-gallery__slide--active { }
Define custom properties at the block root:
.wp-block-theme-oh-my-brand-gallery {
/* Layout */
--visible-images: 3;
--block-gap: 1rem;
/* Animation */
--transition-duration: 300ms;
--transition-timing: ease-out;
/* Colors (use theme tokens) */
--button-bg: var(--wp--preset--color--primary);
--button-text: var(--wp--preset--color--base);
}
See gallery-block.css for complete example.
Use WordPress design tokens from theme.json:
| Token Type | CSS Variable Pattern |
|---|---|
| Colors | var(--wp--preset--color--{slug}) |
| Spacing | var(--wp--preset--spacing--{size}) |
| Font Family | var(--wp--preset--font-family--{slug}) |
| Font Size | var(--wp--preset--font-size--{slug}) |
| Layout | var(--wp--style--global--content-size) |
See theme-json-tokens.css for examples.
Mobile-first approach using min-width breakpoints:
| Name | Width | Target |
|---|---|---|
| Mobile | < 768px | Phones (base styles) |
| Tablet | ≥ 768px | Tablets |
| Desktop | ≥ 1024px | Laptops |
| Large | ≥ 1280px | Desktops |
/* Base (mobile) styles */
.wp-block-theme-oh-my-brand-gallery {
grid-template-columns: 1fr;
}
/* Tablet */
@media (min-width: 768px) {
.wp-block-theme-oh-my-brand-gallery {
grid-template-columns: repeat(2, 1fr);
}
}
/* Desktop */
@media (min-width: 1024px) {
.wp-block-theme-oh-my-brand-gallery {
grid-template-columns: repeat(3, 1fr);
}
}
.wp-block-theme-oh-my-brand-gallery__button:focus-visible {
outline: 2px solid var(--wp--preset--color--primary);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.wp-block-theme-oh-my-brand-gallery__track {
transition: none;
}
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
See accessibility.css for complete patterns.
| Content Type | Minimum Ratio |
|---|---|
| Normal text | 4.5:1 |
| Large text (18px+ bold, 24px+) | 3:1 |
| UI components | 3:1 |
This project uses Stylelint for CSS linting. Key rules to follow:
Stylelint disallows empty rule blocks. Never create a rule with only a comment:
/* ❌ Bad - empty block causes stylelint error */
@media (prefers-reduced-motion: reduce) {
.my-component {
/* No styles needed */
}
}
/* ❌ Bad - empty block */
.my-component__element {
}
/* ✅ Good - omit the rule entirely if no styles needed */
/* (Simply don't include the rule) */
/* ✅ Good - if you need the media query, include actual styles */
@media (prefers-reduced-motion: reduce) {
.my-component {
transition: none;
animation: none;
}
}
Stylelint disallows duplicate selectors within a stylesheet. Consolidate all styles for a selector in one place:
/* ❌ Bad - duplicate selector causes stylelint error */
.my-component__number {
font-size: 2rem;
font-weight: 700;
}
.my-component__label {
font-size: 1rem;
}
.my-component__number {
order: 0; /* This duplicates the selector above! */
}
/* ✅ Good - all styles consolidated in one selector */
.my-component__number {
font-size: 2rem;
font-weight: 700;
order: 0;
}
.my-component__label {
font-size: 1rem;
}
Use shorthand hex colors when possible:
/* ❌ Bad - can be shortened */
color: #0066cc;
background: #ffffff;
/* ✅ Good - use shorthand */
color: #06c;
background: #fff;
#aabbcc → #abc)Always run stylelint after making CSS changes:
pnpm run lint:css
Fix any issues before committing. This ensures consistent code style and catches common errors.