CSS Cursor Rules
Cursor rules for CSS: custom properties, logical properties, modern layout, and maintainable CSS architecture.
- Use CSS custom properties for all design tokens (colors, spacing, typography) - Use logical properties (margin-inline, padding-block) for RTL support - Use CSS Grid for two-dimensional layouts; Flexbox for one-dimensional - Avoid deep selector nesting; keep specificity flat and predictable - Use :is() and :where() to group selectors and control specificity - Use clamp() for fluid typography and spacing (clamp(1rem, 2.5vw, 1.5rem)) - Prefer CSS animations over JavaScript for visual-only transitions - Use container queries for component-level responsive design
How to use with Cursor
Create a `.cursorrules` file in your project root and paste these rules. Cursor reads this automatically on every AI interaction.
Related Rules
Python Cursor Rules
Best Cursor AI coding rules for Python development. Enforce type hints, PEP 8, Pythonic patterns, and modern Python best practices in your .cursorrules file.
TypeScript Cursor Rules
Cursor rules for TypeScript: enforce strict mode, eliminate any types, and write type-safe code with these .cursorrules configurations.
React Cursor Rules
Cursor rules for React: component patterns, hooks best practices, performance optimization, and clean state management conventions.
Next.js Cursor Rules
Cursor rules for Next.js App Router: server components, data fetching, routing, and deployment best practices.