# Expert CSS Review Prompt
You are a senior Front-End Engineer, CSS Architect, UX Designer, Accessibility Specialist, and Performance Engineer.
Review the following CSS as if it were going into production for a high-traffic WordPress website serving an international audience.
Perform a comprehensive review and identify every issue you find.
## 1. Code Quality
* Unused selectors
* Duplicate rules
* Redundant declarations
* Overly specific selectors
* Poor naming conventions
* Maintainability issues
* Readability improvements
* CSS organization
## 2. Performance
* Expensive selectors
* Inefficient layout techniques
* Excessive nesting
* Paint-heavy effects
* Unnecessary transitions
* Costly animations
* Large shadows
* Filter performance
* Repaint and reflow issues
## 3. Responsive Design
* Mobile-first implementation
* Tablet compatibility
* Desktop compatibility
* Very large screen support (1440px+)
* Small screen usability
* Overflow issues
* Horizontal scrolling
* Flexible layouts
## 4. Accessibility
* Color contrast
* Focus indicators
* Hover-only interactions
* Keyboard accessibility
* Text readability
* Font sizing
* Line height
* Motion reduction support (`prefers-reduced-motion`)
* High contrast compatibility
## 5. Browser Compatibility
Check compatibility with:
* Chrome
* Safari
* Firefox
* Edge
* iOS Safari
* Android Chrome
Identify any browser-specific issues or unsupported features.
## 6. WordPress Best Practices
* Compatibility with Theme
* Child theme safety
* Avoid unnecessary `!important`
* Avoid styling WordPress core elements destructively
* Compatibility with common plugins
* Prevent CSS conflicts
## 7. Core Web Vitals
Evaluate the CSS impact on:
* Largest Contentful Paint (LCP)
* Cumulative Layout Shift (CLS)
* Interaction to Next Paint (INP)
Recommend improvements where applicable.
## 8. Maintainability
* Opportunities to use CSS custom properties
* Reusable utility classes
* Consistent spacing scale
* Typography consistency
* Color consistency
* Component reusability
* Remove magic numbers
## 9. Visual Consistency
Check for:
* Consistent spacing
* Alignment issues
* Border radius consistency
* Shadow consistency
* Typography hierarchy
* Button consistency
* Form consistency
* Card consistency
## 10. Modern CSS Opportunities
Suggest where modern CSS could improve the code:
* Flexbox
* CSS Grid
* `gap`
* `clamp()`
* `min()`
* `max()`
* `aspect-ratio`
* Logical properties
* Container queries (where appropriate)
* CSS variables
## 11. Security
Identify any CSS that could unintentionally:
* Hide important UI elements
* Break forms
* Interfere with accessibility
* Cause clickjacking-like UX problems
* Create layout instability
## Output Format
For each issue provide:
* **Severity:** Critical / High / Medium / Low
* **Location:** Selector(s)
* **Problem:** Explain the issue.
* **Why it matters:** Impact on performance, UX, SEO, accessibility, or maintainability.
* **Recommended fix:** Provide the corrected CSS if applicable.
* **Priority:** Immediate, Next Sprint, or Nice to Have.
Finally, provide:
1. Overall CSS quality score (1–10)
2. Performance score (1–10)
3. Accessibility score (1–10)
4. Maintainability score (1–10)
5. WordPress compatibility score (1–10)
6. Production readiness score (1–10)
Do not ignore minor issues. Review the CSS with the standards expected for a production-ready WordPress theme used by hundreds of thousands of visitors.
Advanced CSS Code Review and Performance Audit
Prompt
385 words
How to Use the Advanced CSS Code Review Prompt for Optimization
Securing a high-performing website starts with a comprehensive CSS code review prompt to catch hidden structural errors. This tool transforms any AI into a senior front-end engineer and performance architect. You can instantly audit custom stylesheets for expensive selectors, redundant declarations, and accessibility flaws before pushing code to a live server.
The prompt relies on strict parameters to evaluate your code against modern web standards. It directs the AI to prioritize Core Web Vitals like Cumulative Layout Shift and Largest Contentful Paint. It also enforces a rigorous check for modern CSS opportunities like clamp functions, logical properties, and container queries. The output includes specific severity ratings and corrected code blocks for immediate implementation.
- Auditing a custom GeneratePress WordPress child theme for unused selectors and CSS conflicts.
- Optimizing heavy animations and paint-heavy effects in a React web application to improve interaction latency.
- Checking a new Shopify storefront stylesheet for WCAG color contrast compliance and keyboard accessibility.
Deploying optimized styles guarantees a better user experience and higher search rankings. Copy the text below and adjust the browser compatibility targets or platform specifics to match your exact project requirements.
Pro Tip: AI models occasionally over-optimize by suggesting modern properties that conflict with older iOS Safari versions. This aggressive optimization is great for keeping modern codebases lean, but you should always verify suggested
aspect-ratioorgapreplacements against your specific user analytics data.
Frequently Asked Questions
The prompt performs a deep dive across 11 key areas, including layout performance (repaints/reflows), modern CSS opportunities (clamp(), logical properties), accessibility (contrast, reduced-motion), and structural code quality.
For the most detailed feedback, it is best to paste individual component styles or small-to-medium stylesheets (up to a few hundred lines). Splitting massive stylesheets into logical chunks prevents the AI from skimming or missing minor issues.