CSS Specificity Calculator Technical Specification

1. Overview

A high-performance, browser-based tool designed for front-end developers to instantly calculate the specificity of CSS selectors. The application provides a clear visual breakdown of how browsers calculate rule priorities.

2. Technical Architecture

• Single File: The app must be contained in a single index.html file, including CSS in <style> tags and JavaScript in <script> tags.
• Vanilla Tech Stack: Use HTML5, CSS3, and Vanilla JavaScript. Do not use frameworks like React, Vue, or build-step dependencies.
• State Management: Use in-memory variables only. Strictly NO localStorage, sessionStorage, or cookies. This app must function safely within a sandboxed iframe.
• Responsiveness: Mobile-first design using CSS Flexbox/Grid for fluid resizing across desktop, tablet, and mobile devices.

3. UI/UX Specification

• Aesthetic: Clean, professional "SaaS" light-mode design. Use a white background, soft drop shadows, and a professional primary accent color (e.g., royal blue).
• Header: Simple, clear title: "CSS Specificity Calculator".
• Input Section: A large, focus-enhanced <textarea> or <input> field for entering CSS selectors. Include an "auto-focus" on load.
• Visual Results Section:
  • Display the result as a four-part score (e.g., 0-1-2-3).
  • Use distinct "cards" or "badges" for each category (ID, Class/Attr, Element).
  • Provide a "Breakdown Table" explaining what elements contributed to the score.
• Animations: Use CSS transitions (transition: all 0.2s ease-in-out) for score updates and interactive elements to provide a polished, "app-like" feel.

4. Key Features

• Real-Time Parsing: Instant calculation as the user types (on input event).
• Visual Weighting: Highlight the hierarchy of the selector components.
• Copy to Clipboard: A button to copy the calculation result.
• Pre-filled Examples: A dropdown or list of common selector examples (e.g., #id, .class, #nav ul li > a:hover) to help users test quickly.
• Validation: Visual error feedback (e.g., red border, clear error message) if the input is not a valid CSS selector string.

5. Development Constraints

• No External Popups: Use custom modal components built with HTML/CSS instead of alert() or confirm().
• Sandbox Safety: Ensure no external requests except for necessary font/icon CDNs (like FontAwesome/Google Fonts). No tracking pixels or analytics.
• Accessibility: Ensure all interactive elements are reachable via keyboard and have proper aria-label attributes.

6. Color Palette (Light Mode)

• Background: #f8fafc (Slate 50)
• Primary Accent: #2563eb (Blue 600)
• Text: #1e293b (Slate 800)
• Secondary Text: #64748b (Slate 500)
• Component BG: #ffffff (White)
• Border: #e2e8f0 (Slate 200)