CSS Development Standards

Use these standards when writing CSS. This guide covers both Blazor and React projects.

Style Organization Priority

1. •Global stylesheets - Use existing styles first
2. •Component isolation - Component-specific styles in isolated files
3. •Inline styles - Only for dynamic or highly specific styling

Framework-Specific Patterns

Blazor Projects

Global Stylesheets: app.css, edit-controls.css, ant-overrides.css

Component Isolation: Use .razor.css files (automatic CSS isolation)

MyComponent.razor
MyComponent.razor.css   <- Scoped styles

Example:

/* MyComponent.razor.css - automatically scoped to component */
.container { padding: 16px; }
button { background: var(--primary-color); }

React Projects

Global Stylesheets: index.css, App.css, or framework-specific (e.g., globals.css in Next.js)

Component Isolation Options:

1. •CSS Modules (Recommended) - Use .module.css files

MyComponent.tsx
MyComponent.module.css   <- Scoped styles

/* MyComponent.module.css */
.container { padding: 16px; }
.button { background: var(--primary-color); }

// MyComponent.tsx
import styles from './MyComponent.module.css';

export const MyComponent = () => (
  <div className={styles.container}>
    <button className={styles.button}>Click</button>
  </div>
);

1. •Styled Components - CSS-in-JS approach

import styled from 'styled-components';

const Container = styled.div`
  padding: 16px;
`;

1. •Tailwind CSS - Utility-first approach

<div className="p-4 flex flex-col gap-4">

Standard Patterns (Both Frameworks)

/* Utility classes (preferred) - Spacing scale: 4px, 8px, 16px, 24px, 32px */
.flex-column-16 { display: flex; flex-direction: column; gap: 16px; }
.flex-row-16 { display: flex; flex-direction: row; gap: 16px; }
.card { padding: 16px; border: 1px solid var(--border-color); border-radius: 4px; }

CSS Best Practices Checklist

General (All Frameworks)

• •✅ Reuse existing styles - Check global stylesheets first
• •✅ Semantic class names - Descriptive, not presentation-focused
• •✅ Consistent spacing - Use 8px increment system (4, 8, 16, 24, 32px)
• •✅ CSS custom properties - Leverage variables for theming
• •✅ Shorthand properties - margin: 16px 0 vs separate properties
• •✅ Remove unused styles - Delete unused classes; move shared classes to global files
• •❌ Redundant styles - Don't duplicate existing utility classes
• •❌ Inline styles - Use only when absolutely necessary
• •❌ !important - Avoid unless overriding third-party styles

Blazor-Specific

• •✅ Component isolation - Use .razor.css for component-specific styles
• •✅ Check existing - Look in app.css, edit-controls.css, ant-overrides.css first

React-Specific

• •✅ CSS Modules preferred - Use .module.css for component isolation
• •✅ Import styles - Import CSS Modules as objects: import styles from './X.module.css'
• •✅ camelCase in modules - Use styles.myClass not styles['my-class'] when possible
• •✅ Compose for reuse - Use CSS Modules composes for extending styles
• •❌ Global class collisions - Avoid plain .css imports in components (use modules instead)

Quick Reference: Isolation Files