| name | css-styling-standards |
| description | CSS styling standards and best practices for responsive, accessible, and maintainable web interfaces with special considerations for multilingual content and Chuukese text display. Use when creating or modifying stylesheets and CSS components. |
CSS Styling Standards
Core Principles
- Mobile-first design: Start with mobile styles, enhance for larger screens
- Accessibility compliance: Meet WCAG 2.1 AA standards
- Multilingual support: Proper display of accented characters and different writing systems
- Consistent naming: Use BEM methodology for class naming
- Performance optimization: Minimize CSS size and loading time
CSS Architecture
1. File Organization
@import 'normalize.css';
@import 'variables.css';
@import 'typography.css';
@import 'layout.css';
@import 'components.css';
@import 'utilities.css';
@import 'responsive.css';
2. CSS Custom Properties (Variables)
:root {
--primary-color: #2563eb;
--secondary-color: #64748b;
--accent-color: #f59e0b;
--text-color: #1f2937;
--text-light: #6b7280;
--background-color: #ffffff;
--surface-color: #f9fafb;
--font-family-primary: 'Noto Sans', 'Arial Unicode MS', sans-serif;
--font-family-chuukese: 'Noto Sans', 'Doulos SIL', 'Arial Unicode MS', sans-serif;
--font-size-base: 1rem;
--font-size-large: 1.125rem;
--line-height-base: 1.6;
--line-height-tight: 1.4;
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
}
Component Standards
1. Chuukese Text Display
.chuukese-text {
font-family: var(--font-family-chuukese);
font-size: var(--font-size-large);
line-height: var(--line-height-base);
direction: ltr;
unicode-bidi: embed;
font-feature-settings: 'kern' 1, 'liga' 1;
}
.chuukese-text--heading {
font-weight: 600;
letter-spacing: 0.02em;
margin-bottom: var(--spacing-md);
}
.chuukese-text--inline {
font-style: italic;
font-weight: 500;
color: var(--primary-color);
}
2. Translation Interface Components
.translation-input {
width: 100%;
min-height: 120px;
padding: var(--spacing-md);
border: 2px solid var(--surface-color);
border-radius: 0.5rem;
font-family: var(--font-family-chuukese);
font-size: var(--font-size-base);
line-height: var(--line-height-base);
resize: vertical;
transition: border-color 0.2s ease-in-out;
}
.translation-input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px hsla(217, 91%, 60%, 0.1);
}
.translation-input--chuukese {
direction: ltr;
text-align: left;
}
.translation-input--error {
border-color: #ef4444;
}
3. Dictionary Entry Component
.dictionary-entry {
background: var(--background-color);
border: 1px solid var(--surface-color);
border-radius: 0.5rem;
padding: var(--spacing-lg);
margin-bottom: var(--spacing-md);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.2s ease-in-out;
}
.dictionary-entry:hover {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.dictionary-entry__word {
font-size: 1.25rem;
font-weight: 600;
color: var(--primary-color);
margin-bottom: var(--spacing-sm);
}
.dictionary-entry__definition {
color: var(--text-color);
margin-bottom: var(--spacing-sm);
}
.dictionary-entry__pronunciation {
font-family: 'Courier New', monospace;
font-size: 0.9rem;
color: var(--text-light);
background: var(--surface-color);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: 0.25rem;
display: inline-block;
}
.dictionary-entry__cultural-note {
font-style: italic;
color: var(--text-light);
border-left: 3px solid var(--accent-color);
padding-left: var(--spacing-sm);
margin-top: var(--spacing-sm);
}
Layout Standards
1. Grid System
.grid {
display: grid;
gap: var(--spacing-md);
}
.grid--2-col {
grid-template-columns: 1fr 1fr;
}
.grid--3-col {
grid-template-columns: repeat(3, 1fr);
}
.grid--auto-fit {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
@media (max-width: 768px) {
.grid--2-col,
.grid--3-col {
grid-template-columns: 1fr;
}
}
2. Container and Spacing
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-md);
}
@media (min-width: 768px) {
.container {
padding: 0 var(--spacing-lg);
}
}
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
Responsive Design
1. Mobile-First Media Queries
.navigation {
display: flex;
flex-direction: column;
padding: var(--spacing-sm);
}
@media (min-width: 768px) {
.navigation {
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: var(--spacing-md);
}
}
@media (min-width: 1024px) {
.navigation {
padding: var(--spacing-lg);
}
}
2. Responsive Typography
.heading-1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
line-height: var(--line-height-tight);
margin-bottom: var(--spacing-lg);
}
.heading-2 {
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 600;
line-height: var(--line-height-tight);
margin-bottom: var(--spacing-md);
}
.chuukese-text {
font-size: clamp(1rem, 2.5vw, 1.125rem);
}
@media (max-width: 480px) {
.chuukese-text {
font-size: 1.125rem;
}
}
Accessibility Standards
1. Focus Management
.btn:focus,
.form-input:focus,
.translation-input:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
@media (prefers-contrast: high) {
.btn:focus,
.form-input:focus {
outline: 3px solid #000;
outline-offset: 2px;
}
}
2. Color and Contrast
:root {
--text-contrast-ratio: 4.5;
}
@media (prefers-contrast: high) {
:root {
--primary-color: #000;
--text-color: #000;
--background-color: #fff;
--surface-color: #f0f0f0;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
Utility Classes
1. Common Utilities
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-grid { display: grid; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-primary { color: var(--primary-color); }
.text-secondary { color: var(--secondary-color); }
.text-muted { color: var(--text-light); }
@media (min-width: 768px) {
.d-md-block { display: block; }
.d-md-none { display: none; }
.text-md-left { text-align: left; }
.text-md-center { text-align: center; }
}
Best Practices
1. Performance Optimization
- Use CSS custom properties for consistent theming
- Minimize the use of expensive properties (box-shadow, gradients)
- Optimize for critical rendering path
- Use efficient selectors (avoid deep nesting)
2. Maintainability
- Follow BEM naming convention
- Group related styles together
- Comment complex or non-obvious styles
- Use meaningful variable names
3. Cross-Browser Compatibility
- Test in major browsers (Chrome, Firefox, Safari, Edge)
- Use autoprefixer for vendor prefixes
- Provide fallbacks for modern CSS features
- Test with different font settings
4. Multilingual Considerations
- Support for RTL languages if needed
- Font stack that supports Unicode characters
- Proper spacing for accented characters
- Consider text expansion/contraction in different languages
Validation Criteria
CSS should:
- ✅ Pass W3C CSS validation
- ✅ Meet WCAG 2.1 AA accessibility standards
- ✅ Display correctly across major browsers
- ✅ Support proper Chuukese text rendering
- ✅ Follow consistent naming conventions
- ✅ Include responsive breakpoints
- ✅ Optimize for performance and loading speed